@myparcel-dev/pdk-admin 1.14.2 → 2.0.1

package/src/views/OrderListItem.spec.ts

@@ -0,0 +1,71 @@
+// @vitest-environment happy-dom
+
+import {computed, reactive, ref} from 'vue';
+import {afterEach, beforeEach, describe, expect, it, vi} from 'vitest';
+import {config, mount} from '@vue/test-utils';
+import {OrderMode} from '../data';
+import {useOrderMode} from '../composables/context/useOrderMode';
+import {doComponentTestSetup, doComponentTestTeardown} from '../__tests__';
+import OrderListItem from './OrderListItem.vue';
+
+vi.mock('../composables/context/useOrderMode', () => ({
+  useOrderMode: vi.fn(),
+}));
+
+vi.mock('../composables/orders/useOrderData', () => ({
+  useOrderData: vi.fn(() => ({
+    order: computed(() => ({externalIdentifier: 'TEST-1'})),
+    query: reactive({data: ref({externalIdentifier: 'TEST-1'}), isLoading: false}),
+  })),
+}));
+
+vi.mock('../stores', async (importOriginal) => ({
+  // eslint-disable-next-line @typescript-eslint/consistent-type-imports
+  ...(await importOriginal<typeof import('../stores')>()),
+  useActionStore: vi.fn(() => ({
+    registerOrderActions: vi.fn(),
+  })),
+  useQueryStore: vi.fn(() => ({
+    registerContextQueries: vi.fn(),
+    registerOrderQueries: vi.fn(),
+  })),
+}));
+
+const mockedUseOrderMode = vi.mocked(useOrderMode);
+
+describe('OrderListItem component selection', () => {
+  beforeEach(() => {
+    doComponentTestSetup();
+
+    config.global.stubs.OrderModeOrderListItem = true;
+    config.global.stubs.ShipmentModeOrderListItem = true;
+  });
+
+  afterEach(() => {
+    doComponentTestTeardown();
+  });
+
+  it.each([
+    [OrderMode.OrderV2, 'order-mode-order-list-item-stub'],
+    [OrderMode.OrderV1, 'order-mode-order-list-item-stub'],
+    [OrderMode.Shipments, 'shipment-mode-order-list-item-stub'],
+  ] as const)('renders the correct component for %s mode', (mode, expectedStubTag) => {
+    mockedUseOrderMode.mockReturnValue(computed(() => mode));
+    const wrapper = mount(OrderListItem);
+
+    expect(wrapper.find(expectedStubTag).exists()).toBe(true);
+  });
+
+  it('has a component for every OrderMode value', () => {
+    const allModes = Object.values(OrderMode);
+
+    for (const mode of allModes) {
+      mockedUseOrderMode.mockReturnValue(computed(() => mode));
+      const wrapper = mount(OrderListItem);
+      const div = wrapper.find('div');
+
+      expect(div.exists(), `Expected a rendered component for ${mode} mode`).toBe(true);
+      expect(div.element.children.length, `Expected a child component for ${mode} mode`).toBeGreaterThan(0);
+    }
+  });
+});

package/src/views/OrderListItem.vue

@@ -1,8 +1,9 @@
 <template>
   <div v-if="!query.isLoading">
-    <OrderModeOrderListItem v-if="orderMode" />
+    <OrderModeOrderListItem
+      v-if="orderMode === OrderMode.OrderV1 || orderMode === OrderMode.OrderV2" />
 
-    <ShipmentModeOrderListItem v-else />
+    <ShipmentModeOrderListItem v-else-if="orderMode === OrderMode.Shipments" />
   </div>
 
   <NotificationContainer
@@ -17,8 +18,8 @@
 import {defineAsyncComponent, toValue} from 'vue';
 import {type NotificationFilter} from '../types';
 import {useActionStore, useQueryStore} from '../stores';
-import {NotificationCategory} from '../data';
-import {useOrderData, usePluginSettings} from '../composables';
+import {NotificationCategory, OrderMode} from '../data';
+import {useOrderData, useOrderMode} from '../composables';
 import {NotificationContainer} from '../components';
 
 /* eslint-disable @typescript-eslint/naming-convention */
@@ -40,9 +41,7 @@ const actionStore = useActionStore();
 
 actionStore.registerOrderActions();
 
-const pluginSettings = usePluginSettings();
-
-const {orderMode} = pluginSettings.order;
+const orderMode = useOrderMode();
 
 const {query} = useOrderData();
 

package/src/forms/helpers/createHasShipmentOptionWatcher.ts

@@ -1,12 +0,0 @@
-import { type Shipment } from '@myparcel-dev/pdk-common';
-import { type InteractiveElementInstance, type FormInstance } from '@myparcel-dev/vue-form-builder';
-import { isPackageTypePackage } from './isPackageTypePackage';
-import { hasShipmentOption } from './hasShipmentOption';
-
-export const createHasShipmentOptionWatcher = (
-  shipmentOption: keyof Shipment.ModelShipmentOptions,
-  invert = false,
-  validator: (form: FormInstance) => boolean = isPackageTypePackage,
-): ((field: InteractiveElementInstance) => boolean) => {
-  return ({ form }) => (validator(form) && hasShipmentOption(form, shipmentOption)) !== invert;
-};

package/src/forms/helpers/getCarrier.ts

@@ -1,11 +0,0 @@
-import {AdminContextKey, type Carrier} from '@myparcel-dev/pdk-common';
-import {type FormInstance} from '@myparcel-dev/vue-form-builder';
-import {FIELD_CARRIER} from '../shipmentOptions';
-import {useContext} from '../../composables';
-
-export const getCarrier = (form: FormInstance): Carrier.ModelCarrier | undefined => {
-  const dynamicContext = useContext(AdminContextKey.Dynamic);
-  const chosenCarrier = form.getValue(FIELD_CARRIER);
-
-  return dynamicContext.carriers.find((carrier) => carrier.externalIdentifier === chosenCarrier);
-};

package/src/forms/helpers/getInsuranceOptions.ts

@@ -1,23 +0,0 @@
-import {TriState} from '@myparcel-dev/pdk-common';
-import {type ElementInstance, type SelectOption} from '../../types';
-import {Format, type Formatter} from '../../composables';
-import {getCarrier} from './getCarrier';
-
-export const getInsuranceOptions = (field: ElementInstance, formatter: Formatter): SelectOption[] => {
-  const carrier = getCarrier(field.form);
-
-  const insurancePossibilities = carrier?.capabilities.shipmentOptions.insurance ?? [];
-
-  const carrierPossibilities = insurancePossibilities.map((amount) => ({
-    plainLabel: formatter.format(Format.Currency, amount / 100),
-    value: amount.toString(),
-  }));
-
-  return [
-    {
-      label: 'option_default',
-      value: TriState.Inherit,
-    },
-    ...carrierPossibilities,
-  ];
-};

package/src/forms/helpers/hasPostNlAgeCheck.ts

@@ -1,11 +0,0 @@
-import {type FormInstance} from '@myparcel-dev/vue-form-builder';
-import {CarrierName} from '@myparcel-dev/constants';
-import {FIELD_AGE_CHECK} from '../shipmentOptions';
-import {triStateFieldIsEnabled} from './triStateFieldIsEnabled';
-import {getFormCarrierName} from './getFormCarrierName';
-
-export const hasPostNlAgeCheck = (form: FormInstance): boolean => {
-  const carrier = getFormCarrierName(form);
-
-  return CarrierName.PostNl === carrier && triStateFieldIsEnabled(form, FIELD_AGE_CHECK);
-};

package/src/forms/helpers/hasShipmentOption.ts

@@ -1,8 +0,0 @@
-import { type Shipment } from '@myparcel-dev/pdk-common';
-import { type FormInstance } from '@myparcel-dev/vue-form-builder';
-import { getCarrier } from './getCarrier';
-
-export const hasShipmentOption = (form: FormInstance, option: keyof Shipment.ModelShipmentOptions): boolean => {
-  const carrier = getCarrier(form);
-  return Boolean(carrier?.capabilities.shipmentOptions[option]);
-};

package/src/forms/helpers/isPackageTypeMailbox.ts

@@ -1,7 +0,0 @@
-import {type FormInstance} from '@myparcel-dev/vue-form-builder';
-import {PackageTypeName} from '@myparcel-dev/constants';
-import {FIELD_PACKAGE_TYPE} from '../shipmentOptions';
-
-export const isPackageTypeMailbox = (form: FormInstance): boolean => {
-  return PackageTypeName.Mailbox === form.getValue(FIELD_PACKAGE_TYPE);
-};

package/src/forms/helpers/isPackageTypePackage.ts

@@ -1,7 +0,0 @@
-import { type FormInstance } from '@myparcel-dev/vue-form-builder';
-import { PackageTypeName } from '@myparcel-dev/constants';
-import { FIELD_PACKAGE_TYPE } from '../shipmentOptions';
-
-export const isPackageTypePackage = (form: FormInstance): boolean => {
-  return PackageTypeName.Package === form.getValue(FIELD_PACKAGE_TYPE);
-};

package/src/forms/helpers/isPackageTypePackageOrSmall.ts

@@ -1,7 +0,0 @@
-import {type FormInstance} from '@myparcel-dev/vue-form-builder';
-import {isPackageTypeSmallPackage} from './isPackageTypeSmallPackage';
-import {isPackageTypePackage} from './isPackageTypePackage';
-
-export const isPackageTypePackageOrSmall = (form: FormInstance): boolean => {
-  return isPackageTypePackage(form) || isPackageTypeSmallPackage(form);
-};

package/src/forms/helpers/isPackageTypeSmallPackage.ts

@@ -1,7 +0,0 @@
-import {type FormInstance} from '@myparcel-dev/vue-form-builder';
-import {PackageTypeName} from '@myparcel-dev/constants';
-import {FIELD_PACKAGE_TYPE} from '../shipmentOptions';
-
-export const isPackageTypeSmallPackage = (form: FormInstance): boolean => {
-  return PackageTypeName.PackageSmall === form.getValue(FIELD_PACKAGE_TYPE);
-};

package/src/forms/helpers/setPostNlAgeCheckSubtext.ts

@@ -1,17 +0,0 @@
-import {type InteractiveElementInstance} from '@myparcel-dev/vue-form-builder';
-import {CarrierName} from '@myparcel-dev/constants';
-import {AGE_CHECK, FIELD_AGE_CHECK, KEY_SUBTEXT} from '../shipmentOptions';
-import {setFieldProp} from './setFieldProp';
-import {hasPostNlAgeCheck} from './hasPostNlAgeCheck';
-import {getFieldLabel} from './getFieldLabel';
-import {createLabel} from './createLabel';
-
-export const setPostNlAgeCheckSubtext = ({form}: InteractiveElementInstance): void => {
-  const defaultKey = createLabel(getFieldLabel(AGE_CHECK), KEY_SUBTEXT);
-
-  if (hasPostNlAgeCheck(form)) {
-    setFieldProp(form, FIELD_AGE_CHECK, KEY_SUBTEXT, `${defaultKey}_${CarrierName.PostNl}`);
-  } else {
-    setFieldProp(form, FIELD_AGE_CHECK, KEY_SUBTEXT, defaultKey);
-  }
-};

package/src/forms/shipmentOptions/fields/createAgeCheckField.ts

@@ -1,33 +0,0 @@
-import {TriState} from '@myparcel-dev/pdk-common';
-import {type InteractiveElementConfiguration} from '@myparcel-dev/vue-form-builder';
-import {type PromiseOr} from '@myparcel-dev/ts-utils';
-import {CarrierName} from '@myparcel-dev/constants';
-import {type ShipmentOptionsRefs} from '../types';
-import {FIELD_AGE_CHECK, FIELD_ONLY_RECIPIENT, FIELD_SIGNATURE} from '../field';
-import {getFormCarrierName, setPostNlAgeCheckSubtext, triStateFieldIsEnabled} from '../../helpers';
-import {createShipmentOptionField} from './createShipmentOptionField';
-
-export const createAgeCheckField = (refs: ShipmentOptionsRefs): InteractiveElementConfiguration => {
-  return createShipmentOptionField(refs, FIELD_AGE_CHECK, {
-    afterUpdate(field): PromiseOr<void> {
-      const {form} = field;
-
-      setPostNlAgeCheckSubtext(field);
-
-      if (!triStateFieldIsEnabled(field.form, FIELD_AGE_CHECK)) {
-        return;
-      }
-
-      switch (getFormCarrierName(form)) {
-        case CarrierName.PostNl:
-          form.setValue(FIELD_SIGNATURE, TriState.On);
-          form.setValue(FIELD_ONLY_RECIPIENT, TriState.On);
-          break;
-
-        case CarrierName.DhlForYou:
-          form.setValue(FIELD_SIGNATURE, TriState.Off);
-          break;
-      }
-    },
-  });
-};

package/src/forms/shipmentOptions/fields/createDirectReturnField.ts

@@ -1,8 +0,0 @@
-import {type InteractiveElementConfiguration} from '@myparcel-dev/vue-form-builder';
-import {type ShipmentOptionsRefs} from '../types';
-import {FIELD_DIRECT_RETURN} from '../field';
-import {createShipmentOptionField} from './createShipmentOptionField';
-
-export const createDirectReturnField = (refs: ShipmentOptionsRefs): InteractiveElementConfiguration => {
-  return createShipmentOptionField(refs, FIELD_DIRECT_RETURN);
-};

package/src/forms/shipmentOptions/fields/createHideSenderField.ts

@@ -1,8 +0,0 @@
-import {type InteractiveElementConfiguration} from '@myparcel-dev/vue-form-builder';
-import {type ShipmentOptionsRefs} from '../types';
-import {FIELD_HIDE_SENDER} from '../field';
-import {createShipmentOptionField} from './createShipmentOptionField';
-
-export const createHideSenderField = (refs: ShipmentOptionsRefs): InteractiveElementConfiguration => {
-  return createShipmentOptionField(refs, FIELD_HIDE_SENDER);
-};

package/src/forms/shipmentOptions/fields/createLargeFormatField.ts

@@ -1,8 +0,0 @@
-import {type InteractiveElementConfiguration} from '@myparcel-dev/vue-form-builder';
-import {type ShipmentOptionsRefs} from '../types';
-import {FIELD_LARGE_FORMAT} from '../field';
-import {createShipmentOptionField} from './createShipmentOptionField';
-
-export const createLargeFormatField = (refs: ShipmentOptionsRefs): InteractiveElementConfiguration => {
-  return createShipmentOptionField(refs, FIELD_LARGE_FORMAT);
-};

package/src/forms/shipmentOptions/fields/createOnlyRecipientField.ts

@@ -1,21 +0,0 @@
-import {TriState} from '@myparcel-dev/pdk-common';
-import {type InteractiveElementConfiguration} from '@myparcel-dev/vue-form-builder';
-import {CarrierName} from '@myparcel-dev/constants';
-import {type ShipmentOptionsRefs} from '../types';
-import {FIELD_AGE_CHECK, FIELD_ONLY_RECIPIENT} from '../field';
-import {getFormCarrierName, hasPostNlAgeCheck} from '../../helpers';
-import {createShipmentOptionField} from './createShipmentOptionField';
-
-export const createOnlyRecipientField = (refs: ShipmentOptionsRefs): InteractiveElementConfiguration => {
-  return createShipmentOptionField(refs, FIELD_ONLY_RECIPIENT, {
-    readOnlyWhen: ({form}) => hasPostNlAgeCheck(form),
-
-    afterUpdate({form}, value) {
-      if (!(CarrierName.DhlForYou === getFormCarrierName(form) && TriState.On === value)) {
-        return;
-      }
-
-      form.setValue(FIELD_AGE_CHECK, TriState.Off);
-    },
-  });
-};

package/src/forms/shipmentOptions/fields/createPriorityDeliveryField.ts

@@ -1,12 +0,0 @@
-import {type InteractiveElementConfiguration} from '@myparcel-dev/vue-form-builder';
-import {type ShipmentOptionsRefs} from '../types';
-import {FIELD_PRIORITY_DELIVERY, PRIORITY_DELIVERY} from '../field';
-import {createHasShipmentOptionWatcher, isPackageTypeMailbox} from '../../helpers';
-import {createShipmentOptionField} from './createShipmentOptionField';
-
-export const createPriorityDeliveryField = (refs: ShipmentOptionsRefs): InteractiveElementConfiguration => {
-  return createShipmentOptionField(refs, FIELD_PRIORITY_DELIVERY, {
-    visibleWhen: createHasShipmentOptionWatcher(PRIORITY_DELIVERY, false, isPackageTypeMailbox),
-    disabledWhen: createHasShipmentOptionWatcher(PRIORITY_DELIVERY, true, isPackageTypeMailbox),
-  });
-};

package/src/forms/shipmentOptions/fields/createReceiptCodeField.ts

@@ -1,21 +0,0 @@
-import {TriState} from '@myparcel-dev/pdk-common';
-import {type InteractiveElementConfiguration} from '@myparcel-dev/vue-form-builder';
-import {CarrierName} from '@myparcel-dev/constants';
-import {type ShipmentOptionsRefs} from '../types';
-import {FIELD_AGE_CHECK, FIELD_RECEIPT_CODE} from '../field';
-import {getFormCarrierName, hasPostNlAgeCheck} from '../../helpers';
-import {createShipmentOptionField} from './createShipmentOptionField';
-
-export const createReceiptCodeField = (refs: ShipmentOptionsRefs): InteractiveElementConfiguration => {
-  return createShipmentOptionField(refs, FIELD_RECEIPT_CODE, {
-    readOnlyWhen: ({form}) => hasPostNlAgeCheck(form),
-
-    afterUpdate({form}, value) {
-      if (!(CarrierName.DhlForYou === getFormCarrierName(form) && TriState.On === value)) {
-        return;
-      }
-
-      form.setValue(FIELD_AGE_CHECK, TriState.Off);
-    },
-  });
-};

package/src/forms/shipmentOptions/fields/createSameDayDeliveryField.ts

@@ -1,8 +0,0 @@
-import {type InteractiveElementConfiguration} from '@myparcel-dev/vue-form-builder';
-import {type ShipmentOptionsRefs} from '../types';
-import {FIELD_SAME_DAY_DELIVERY} from '../field';
-import {createShipmentOptionField} from './createShipmentOptionField';
-
-export const createSameDayDeliveryField = (refs: ShipmentOptionsRefs): InteractiveElementConfiguration => {
-  return createShipmentOptionField(refs, FIELD_SAME_DAY_DELIVERY);
-};

package/src/forms/shipmentOptions/fields/createSignatureField.ts

@@ -1,11 +0,0 @@
-import {type InteractiveElementConfiguration} from '@myparcel-dev/vue-form-builder';
-import {type ShipmentOptionsRefs} from '../types';
-import {FIELD_SIGNATURE} from '../field';
-import {hasPostNlAgeCheck} from '../../helpers';
-import {createShipmentOptionField} from './createShipmentOptionField';
-
-export const createSignatureField = (refs: ShipmentOptionsRefs): InteractiveElementConfiguration => {
-  return createShipmentOptionField(refs, FIELD_SIGNATURE, {
-    readOnlyWhen: ({form}) => hasPostNlAgeCheck(form),
-  });
-};