refactor: vueify stuff

apps/admin/src/components/OrderListItem/ShipmentLabel.vue

@@ -18,14 +18,7 @@
     <div :class="config?.cssUtilities?.displayFlex">
       <DeliveryOptionsPackageType
         :class="config?.cssUtilities?.flexGrow"
-        :delivery-options="data.deliveryOptions" />
-
-      <div :class="config?.cssUtilities?.flexGrow">
-        <DigitalStampWeightRange
-          v-if="data.deliveryOptions.packageType === PackageTypeName.DigitalStamp"
-          :class="config?.cssUtilities?.flexGrow"
-          :weight-range="dpzRangeWeight" />
-      </div>
+        :shipment-or-order="data" />
 
       <div :class="config?.cssUtilities?.flexGrow">
         <ShipmentStatus :shipment-id="shipmentId" />
@@ -34,18 +27,13 @@
   </PdkShipmentLabelWrapper>
 </template>
 
-<script
-  lang="ts"
-  setup>
+<script lang="ts" setup>
 import {toRefs} from 'vue';
 import ShipmentStatus from '../common/ShipmentStatus.vue';
 import ShipmentBarcode from '../common/ShipmentBarcode.vue';
 import DeliveryOptionsPackageType from '../common/DeliveryOptionsPackageType.vue';
 import {useQueryStore} from '../../stores';
 import {useAdminConfig, useShipmentData} from '../../composables';
-import {PackageTypeName} from '@myparcel/constants';
-import {getDigitalStampRange} from '../../forms/helpers/getDigitalStampRange';
-import DigitalStampWeightRange from '../common/DigitalStampWeightRange.vue';
 
 const props = defineProps<{shipmentId: number}>();
 
@@ -55,5 +43,4 @@ useQueryStore().registerShipmentQueries(shipmentId);
 
 const {loading, actions, shipment: data} = useShipmentData(shipmentId);
 const config = useAdminConfig();
-const dpzRangeWeight = getDigitalStampRange();
 </script>

apps/admin/src/components/common/DeliveryOptionsExcerpt.vue

@@ -1,5 +1,5 @@
 <template>
-  <div v-if="deliveryOptions">
+  <div v-if="data && deliveryOptions">
     <span :class="config.cssUtilities?.displayFlex">
       <CarrierLogo
         v-if="carrier"
@@ -9,11 +9,7 @@
 
       <ul :class="config.cssUtilities?.marginYAuto">
         <li>
-          <DeliveryOptionsPackageType :delivery-options="deliveryOptions" />
-        </li>
-
-        <li v-if="deliveryOptions.packageType === PackageTypeName.DigitalStamp">
-          <DigitalStampWeightRange :weight-range="dpzRangeWeight" />
+          <DeliveryOptionsPackageType :shipment-or-order="data" />
         </li>
 
         <li>
@@ -37,20 +33,17 @@ import DeliveryOptionsPackageType from './DeliveryOptionsPackageType.vue';
 import DeliveryOptionsDeliveryType from './DeliveryOptionsDeliveryType.vue';
 import DateRelative from './DateRelative.vue';
 import CarrierLogo from './CarrierLogo.vue';
-import {PackageTypeName} from '@myparcel/constants';
-import {getDigitalStampRange} from '../../forms/helpers/getDigitalStampRange';
-import DigitalStampWeightRange from './DigitalStampWeightRange.vue';
 
 const {query} = useOrderData();
 
-const deliveryOptions = computed(() => get(query.data)?.deliveryOptions);
+const data = computed(() => get(query.data));
+const deliveryOptions = computed(() => data.value?.deliveryOptions);
 
 const carrier = computed(() => {
   const carriersQuery = useFetchCarrier(deliveryOptions.value?.carrier?.name);
 
   return get(carriersQuery.data);
 });
 
-const dpzRangeWeight = getDigitalStampRange();
 const config = useAdminConfig();
 </script>

apps/admin/src/components/common/DeliveryOptionsPackageType.vue

@@ -1,23 +1,39 @@
 <template>
   <span
-    v-if="deliveryOptions.packageType"
-    v-test="[$.type.__name, deliveryOptions.packageType]">
-    <PdkIcon :icon="deliveryOptions.packageType" />
+    v-if="resolved.deliveryOptions?.packageType"
+    v-test="[$.type.__name, resolved.deliveryOptions.packageType]">
+    <PdkIcon :icon="resolved.deliveryOptions.packageType" />
 
     <span
       :title="translate(getPackageTypeTranslation())"
-      v-text="translate(getPackageTypeTranslation(deliveryOptions.packageType))" />
+      v-text="translate(getPackageTypeTranslation(resolved.deliveryOptions.packageType))" />
+
+    <DigitalStampWeightRange
+      v-if="resolved.deliveryOptions?.packageType === PackageTypeName.DigitalStamp"
+      :weight="weight" />
   </span>
 </template>
 
 <script lang="ts" setup>
+import {computed} from 'vue';
+import {get, type MaybeRef} from '@vueuse/core';
 import {type Shipment} from '@myparcel-pdk/common';
+import {type Plugin} from '@myparcel-pdk/admin';
+import {isOfType} from '@myparcel/ts-utils';
+import {PackageTypeName} from '@myparcel/constants';
 import {getPackageTypeTranslation} from '../../utils';
 import {useLanguage} from '../../composables';
+import DigitalStampWeightRange from './DigitalStampWeightRange.vue';
 
-defineProps<{
-  deliveryOptions: Shipment.ModelDeliveryOptions;
-}>();
+const props = defineProps<{shipmentOrOrder: MaybeRef<Shipment.ModelShipment | Plugin.ModelPdkOrder>}>();
 
 const {translate} = useLanguage();
+
+const resolved = computed(() => get(props.shipmentOrOrder));
+
+const weight = computed(() => {
+  return isOfType<Shipment.ModelPhysicalProperties>(resolved.value.physicalProperties, 'weight')
+    ? resolved.value.physicalProperties.weight
+    : resolved.value.physicalProperties?.totalWeight ?? 0;
+});
 </script>

apps/admin/src/components/common/DigitalStampWeightRange.vue

@@ -1,20 +1,14 @@
 <template>
-  <span
-    v-if="weightRange"
-    v-test="[$.type.__name, weightRange]">
-
-    <span
-      :title="translate('digital_stamp_weight_range', {weightRange})"
-      v-text="`${weightRange.min}g - ${weightRange.max}g`" />
-  </span>
+  <span v-text="defaultRange" />
 </template>
 
 <script lang="ts" setup>
-import {useLanguage} from '../../composables';
+import {toRefs} from 'vue';
+import {useDigitalStampRanges} from '../../composables';
+
+const props = defineProps<{weight: number}>();
 
-defineProps<{
-  weightRange: {min: number; max: number; average: number};
-}>();
+const propRefs = toRefs(props);
 
-const {translate} = useLanguage();
+const {defaultRange} = useDigitalStampRanges(propRefs.weight);
 </script>

apps/admin/src/composables/index.ts

@@ -10,6 +10,7 @@ export * from './useAdminInstance';
 export * from './useAssetUrl';
 export * from './useBulkSelectCheckbox';
 export * from './useCheckboxGroupContext';
+export * from './useDigitalStampRanges';
 export * from './useDropOffInputContext';
 export * from './useDropdownData';
 export * from './useElementContext';

apps/admin/src/composables/useDigitalStampRanges.ts

@@ -0,0 +1,38 @@
+import {computed, type ComputedRef} from 'vue';
+import {get, type MaybeRef} from '@vueuse/core';
+import {type Plugin} from '@myparcel-pdk/common';
+import {type SelectOptionWithPlainLabel} from '../types';
+import {useOrderData} from './orders';
+
+interface UseDigitalStampRanges {
+  ranges: ComputedRef<SelectOptionWithPlainLabel<number, string>[]>;
+  // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-arguments
+  currentRange: ComputedRef<SelectOptionWithPlainLabel<number, string>>;
+}
+
+export const useDigitalStampRanges = (weight: MaybeRef<number>): UseDigitalStampRanges => {
+  // todo: move this to global context
+  const {order} = useOrderData();
+
+  const allRanges = computed<Plugin.DigitalStampRange[]>(() => get(order).digitalStampRanges ?? []);
+
+  const ranges = computed<SelectOptionWithPlainLabel<number, string>[]>(() => {
+    return allRanges.value.map((range) => ({
+      plainLabel: `${range.min}g – ${range.max}g`,
+      value: range.average,
+    }));
+  });
+
+  const currentRange = computed(() => {
+    const resolvedWeight = get(weight);
+
+    const matchingRange = allRanges.value.find((range) => range.min <= resolvedWeight && range.max >= resolvedWeight);
+
+    return ranges.value.find((range) => range.value === matchingRange?.average) ?? ranges.value[0];
+  });
+
+  return {
+    ranges,
+    currentRange,
+  };
+};

apps/admin/src/forms/shipmentOptions/fields/createDigitalStampRangeField.ts

@@ -1,44 +1,31 @@
 import {ref} from 'vue';
-import {first, get, last} from 'lodash-unified';
+import {get} from 'lodash-unified';
 import {get as vuGet} from '@vueuse/core';
-import {type Plugin} from '@myparcel-pdk/common';
 import {type InteractiveElementConfiguration} from '@myparcel/vue-form-builder';
 import {PackageTypeName} from '@myparcel/constants';
 import {type ShipmentOptionsRefs} from '../types';
 import {FIELD_MANUAL_WEIGHT, FIELD_PACKAGE_TYPE} from '../field';
 import {createDefaultOption, defineFormField, resolveFormComponent} from '../../helpers';
-import {type GlobalFieldProps, type OptionsProp, type SelectOption} from '../../../types';
+import {type GlobalFieldProps, type OptionsProp} from '../../../types';
 import {AdminComponent, TriState} from '../../../data';
-import {useOrderData, usePluginSettings} from '../../../composables';
+import {useDigitalStampRanges, useOrderData, usePluginSettings} from '../../../composables';
 
 export const createDigitalStampRangeField = (refs: ShipmentOptionsRefs): InteractiveElementConfiguration => {
   const pluginSettings = usePluginSettings();
   const {order} = useOrderData();
 
   const orderData = vuGet(order);
 
-  const {digitalStampRanges} = orderData;
   const {initialWeight, manualWeight} = orderData?.physicalProperties ?? {};
 
   const totalWeight = Number(initialWeight) + Number(pluginSettings.order.emptyDigitalStampWeight ?? 0);
 
-  const ranges: Plugin.ModelContextOrderDataContext['digitalStampRanges'] = digitalStampRanges ?? [];
-
-  const rangeOptions = ranges.map((range) => ({
-    plainLabel: `${range.min}g – ${range.max}g`,
-    value: range.average,
-  })) satisfies SelectOption[];
-
-  const defaultRange = ranges.find((range) => {
-    return (range.min <= totalWeight && range.max >= totalWeight) ?? first(rangeOptions);
-  });
+  const {ranges, currentRange} = useDigitalStampRanges(orderData);
 
   const selectedValue =
     TriState.Inherit === manualWeight
       ? TriState.Inherit
-      : (get(refs, FIELD_MANUAL_WEIGHT, manualWeight) as number) ?? defaultRange?.average;
-
-  const defaultOption = rangeOptions.find((option) => option.value === defaultRange?.average) ?? last(rangeOptions);
+      : (get(refs, FIELD_MANUAL_WEIGHT, manualWeight) as number) ?? currentRange.value?.value;
 
   return defineFormField({
     name: FIELD_MANUAL_WEIGHT,
@@ -55,7 +42,7 @@ export const createDigitalStampRangeField = (refs: ShipmentOptionsRefs): Interac
           n: totalWeight,
         },
       },
-      options: [createDefaultOption(defaultOption?.plainLabel), ...rangeOptions],
+      options: [createDefaultOption(currentRange.value?.plainLabel), ...ranges.value],
     } satisfies OptionsProp & GlobalFieldProps,
   });
 };

apps/admin/src/services/createNotification.ts

@@ -1,5 +1,6 @@
 import {type Variant} from '@myparcel-pdk/common';
-import {type PdkNotification, NotificationCategory} from '../types';
+import {type PdkNotification} from '../types';
+import {NotificationCategory} from '../data';
 import {useLanguage} from '../composables';
 
 const PREFIX = 'notification_';

libs/common/src/types/php-pdk.types.ts

@@ -405,12 +405,14 @@ export namespace Plugin {
     shop: Account.ModelShop;
   };
 
+  export interface DigitalStampRange {
+    min: number;
+    max: number;
+    average: number;
+  }
+
   export type ModelContextOrderDataContext = ModelPdkOrder & {
-    digitalStampRanges: {
-      min: number;
-      max: number;
-      average: number;
-    }[];
+    digitalStampRanges: DigitalStampRange[];
     inheritedDeliveryOptions: Record<string, Shipment.ModelDeliveryOptions>;
   };