feat(order-card): show digital stamp range weight

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

@@ -18,7 +18,7 @@
     <div :class="config?.cssUtilities?.displayFlex">
       <DeliveryOptionsPackageType
         :class="config?.cssUtilities?.flexGrow"
-        :delivery-options="data.deliveryOptions" />
+        :shipment-or-order="data" />
 
       <div :class="config?.cssUtilities?.flexGrow">
         <ShipmentStatus :shipment-id="shipmentId" />

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,7 +9,7 @@
 
       <ul :class="config.cssUtilities?.marginYAuto">
         <li>
-          <DeliveryOptionsPackageType :delivery-options="deliveryOptions" />
+          <DeliveryOptionsPackageType :shipment-or-order="data" />
         </li>
 
         <li>
@@ -36,7 +36,8 @@ import CarrierLogo from './CarrierLogo.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);

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="weight && 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;
+});
 </script>

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

@@ -0,0 +1,17 @@
+<template>
+  <span v-text="label" />
+</template>
+
+<script lang="ts" setup>
+import {toRefs, computed} from 'vue';
+import {useDigitalStampRanges} from '../../composables';
+
+const props = defineProps<{weight: number}>();
+
+const propRefs = toRefs(props);
+
+const {currentRange} = useDigitalStampRanges(propRefs.weight);
+const label = computed(() => {
+  return currentRange?.value?.plainLabel ? ` (${currentRange.value.plainLabel})` : '';
+});
+</script>

apps/admin/src/composables/index.ts

@@ -8,6 +8,7 @@ export * from './useAdminConfig';
 export * from './useAdminInstance';
 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,32 @@
 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, TriState} from '@myparcel-pdk/common';
+import {TriState} 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} 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 +43,7 @@ export const createDigitalStampRangeField = (refs: ShipmentOptionsRefs): Interac
           n: totalWeight,
         },
       },
-      options: [createDefaultOption(defaultOption?.plainLabel), ...rangeOptions],
+      options: [createDefaultOption(currentRange.value?.plainLabel), ...ranges.value],
     } satisfies OptionsProp & GlobalFieldProps,
   });
 };

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>;
   };