feat(pickup): show price on selected pickup location in map view

apps/delivery-options/src/types/carriers.types.ts

@@ -9,11 +9,14 @@ import {
   type SupportedPackageTypeName,
   type SupportedShipmentOptionName,
   type CarrierConfiguration,
+  type CarrierWithIdentifier,
+  type ComputedAsync,
 } from '@myparcel-do/shared';
 import {type Carrier} from '@myparcel/sdk';
 
 export type ResolvedCarrier = Carrier & {
   identifier: CarrierIdentifier;
+  carrier: ComputedAsync<CarrierWithIdentifier>;
   config: ComputedRef<CarrierConfiguration | undefined>;
   pickupCountries: ComputedRef<Set<string>>;
   deliveryCountries: ComputedRef<Set<string>>;

apps/delivery-options/src/utils/getResolvedCarrier.ts

@@ -40,36 +40,36 @@ const cb = async (
 ): Promise<ResolvedCarrier> => {
   await waitForRequestData(useCarrierRequest, [resolveCarrierName(carrierIdentifier)]);
 
-  const config = useCarrier({carrierIdentifier, platformName});
+  const carrier = useCarrier({carrierIdentifier, platformName});
   const address = useAddressStore();
 
   const deliveryTypes = computed(() => {
-    return filterSet(config.deliveryTypes.value, (option) => resolveOption(option, carrierIdentifier));
+    return filterSet(carrier.deliveryTypes.value, (option) => resolveOption(option, carrierIdentifier));
   });
 
   const shipmentOptions = computed(() => {
-    return filterSet(config.shipmentOptions.value, (option) => resolveOption(option, carrierIdentifier));
+    return filterSet(carrier.shipmentOptions.value, (option) => resolveOption(option, carrierIdentifier));
   });
 
   const features = computed(() => {
-    return filterSet(config.features.value, (option) => {
+    return filterSet(carrier.features.value, (option) => {
       return Boolean(getResolvedValue(option as ConfigSetting, carrierIdentifier));
     });
   });
 
   const hasFakeDelivery = computed(() => {
     return (
       getResolvedValue(CarrierSetting.AllowDeliveryOptions, carrierIdentifier) &&
-      config.fakeDelivery.value &&
-      !config.deliveryCountries.value.has(address.cc) &&
-      !config.fakeDeliveryBlacklist.value.has(address.cc)
+      carrier.fakeDelivery.value &&
+      !carrier.deliveryCountries.value.has(address.cc) &&
+      !carrier.fakeDeliveryBlacklist.value.has(address.cc)
     );
   });
 
   const hasDelivery = computed(() => {
     return (
       getResolvedValue(CarrierSetting.AllowDeliveryOptions, carrierIdentifier) &&
-      config.deliveryCountries.value.has(address.cc) &&
+      carrier.deliveryCountries.value.has(address.cc) &&
       DELIVERY_TYPES.some((deliveryType) => {
         const configKey = getConfigKey(deliveryType);
         const value = getResolvedValue(configKey, carrierIdentifier);
@@ -82,18 +82,19 @@ const cb = async (
   const hasPickup = computed(() => {
     const address = useAddressStore();
 
-    return deliveryTypes.value.has(DeliveryTypeName.Pickup) && config.pickupCountries.value.has(address.cc);
+    return deliveryTypes.value.has(DeliveryTypeName.Pickup) && carrier.pickupCountries.value.has(address.cc);
   });
 
   return {
-    ...config.carrier.value,
+    ...carrier.carrier.value,
 
-    config: config.config,
+    carrier: carrier.carrier,
+    config: carrier.config,
 
-    pickupCountries: config.pickupCountries,
-    deliveryCountries: config.deliveryCountries,
+    pickupCountries: carrier.pickupCountries,
+    deliveryCountries: carrier.deliveryCountries,
     deliveryTypes,
-    packageTypes: config.packageTypes,
+    packageTypes: carrier.packageTypes,
     shipmentOptions,
 
     features,

apps/delivery-options/src/views/MyParcelDeliveryOptions/Pickup/PickupLocationMap/PickupLocationDetails.vue

@@ -1,16 +1,22 @@
 <template>
   <div class="mp-flex mp-flex-col mp-gap-2">
     <div class="mp-flex mp-gap-2 mp-items-center">
-      <div>
-        <PickupLocationName :location-code="locationCode" />
-      </div>
-
       <CarrierLogo
         v-if="carrierName"
-        :carrier="carrierName"
+        :carrier="carrierName" />
+
+      <b v-text="human" />
+
+      <PriceTag
+        v-if="price"
+        :price="price"
         class="mp-ml-auto" />
     </div>
 
+    <div>
+      <PickupLocationName :location-code="locationCode" />
+    </div>
+
     <PickupLocationOpeningHours
       :expanded="expanded"
       :location-code="locationCode" />
@@ -19,15 +25,21 @@
 
 <script lang="ts" setup>
 import {computed, toRefs} from 'vue';
-import {CarrierLogo, resolveCarrierName} from '@myparcel-do/shared';
+import {CarrierLogo, resolveCarrierName, CarrierSetting} from '@myparcel-do/shared';
 import PickupLocationOpeningHours from '../PickupLocationOpeningHours/PickupLocationOpeningHours.vue';
 import PickupLocationName from '../PickupLocationList/PickupLocationName.vue';
-import {usePickupLocation} from '../../../../composables';
+import {usePickupLocation, useResolvedCarrier} from '../../../../composables';
+import {PriceTag} from '../../../../components';
 
 const props = defineProps<{locationCode: string; expanded?: boolean}>();
 const propRefs = toRefs(props);
 
 const location = usePickupLocation(propRefs.locationCode);
 
 const carrierName = computed(() => resolveCarrierName(location.value.carrier));
+
+const resolvedCarrier = useResolvedCarrier(location.value.carrier);
+
+const human = computed(() => resolvedCarrier.value?.carrier.value?.human);
+const price = computed(() => resolvedCarrier.value?.get(CarrierSetting.PricePickup));
 </script>

libs/shared/src/composables/useCarrier.ts

@@ -1,12 +1,12 @@
-import {type MaybeRef, computed, toValue, type ComputedRef, type Ref} from 'vue';
-import {asyncComputed} from '@vueuse/core';
-import {type Carrier} from '@myparcel/sdk';
+import {type MaybeRef, computed, toValue, type ComputedRef} from 'vue';
 import {
   resolveCarrierName,
   waitForRequestData,
   getCarrierConfiguration,
   getConfigKey,
   getPackageTypePriceKey,
+  type ComputedAsync,
+  computedAsync,
 } from '../utils';
 import {
   type CarrierIdentifier,
@@ -15,6 +15,7 @@ import {
   type SupportedDeliveryTypeName,
   type SupportedShipmentOptionName,
   type CarrierConfiguration,
+  type CarrierWithIdentifier,
 } from '../types';
 import {useCarrierRequest} from './sdk';
 
@@ -24,7 +25,7 @@ interface UseCarrierOptions {
 }
 
 export interface UseCarrier {
-  carrier: Ref<Carrier & {identifier: CarrierIdentifier}>;
+  carrier: ComputedAsync<CarrierWithIdentifier>;
   config: ComputedRef<CarrierConfiguration | undefined>;
   deliveryCountries: ComputedRef<Set<string>>;
   deliveryTypes: ComputedRef<Set<SupportedDeliveryTypeName>>;
@@ -36,6 +37,7 @@ export interface UseCarrier {
   shipmentOptions: ComputedRef<Set<SupportedShipmentOptionName>>;
 }
 
+// eslint-disable-next-line max-lines-per-function
 export const useCarrier = (options: UseCarrierOptions): UseCarrier => {
   const carrierName = computed(() => {
     const identifier = toValue(options.carrierIdentifier);
@@ -47,17 +49,23 @@ export const useCarrier = (options: UseCarrierOptions): UseCarrier => {
     return resolveCarrierName(identifier);
   });
 
-  const apiCarrier = asyncComputed(async () => {
-    if (!carrierName.value) return undefined;
+  const apiCarrier = computedAsync(
+    async () => {
+      if (!carrierName.value) return undefined;
 
-    const apiCarrier = await waitForRequestData(useCarrierRequest, [carrierName.value]);
+      const apiCarrier = await waitForRequestData(useCarrierRequest, [carrierName.value]);
 
-    if (!apiCarrier) {
-      throw new Error();
-    }
+      if (!apiCarrier) {
+        throw new Error();
+      }
 
-    return apiCarrier;
-  });
+      return {...apiCarrier, name: carrierName.value, identifier: toValue(options.carrierIdentifier)};
+    },
+    {
+      name: carrierName.value,
+      identifier: toValue(options.carrierIdentifier),
+    } as CarrierWithIdentifier,
+  );
 
   const config = computed(() => {
     if (!carrierName.value) return undefined;
@@ -82,14 +90,9 @@ export const useCarrier = (options: UseCarrierOptions): UseCarrier => {
     ]);
   });
 
-  const carrier = computed(() => ({
-    ...apiCarrier.value,
-    name: carrierName.value,
-    identifier: toValue(options.carrierIdentifier),
-  }));
-
   return {
-    carrier: carrier as Ref<Carrier & {identifier: CarrierIdentifier}>,
+    // @ts-expect-error todo
+    carrier: apiCarrier,
 
     config,
 

libs/shared/src/data/errors.ts

@@ -26,4 +26,8 @@ export const ERROR_WADDEN_ISLANDS = 3753;
  */
 export const ERROR_INVALID_CARRIER_PLATFORM_COMBINATION = 10832;
 
-export const IGNORED_ERRORS = Object.freeze([ERROR_INVALID_COUNTRY_CODE, ERROR_INVALID_CARRIER_PLATFORM_COMBINATION]);
+export const IGNORED_ERRORS = Object.freeze([
+  0,
+  ERROR_INVALID_COUNTRY_CODE,
+  ERROR_INVALID_CARRIER_PLATFORM_COMBINATION,
+]);