@myparcel-dev/pdk-admin 1.13.0

package/src/utils/openUrlInNewTab.spec.ts

@@ -0,0 +1,29 @@
+import {afterEach, describe, expect, it, vi} from 'vitest';
+import {mockLinkElement} from '../__tests__/utils/mockLinkElement';
+import {openUrlInNewTab} from './openUrlInNewTab';
+
+/**
+ * @vitest-environment happy-dom
+ */
+
+describe('openUrlInNewTab', () => {
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  it('creates a fake link, sets attributes, clicks it, and removes it', () => {
+    const {createElementSpy, appendChildSpy, mockElement} = mockLinkElement();
+
+    const url = 'https://example.com';
+
+    openUrlInNewTab(url);
+
+    expect(createElementSpy).toHaveBeenCalledWith('a');
+    expect(appendChildSpy).toHaveBeenCalledWith(mockElement);
+    expect(mockElement.setAttribute).toHaveBeenCalledWith('href', url);
+    expect(mockElement.setAttribute).toHaveBeenCalledWith('target', '_blank');
+    expect(mockElement.setAttribute).toHaveBeenCalledWith('rel', 'noopener noreferrer');
+    expect(mockElement.click).toHaveBeenCalledOnce();
+    expect(mockElement.remove).toHaveBeenCalledOnce();
+  });
+});

package/src/utils/openUrlInNewTab.ts

@@ -0,0 +1,5 @@
+import {fakeLinkClick} from './fakeLinkClick';
+
+export const openUrlInNewTab = (url: string, attributes: Record<string, string> = {}): void => {
+  fakeLinkClick(url, {target: '_blank', rel: 'noopener noreferrer', ...attributes});
+};

package/src/utils/prefixComponent.spec.ts

@@ -0,0 +1,15 @@
+import {describe, expect, it} from 'vitest';
+import {ADMIN_COMPONENT_PREFIX, AdminComponent} from '../data';
+import {prefixComponent} from './prefixComponent';
+
+describe('prefixComponent', () => {
+  it('should prefix the component name', () => {
+    expect(prefixComponent(AdminComponent.Box)).toBe(`${ADMIN_COMPONENT_PREFIX}${AdminComponent.Box}`);
+  });
+
+  it('should not prefix the component name if it is already prefixed', () => {
+    expect(prefixComponent(`${ADMIN_COMPONENT_PREFIX}${AdminComponent.Box}`)).toBe(
+      `${ADMIN_COMPONENT_PREFIX}${AdminComponent.Box}`,
+    );
+  });
+});

package/src/utils/prefixComponent.ts

@@ -0,0 +1,10 @@
+import {type PrefixedAdminComponent} from '../types';
+import {ADMIN_COMPONENT_PREFIX, type AdminComponent} from '../data';
+
+export const prefixComponent = (componentName: string | AdminComponent): PrefixedAdminComponent => {
+  if (componentName.startsWith(ADMIN_COMPONENT_PREFIX)) {
+    return componentName as PrefixedAdminComponent;
+  }
+
+  return `${ADMIN_COMPONENT_PREFIX}${componentName}` as PrefixedAdminComponent;
+};

package/src/utils/query/index.ts

@@ -0,0 +1,3 @@
+export * from './setQueryData';
+export * from './setQueryOrder';
+export * from './setQueryShipment';

package/src/utils/query/setQueryData.ts

@@ -0,0 +1,8 @@
+import {type QueryClient, type QueryKey} from '@tanstack/vue-query';
+import {globalLogger} from '../../services';
+
+export const setQueryData = (queryClient: QueryClient, queryKey: QueryKey, data: unknown): void => {
+  globalLogger.debug('QUERY UPDATE:', JSON.stringify(queryKey));
+
+  queryClient.setQueryData(queryKey, data);
+};

package/src/utils/query/setQueryOrder.ts

@@ -0,0 +1,26 @@
+import {type QueryClient} from '@tanstack/vue-query';
+import {type Plugin, type Shipment} from '@myparcel-dev/pdk-common';
+import {isOfType, type Replace} from '@myparcel-dev/ts-utils';
+import {QUERY_KEY_ORDER} from '../../actions';
+import {setQueryData} from './setQueryData';
+
+type FilteredShipment = {id: number; updated: unknown};
+
+type FilteredOrder = Replace<Plugin.ModelPdkOrder, 'shipments', FilteredShipment[]>;
+
+export const setQueryOrder = (queryClient: QueryClient, order: Plugin.ModelPdkOrder | FilteredOrder): void => {
+  let filteredOrder: FilteredOrder;
+
+  if (order.shipments?.length && isOfType<Shipment.ModelShipment>(order.shipments[0], 'orderId')) {
+    filteredOrder = {
+      ...order,
+      shipments: (order as Plugin.ModelPdkOrder).shipments
+        .filter((shipment) => !shipment.deleted)
+        .map(({id, updated}) => ({id, updated})),
+    };
+  } else {
+    filteredOrder = order;
+  }
+
+  setQueryData(queryClient, [QUERY_KEY_ORDER, {id: order.externalIdentifier}], filteredOrder);
+};

package/src/utils/query/setQueryShipment.ts

@@ -0,0 +1,8 @@
+import {type QueryClient} from '@tanstack/vue-query';
+import {type Shipment} from '@myparcel-dev/pdk-common';
+import {QUERY_KEY_SHIPMENT} from '../../actions';
+import {setQueryData} from './setQueryData';
+
+export const setQueryShipment = (queryClient: QueryClient, shipment: Shipment.ModelShipment): void => {
+  setQueryData(queryClient, [QUERY_KEY_SHIPMENT, {id: shipment.id}], shipment);
+};

package/src/utils/resolveCarrier.spec.ts

@@ -0,0 +1,11 @@
+import {describe, expect, it} from 'vitest';
+import {resolveCarrier} from './resolveCarrier';
+
+describe('resolveCarrier', () => {
+  it.each([
+    ['postnl:identifier', 'postnl'],
+    ['carrier', 'carrier'],
+  ])('resolves the carrier name', (input, expected) => {
+    expect(resolveCarrier(input)).toBe(expected);
+  });
+});

package/src/utils/resolveCarrier.ts

@@ -0,0 +1,3 @@
+export const resolveCarrier = (carrierNameOrIdentifier: string): string | undefined => {
+  return carrierNameOrIdentifier.split(':')[0];
+};

package/src/utils/translations/getDeliveryTypeTranslation.ts

@@ -0,0 +1,5 @@
+import {type DeliveryTypeName} from '@myparcel-dev/constants';
+import {getDynamicTranslation} from './getDynamicTranslation';
+
+export const getDeliveryTypeTranslation = (name?: DeliveryTypeName | string): string =>
+  getDynamicTranslation('delivery_type', name);

package/src/utils/translations/getDynamicTranslation.ts

@@ -0,0 +1,7 @@
+export const getDynamicTranslation = (prefix: string, input?: string): string => {
+  if (!input) {
+    return prefix;
+  }
+
+  return `${prefix}_${input}`;
+};

package/src/utils/translations/getPackageTypeTranslation.ts

@@ -0,0 +1,5 @@
+import {type PackageTypeName} from '@myparcel-dev/constants';
+import {getDynamicTranslation} from './getDynamicTranslation';
+
+export const getPackageTypeTranslation = (name?: PackageTypeName | string): string =>
+  getDynamicTranslation('package_type', name);

package/src/utils/translations/index.ts

@@ -0,0 +1,4 @@
+export * from './getDeliveryTypeTranslation';
+export * from './getDynamicTranslation';
+export * from './getPackageTypeTranslation';
+export * from './translateSelectOption';

package/src/utils/translations/translateSelectOption.ts

@@ -0,0 +1,15 @@
+import {isOfType} from '@myparcel-dev/ts-utils';
+import {type SelectOption, type SelectOptionValue, type SelectOptionWithLabel} from '../../types';
+import {type useLanguage} from '../../composables';
+
+export const translateSelectOption = <T extends SelectOptionValue = SelectOptionValue>(
+  option: SelectOption<T>,
+  translate: ReturnType<typeof useLanguage>['translate'],
+): SelectOptionWithLabel<T, string> => {
+  const hasLabel = isOfType<SelectOptionWithLabel>(option, 'label');
+  const translatedOption = {...option} as SelectOptionWithLabel<T>;
+
+  translatedOption.label = hasLabel ? translate(option.label) : option.plainLabel;
+
+  return Object.freeze(translatedOption) as SelectOptionWithLabel<T, string>;
+};

package/src/utils/triStateToBoolean.spec.ts

@@ -0,0 +1,13 @@
+import {describe, expect, it} from 'vitest';
+import {TriState} from '@myparcel-dev/pdk-common';
+import {triStateToBoolean} from './triStateToBoolean';
+
+describe('triStateToBoolean', () => {
+  it.each([
+    [TriState.Off, false],
+    [TriState.On, true],
+    [TriState.Inherit, false],
+  ])('should return %s for %s', (value, expected) => {
+    expect(triStateToBoolean(value)).toEqual(expected);
+  });
+});

package/src/utils/triStateToBoolean.ts

@@ -0,0 +1,5 @@
+import {TriState} from '@myparcel-dev/pdk-common';
+
+export const triStateToBoolean = (value: TriState): boolean => {
+  return TriState.Inherit === value ? false : Boolean(value);
+};

package/src/utils/unprefixComponent.spec.ts

@@ -0,0 +1,13 @@
+import {describe, expect, it} from 'vitest';
+import {AdminComponent} from '../data';
+import {unprefixComponent} from './unprefixComponent';
+
+describe('unprefixComponent', () => {
+  it('should unprefix a component name', () => {
+    expect(unprefixComponent('PdkTriStateInput')).toBe(AdminComponent.TriStateInput);
+  });
+
+  it('should do nothing if the component name is not prefixed', () => {
+    expect(unprefixComponent('TriStateInput')).toBe('TriStateInput');
+  });
+});

package/src/utils/unprefixComponent.ts

@@ -0,0 +1,6 @@
+import {type PrefixedAdminComponent} from '../types';
+import {ADMIN_COMPONENT_PREFIX, type AdminComponent} from '../data';
+
+export const unprefixComponent = (componentName: PrefixedAdminComponent | string): AdminComponent => {
+  return componentName.replace(ADMIN_COMPONENT_PREFIX, '') as AdminComponent;
+};

package/src/utils/validateId.spec.ts

@@ -0,0 +1,20 @@
+import {describe, expect, it} from 'vitest';
+import {validateId} from './validateId';
+
+describe('validateId', () => {
+  it('should throw an error when no id is provided', () => {
+    expect(() => validateId()).toThrowError('no id provided');
+  });
+
+  it('should throw an error when id is an array and canBeArray is not true', () => {
+    expect(() => validateId(['1', '2'])).toThrowError('id cannot be an array');
+  });
+
+  it('should return the id when it is a string', () => {
+    expect(validateId('1')).toBe('1');
+  });
+
+  it('should return the id when it is an array and canBeArray is true', () => {
+    expect(validateId(['1', '2'], true)).toEqual(['1', '2']);
+  });
+});

package/src/utils/validateId.ts

@@ -0,0 +1,16 @@
+import {type OneOrMore} from '@myparcel-dev/ts-utils';
+
+export const validateId = <O extends undefined | OneOrMore<string | number>, A extends boolean = false>(
+  id?: O,
+  canBeArray?: A,
+): A extends true ? NonNullable<O> : string => {
+  if (!id) {
+    throw new Error('no id provided');
+  }
+
+  if (Array.isArray(id) && canBeArray !== true) {
+    throw new Error('id cannot be an array');
+  }
+
+  return id as A extends true ? NonNullable<O> : string;
+};

package/src/views/ChildProductSettings.vue

@@ -0,0 +1,14 @@
+<template>
+  <ProductSettings
+    :form-key="FORM_KEY_CHILD_PRODUCT_SETTINGS"
+    :form-name="`${FORM_KEY_CHILD_PRODUCT_SETTINGS}--${productId}`" />
+</template>
+
+<script lang="ts" setup>
+import {FORM_KEY_CHILD_PRODUCT_SETTINGS} from '../forms';
+import {useInstanceContext} from '../composables';
+import ProductSettings from './ProductSettings.vue';
+import {AdminInstanceContextKey} from "../data";
+
+const productId = useInstanceContext(AdminInstanceContextKey.ProductIdentifier);
+</script>

package/src/views/Modals.vue

@@ -0,0 +1,22 @@
+<template>
+  <div v-test>
+    <KeepAlive>
+      <PrintOptionsModal v-if="pluginSettings.label.prompt" />
+    </KeepAlive>
+
+    <ShipmentOptionsModal />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import {useActionStore, useQueryStore} from '../stores';
+import {usePluginSettings} from '../composables';
+import ShipmentOptionsModal from '../components/modals/ShipmentOptionsModal.vue';
+import PrintOptionsModal from '../components/modals/PrintOptionsModal.vue';
+
+useQueryStore().registerContextQueries();
+
+useActionStore().registerModalActions();
+
+const pluginSettings = usePluginSettings();
+</script>

package/src/views/Notifications.vue

@@ -0,0 +1,9 @@
+<template>
+  <NotificationContainer :category="NotificationCategory.General" />
+</template>
+
+<!-- The notification container. Used to display notifications. -->
+<script lang="ts" setup>
+import {NotificationContainer} from '../components';
+import {NotificationCategory} from "../data";
+</script>

package/src/views/OrderBox.vue

@@ -0,0 +1,32 @@
+<template>
+  <ShipmentOptionsBox />
+
+  <ShipmentTableBox v-if="!orderMode && data?.shipments.some((item) => !item.deleted)" />
+</template>
+
+<script lang="ts" setup>
+import {computed, defineAsyncComponent, toValue} from 'vue';
+import {useActionStore, useQueryStore} from '../stores';
+import {useOrderData, usePluginSettings} from '../composables';
+import ShipmentOptionsBox from '../components/OrderBox/ShipmentOptionsBox.vue';
+
+// eslint-disable-next-line @typescript-eslint/naming-convention
+const ShipmentTableBox = defineAsyncComponent(() => import('../components/OrderBox/ShipmentTableBox.vue'));
+
+const queryStore = useQueryStore();
+
+queryStore.registerContextQueries();
+queryStore.registerOrderQueries();
+
+const actionStore = useActionStore();
+
+actionStore.registerOrderActions();
+
+const pluginSettings = usePluginSettings();
+
+const {query} = useOrderData();
+
+const data = computed(() => toValue(query.data));
+
+const {orderMode} = pluginSettings.order;
+</script>

package/src/views/OrderListItem.vue

@@ -0,0 +1,52 @@
+<template>
+  <div v-if="!query.isLoading">
+    <OrderModeOrderListItem v-if="orderMode" />
+
+    <ShipmentModeOrderListItem v-else />
+  </div>
+
+  <NotificationContainer
+    :category="NotificationCategory.Action"
+    :filter="notificationFilter" />
+</template>
+
+<script lang="ts" setup>
+/**
+ * This is the main entry point for the order list column.
+ */
+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 {NotificationContainer} from '../components';
+
+/* eslint-disable @typescript-eslint/naming-convention */
+const OrderModeOrderListItem = defineAsyncComponent(() => {
+  return import('../components/OrderListItem/OrderModeOrderListItem.vue');
+});
+
+const ShipmentModeOrderListItem = defineAsyncComponent(() => {
+  return import('../components/OrderListItem/ShipmentModeOrderListItem.vue');
+});
+/* eslint-enable @typescript-eslint/naming-convention */
+
+const queryStore = useQueryStore();
+
+queryStore.registerContextQueries();
+queryStore.registerOrderQueries();
+
+const actionStore = useActionStore();
+
+actionStore.registerOrderActions();
+
+const pluginSettings = usePluginSettings();
+
+const {orderMode} = pluginSettings.order;
+
+const {query} = useOrderData();
+
+const notificationFilter: NotificationFilter = (notification) => {
+  return notification.tags?.orderIds === toValue(query.data)?.externalIdentifier;
+};
+</script>

package/src/views/PluginSettings.vue

@@ -0,0 +1,43 @@
+<template>
+  <PdkPluginSettingsWrapper v-test>
+    <AccountSettings />
+
+    <PluginSettingsForms v-if="hasAccount" />
+  </PdkPluginSettingsWrapper>
+</template>
+
+<script lang="ts" setup>
+/**
+ * Plugin settings screen.
+ */
+import {computed, toValue} from 'vue';
+import {AdminContextKey, BackendEndpoint} from '@myparcel-dev/pdk-common';
+import {useActionStore, useQueryStore} from '../stores';
+import {useStoreContextQuery} from '../composables';
+import PluginSettingsForms from '../components/PluginSettings/PluginSettingsForms.vue';
+import AccountSettings from '../components/PluginSettings/AccountSettings.vue';
+import {
+  fetchDynamicContextAction,
+  fetchPluginSettingsViewContextAction,
+  pluginSettingsUpdateAction,
+  useDeleteAccountMutation,
+  useUpdateAccountMutation,
+  useUpdatePluginSettingsMutation,
+} from '../actions';
+
+const queryStore = useQueryStore();
+
+queryStore.registerContextQueries(AdminContextKey.PluginSettingsView);
+
+queryStore.register(BackendEndpoint.DeleteAccount, useDeleteAccountMutation());
+queryStore.register(BackendEndpoint.UpdateAccount, useUpdateAccountMutation());
+queryStore.register(BackendEndpoint.UpdatePluginSettings, useUpdatePluginSettingsMutation());
+
+const actionStore = useActionStore();
+
+actionStore.register([pluginSettingsUpdateAction, fetchPluginSettingsViewContextAction, fetchDynamicContextAction]);
+
+const dynamicContextQuery = useStoreContextQuery();
+
+const hasAccount = computed(() => Boolean(toValue(dynamicContextQuery.data)?.account));
+</script>

package/src/views/ProductSettings.vue

@@ -0,0 +1,76 @@
+<template>
+  <MagicForm :form="form" />
+</template>
+
+<script lang="ts" setup>
+/**
+ * Product settings.
+ */
+import {toRefs, toValue} from 'vue';
+import {AdminContextKey} from '@myparcel-dev/pdk-common';
+import MagicForm, {defineForm, type FormInstance} from '@myparcel-dev/vue-form-builder';
+import {useQueryStore} from '../stores';
+import {FORM_KEY_CHILD_PRODUCT_SETTINGS, FORM_KEY_PRODUCT_SETTINGS, generateFormFields} from '../forms';
+import {useAdminConfig, useContext, useProductData} from '../composables';
+import {useUpdateProductSettingsMutation} from '../actions';
+
+const props = withDefaults(
+  defineProps<{
+    formName?: string;
+    formKey?: typeof FORM_KEY_PRODUCT_SETTINGS | typeof FORM_KEY_CHILD_PRODUCT_SETTINGS;
+  }>(),
+  {
+    formName: FORM_KEY_PRODUCT_SETTINGS,
+    formKey: FORM_KEY_PRODUCT_SETTINGS,
+  },
+);
+
+const propRefs = toRefs(props);
+
+const queryStore = useQueryStore();
+queryStore.registerContextQueries(AdminContextKey.ProductSettingsView);
+queryStore.registerProductQueries();
+
+const viewContext = useContext(AdminContextKey.ProductSettingsView);
+
+const {product} = useProductData();
+
+const updateProductSettingsMutation = useUpdateProductSettingsMutation();
+const adminConfig = useAdminConfig();
+
+const createProductSettingsForm = (): FormInstance => {
+  const resolvedProduct = toValue(product);
+
+  if (!resolvedProduct || !viewContext.view) {
+    throw new Error('Product settings not loaded');
+  }
+
+  const overrides =
+    FORM_KEY_CHILD_PRODUCT_SETTINGS === toValue(propRefs.formKey)
+      ? {
+          ...adminConfig.formConfigOverrides?.[FORM_KEY_PRODUCT_SETTINGS],
+          ...adminConfig.formConfigOverrides?.[FORM_KEY_CHILD_PRODUCT_SETTINGS],
+        }
+      : adminConfig.formConfigOverrides?.[FORM_KEY_PRODUCT_SETTINGS];
+
+  return defineForm(toValue(propRefs.formName), {
+    ...overrides,
+    fields: [
+      ...generateFormFields({
+        // @ts-expect-error todo
+        fields: viewContext.view.elements,
+        values: resolvedProduct.settings ?? {},
+      }),
+    ],
+
+    afterSubmit: async (form: FormInstance) => {
+      await updateProductSettingsMutation.mutateAsync({
+        form,
+        productIds: [resolvedProduct.externalIdentifier],
+      });
+    },
+  });
+};
+
+const form = createProductSettingsForm();
+</script>

package/src/views/integrated/OrderBoxView.vue

@@ -0,0 +1,20 @@
+<template>
+  <OrderBox />
+</template>
+
+<script lang="ts" setup>
+import {toRefs} from 'vue';
+import OrderBox from '../OrderBox.vue';
+import {extendAdminInstance} from '../../utils';
+
+const props = defineProps({
+  orderIdentifier: {
+    type: String,
+    required: true,
+  },
+});
+
+const propRefs = toRefs(props);
+
+extendAdminInstance({context: {orderIdentifier: propRefs.orderIdentifier?.value}});
+</script>

package/src/views/integrated/OrderListItemView.vue

@@ -0,0 +1,20 @@
+<template>
+  <OrderListItem />
+</template>
+
+<script lang="ts" setup>
+import {toRefs} from 'vue';
+import OrderListItem from '../OrderListItem.vue';
+import {extendAdminInstance} from '../../utils';
+
+const props = defineProps({
+  orderIdentifier: {
+    type: String,
+    required: true,
+  },
+});
+
+const propRefs = toRefs(props);
+
+extendAdminInstance({context: {orderIdentifier: propRefs.orderIdentifier?.value}});
+</script>

package/src/views/integrated/index.ts

@@ -0,0 +1,13 @@
+export {default as ChildProductSettingsView} from '../ChildProductSettings.vue';
+
+export {default as ModalsView} from '../Modals.vue';
+
+export {default as NotificationsView} from '../Notifications.vue';
+
+export {default as OrderBoxView} from './OrderBoxView.vue';
+
+export {default as OrderListItemView} from './OrderListItemView.vue';
+
+export {default as PluginSettingsView} from '../PluginSettings.vue';
+
+export {default as ProductSettingsView} from '../ProductSettings.vue';

package/src/vue-form-builder.d.ts

@@ -0,0 +1,14 @@
+import '@myparcel-dev/vue-form-builder';
+
+declare module '@myparcel-dev/vue-form-builder' {
+  // Re-add fields to FormConfiguration (removed in beta.44+)
+  export interface FormConfiguration {
+    fields?: unknown[];
+  }
+
+  // Re-add lifecycle hooks to FieldConfiguration (removed from types but still work at runtime)
+  export interface FieldConfiguration {
+    onBeforeMount?(instance: FieldInstance): Promise<void> | void;
+    onMounted?(instance: FieldInstance): Promise<void> | void;
+  }
+}

package/src/vue.shims.d.ts

@@ -0,0 +1,11 @@
+/* eslint-disable */
+
+declare module '*.vue' {
+  import type {DefineComponent} from 'vue';
+  const component: DefineComponent<{}, {}, any>;
+  export default component;
+}
+
+declare const __VUE_HMR_RUNTIME__: Record<string, any>;
+declare const __VUE_OPTIONS_API__: boolean;
+declare const __VUE_PROD_DEVTOOLS__: boolean;