@myparcel-dev/pdk-admin 1.13.0

package/src/composables/useLoading.spec.ts

@@ -0,0 +1,20 @@
+import {describe, expect, it} from 'vitest';
+import {useLoading} from './useLoading';
+
+describe('useLoading', () => {
+  it('can be toggled', () => {
+    const {loading, setLoading} = useLoading();
+
+    expect(loading.value).toBe(false);
+    setLoading(true);
+    expect(loading.value).toBe(true);
+  });
+
+  it('uses the initial value', () => {
+    const {loading, setLoading} = useLoading(true);
+
+    expect(loading.value).toBe(true);
+    setLoading(false);
+    expect(loading.value).toBe(false);
+  });
+});

package/src/composables/useLoading.ts

@@ -0,0 +1,18 @@
+import {type Ref, ref} from 'vue';
+
+type UseLoading = (initialValue?: boolean) => {
+  loading: Ref<boolean>;
+  setLoading: (state: boolean) => void;
+};
+
+/**
+ * Manages loading state.
+ */
+export const useLoading: UseLoading = (initialValue = false) => {
+  const loading = ref<boolean>(initialValue);
+  const setLoading = (state: boolean): void => {
+    loading.value = state;
+  };
+
+  return {loading, setLoading};
+};

package/src/composables/useLogger.ts

@@ -0,0 +1,8 @@
+import {type PdkLogger} from '../services';
+import {useAdminInstance} from './useAdminInstance';
+
+export const useLogger = (): PdkLogger => {
+  const instance = useAdminInstance();
+
+  return instance.logger;
+};

package/src/composables/useStoreContextQuery.ts

@@ -0,0 +1,9 @@
+import {AdminContextKey, BackendEndpoint} from '@myparcel-dev/pdk-common';
+import {type ContextQuery} from '../stores';
+import {useStoreQuery} from './useStoreQuery';
+
+export const useStoreContextQuery = <C extends AdminContextKey = AdminContextKey.Dynamic>(
+  contextKey?: C,
+): ContextQuery<C> => {
+  return useStoreQuery(BackendEndpoint.FetchContext, contextKey ?? AdminContextKey.Dynamic) as ContextQuery<C>;
+};

package/src/composables/useStoreQuery.ts

@@ -0,0 +1,9 @@
+import {type BackendEndpoint} from '@myparcel-dev/pdk-common';
+import {type ResolvedQuery, useQueryStore} from '../stores';
+import {type PlainModifier} from '../actions';
+
+export const useStoreQuery = <E extends BackendEndpoint>(endpoint: E, suffix?: PlainModifier): ResolvedQuery<E> => {
+  const queryStore = useQueryStore();
+
+  return queryStore.get(endpoint, suffix) as ResolvedQuery<E>;
+};

package/src/composables/useWeekdays.ts

@@ -0,0 +1,24 @@
+import {createObjectWithKeys} from '../utils';
+import {Format, useLocalizedFormatter} from './formatter';
+
+// eslint-disable-next-line no-magic-numbers,@typescript-eslint/no-magic-numbers
+const WEEKDAYS = [0, 1, 2, 3, 4, 5, 6] as const;
+
+export type Weekdays = typeof WEEKDAYS;
+
+export type Weekday = Weekdays[number];
+
+type UseWeekdays = {
+  weekdays: Weekdays;
+  weekdaysObject: Record<Weekday, string>;
+};
+
+export const useWeekdays = (): UseWeekdays => {
+  const formatter = useLocalizedFormatter();
+  const weekdaysObject = createObjectWithKeys(WEEKDAYS, (day) => formatter.format(Format.Weekday, day));
+
+  return {
+    weekdays: WEEKDAYS,
+    weekdaysObject,
+  };
+};

package/src/data/components.ts

@@ -0,0 +1,289 @@
+export enum AdminComponent {
+  /**
+   * @see BadgeProps
+   */
+  Badge = 'Badge',
+
+  /**
+   * Used to wrap content in a block.
+   *
+   * @see BoxProps
+   */
+  Box = 'Box',
+
+  /**
+   * This component is used to render a button. The button can be used to trigger an action. The button can have
+   * multiple icons, a label and various sizes. The button can be disabled.
+   *
+   * @see ButtonProps
+   */
+  Button = 'Button',
+
+  /**
+   * @see ButtonGroupProps
+   */
+  ButtonGroup = 'ButtonGroup',
+
+  /**
+   * @see CheckboxGroupProps
+   */
+  CheckboxGroup = 'CheckboxGroup',
+
+  /**
+   * @see CheckboxInputProps
+   */
+  CheckboxInput = 'CheckboxInput',
+
+  /**
+   * @see CodeEditorProps
+   */
+  CodeEditor = 'CodeEditor',
+
+  /**
+   * @see ColProps
+   */
+  Col = 'Col',
+
+  /**
+   * @see ConceptBoxWrapperProps
+   */
+  ConceptBoxWrapper = 'ConceptBoxWrapper',
+
+  /**
+   * @see CurrencyInputProps
+   */
+  CurrencyInput = 'CurrencyInput',
+
+  /**
+   * @see DropOffInputProps
+   */
+  DropOffInput = 'DropOffInput',
+
+  /**
+   * The dropdown button is a button that can be clicked to open a dropdown menu. The dropdown menu can contain multiple
+   * items.
+   *
+   * @see DropdownButtonProps
+   */
+  DropdownButton = 'DropdownButton',
+
+  /**
+   * The form group is used to render a label and a form element.
+   *
+   * @see FormGroupProps
+   */
+  FormGroup = 'FormGroup',
+
+  /**
+   * @see HeadingProps
+   */
+  Heading = 'Heading',
+
+  /**
+   * @see IconProps
+   */
+  Icon = 'Icon',
+
+  /**
+   * @see ImageProps
+   */
+  Image = 'Image',
+
+  /**
+   * This component is used to render a link. The link can be used to trigger an action.
+   *
+   * @see LinkProps
+   */
+  Link = 'Link',
+
+  /**
+   * @see LoaderProps
+   */
+  Loader = 'Loader',
+
+  /**
+   * @see ModalProps
+   */
+  Modal = 'Modal',
+
+  /**
+   * A multi-select box. Renders a list of options which each have their own value. Allows multiple options to be selected.
+   *
+   * @see MultiSelectInputProps
+   */
+  MultiSelectInput = 'MultiSelectInput',
+
+  /**
+   * @see NotificationProps
+   */
+  Notification = 'Notification',
+
+  /**
+   * @see NumberInputProps
+   */
+  NumberInput = 'NumberInput',
+
+  /**
+   * @see PluginSettingsWrapperProps
+   */
+  PluginSettingsWrapper = 'PluginSettingsWrapper',
+  /**
+   * @see RadioGroupProps
+   */
+  RadioGroup = 'RadioGroup',
+
+  /**
+   * @see RadioInputProps
+   */
+  RadioInput = 'RadioInput',
+
+  /**
+   * Table row.
+   *
+   * @see RowProps
+   */
+  Row = 'Row',
+
+  /**
+   * A select element. Renders a list of options which each have their own value.
+   *
+   * @see SelectInputProps
+   */
+  SelectInput = 'SelectInput',
+
+  /**
+   * @see SettingsDividerProps
+   */
+  SettingsDivider = 'SettingsDivider',
+
+  /**
+   * @see ShipmentLabelWrapperProps
+   */
+  ShipmentLabelWrapper = 'ShipmentLabelWrapper',
+
+  /**
+   * @see ShippingMethodsInputProps
+   */
+  ShippingMethodsInput = 'ShippingMethodsInput',
+
+  /**
+   * @see TabNavButtonProps
+   */
+  TabNavButton = 'TabNavButton',
+
+  /**
+   * @see TabNavButtonWrapperProps
+   */
+  TabNavButtonWrapper = 'TabNavButtonWrapper',
+
+  /**
+   * @see TabNavContentWrapperProps
+   */
+  TabNavContentWrapper = 'TabNavContentWrapper',
+
+  /**
+   * A table component that can be used to render data via slots.
+   *
+   * @see TableProps
+   */
+  Table = 'Table',
+
+  /**
+   * @see TableColProps
+   */
+  TableCol = 'TableCol',
+
+  /**
+   * @see TableRowProps
+   */
+  TableRow = 'TableRow',
+
+  /**
+   * @see TextAreaProps
+   */
+  TextArea = 'TextArea',
+
+  /**
+   * @see TextInputProps
+   */
+  TextInput = 'TextInput',
+
+  /**
+   * @see TimeInputProps
+   */
+  TimeInput = 'TimeInput',
+
+  /**
+   * @see ToggleInputProps
+   */
+  ToggleInput = 'ToggleInput',
+
+  /**
+   * @see TriStateInputProps
+   */
+  TriStateInput = 'TriStateInput',
+
+  /**
+   * @see MultiDateInputProps
+   */
+  MultiDateInput = 'MultiDateInput',
+}
+
+export const requiredAdminComponentNames = [
+  AdminComponent.Box,
+  AdminComponent.Button,
+  AdminComponent.CheckboxGroup,
+  AdminComponent.CheckboxInput,
+  AdminComponent.CodeEditor,
+  AdminComponent.Col,
+  AdminComponent.CurrencyInput,
+  AdminComponent.DropOffInput,
+  AdminComponent.DropdownButton,
+  AdminComponent.FormGroup,
+  AdminComponent.Heading,
+  AdminComponent.Icon,
+  AdminComponent.Image,
+  AdminComponent.Link,
+  AdminComponent.Loader,
+  AdminComponent.Modal,
+  AdminComponent.MultiSelectInput,
+  AdminComponent.Notification,
+  AdminComponent.NumberInput,
+  AdminComponent.RadioGroup,
+  AdminComponent.RadioInput,
+  AdminComponent.Row,
+  AdminComponent.SelectInput,
+  AdminComponent.TabNavButton,
+  AdminComponent.Table,
+  AdminComponent.TextArea,
+  AdminComponent.TextInput,
+  AdminComponent.TimeInput,
+  AdminComponent.ToggleInput,
+  AdminComponent.TriStateInput,
+  AdminComponent.MultiDateInput,
+] as const;
+
+export const optionalAdminComponentNames = [AdminComponent.ShippingMethodsInput] as const;
+
+export const optionalAdminPlainWrapperComponentNames = [
+  AdminComponent.Badge,
+  AdminComponent.ButtonGroup,
+  AdminComponent.PluginSettingsWrapper,
+  AdminComponent.SettingsDivider,
+  AdminComponent.TabNavButtonWrapper,
+  AdminComponent.TabNavContentWrapper,
+  AdminComponent.TableCol,
+  AdminComponent.TableRow,
+] as const;
+
+export const optionalAdminActionContainerComponentNames = [
+  AdminComponent.ConceptBoxWrapper,
+  AdminComponent.ShipmentLabelWrapper,
+] as const;
+
+export const allAdminComponentNames = [
+  ...requiredAdminComponentNames,
+  ...optionalAdminComponentNames,
+  ...optionalAdminPlainWrapperComponentNames,
+  ...optionalAdminActionContainerComponentNames,
+] as const;

package/src/data/constants.ts

@@ -0,0 +1,76 @@
+export const HASH_SEPARATOR = '--';
+
+export const ADMIN_COMPONENT_PREFIX = 'Pdk';
+
+export enum AdminInstanceContextKey {
+  OrderIdentifier = 'orderIdentifier',
+  ProductIdentifier = 'productIdentifier',
+}
+
+export enum AdminModalKey {
+  PrintOptions = 'printOptions',
+  ReturnOptions = 'returnOptions',
+  ShipmentOptions = 'shipmentOptions',
+}
+
+export enum NotificationCategory {
+  Action = 'action',
+  Api = 'api',
+  General = 'general',
+  Modal = 'modal',
+}
+
+export enum NotificationSource {
+  Api = 'api',
+}
+
+export enum AdminIcon {
+  Add = 'add',
+  ArrowDown = 'arrow_down',
+  ArrowUp = 'arrow_up',
+  Close = 'close',
+  Delete = 'delete',
+  Download = 'download',
+  Edit = 'edit',
+  Export = 'export',
+  External = 'external',
+  No = 'no',
+  Print = 'print',
+  Refresh = 'refresh',
+  Return = 'return',
+  Save = 'save',
+  Shipment = 'shipment',
+  Spinner = 'spinner',
+  Yes = 'yes',
+}
+
+export enum AdminAction {
+  ContextFetch = 'contextFetch',
+
+  AccountDelete = 'accountDelete',
+  AccountUpdate = 'accountUpdate',
+
+  OrdersExport = 'ordersExport',
+  OrdersExportPrint = 'ordersExportPrint',
+  OrdersPrint = 'ordersPrint',
+  OrdersFetch = 'ordersFetch',
+  OrdersUpdate = 'ordersUpdate',
+  OrdersEdit = 'ordersEdit',
+
+  ShipmentsDelete = 'shipmentsDelete',
+  ShipmentsPrint = 'shipmentsPrint',
+  ShipmentsUpdate = 'shipmentsUpdate',
+  ShipmentsFetch = 'shipmentsFetch',
+  ShipmentsExportReturn = 'shipmentsExportReturn',
+
+  PluginSettingsUpdate = 'pluginSettingsUpdate',
+  ProductSettingsUpdate = 'productSettingsUpdate',
+
+  WebhooksCreate = 'webhooksCreate',
+  WebhooksDelete = 'webhooksDelete',
+  WebhooksFetch = 'webhooksFetch',
+
+  DownloadLogs = 'downloadLogs',
+  SwitchToAcceptanceApi = 'switchToAcceptanceApi',
+  SwitchToProductionApi = 'switchToProductionApi',
+}

package/src/data/endpoints.ts

@@ -0,0 +1,28 @@
+import {BackendEndpoint} from '@myparcel-dev/pdk-common';
+
+export const BACKEND_ENDPOINTS_ORDERS = [
+  BackendEndpoint.ExportOrders,
+  BackendEndpoint.FetchOrders,
+  BackendEndpoint.PrintOrders,
+  BackendEndpoint.UpdateOrders,
+] as const;
+
+export const BACKEND_ENDPOINTS_SHIPMENTS = [
+  BackendEndpoint.DeleteShipments,
+  BackendEndpoint.ExportReturn,
+  BackendEndpoint.FetchShipments,
+  BackendEndpoint.PrintShipments,
+  BackendEndpoint.UpdateShipments,
+] as const;
+
+export const BACKEND_ENDPOINTS_WEBHOOKS = [
+  BackendEndpoint.CreateWebhooks,
+  BackendEndpoint.DeleteWebhooks,
+  BackendEndpoint.FetchWebhooks,
+] as const;
+
+export const BACKEND_ENDPOINTS_DEBUG = [
+  BackendEndpoint.DownloadLogs,
+  BackendEndpoint.SwitchToAcceptanceApi,
+  BackendEndpoint.SwitchToProductionApi,
+] as const;

package/src/data/index.ts

@@ -0,0 +1,4 @@
+export * from './components';
+export * from './constants';
+export * from './endpoints';
+export * from './view';

package/src/data/view.ts

@@ -0,0 +1,9 @@
+export enum AdminView {
+  ChildProductSettings = 'ChildProductSettings',
+  Modals = 'Modals',
+  Notifications = 'Notifications',
+  OrderBox = 'OrderBox',
+  OrderListItem = 'OrderListItem',
+  PluginSettings = 'PluginSettings',
+  ProductSettings = 'ProductSettings',
+}

package/src/deprecated.ts

@@ -0,0 +1,9 @@
+export type {
+  /** @deprecated use PdkNotification */
+  PdkNotification as Notification,
+} from './types';
+
+export {
+  /** @deprecated use useDropdownButtonContext */
+  useDropdownButtonContext as useDropdownData,
+} from './composables';

package/src/forms/createReturnsForm.ts

@@ -0,0 +1,8 @@
+import {defineForm} from '@myparcel-dev/vue-form-builder';
+
+// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
+export const createReturnsForm = (id: string) => {
+  return defineForm(`returns${id}`, {
+    fields: [],
+  });
+};

package/src/forms/form-builder/builders/buildAfterUpdate.spec.ts

@@ -0,0 +1,48 @@
+import {ref} from 'vue';
+import {afterEach, describe, expect, it, vi} from 'vitest';
+import {mount} from '@vue/test-utils';
+import MagicForm, {defineForm, useFormBuilder} from '@myparcel-dev/vue-form-builder';
+import {buildAfterUpdate} from './buildAfterUpdate';
+
+describe('buildAfterUpdate', () => {
+  afterEach(() => {
+    useFormBuilder().forms.value = {};
+  });
+
+  it('builds', () => {
+    const result = buildAfterUpdate([{$setValue: {$value: 'hello'}}], '');
+
+    expect(result).toBeDefined();
+  });
+
+  it('should execute afterUpdate hook', async () => {
+    expect.assertions(3);
+
+    const afterUpdate = vi.fn(buildAfterUpdate([{$setValue: {$value: 'hello'}}], ''));
+
+    const form = defineForm('test', {});
+
+    await form.addElement({
+      name: 'test',
+      component: 'input',
+      ref: ref(''),
+      afterUpdate,
+    });
+
+    const wrapper = mount(MagicForm, {props: {form}});
+
+    expect(afterUpdate).not.toHaveBeenCalled();
+
+    form.setValue('test', 'test');
+
+    const testField = form.getField('test');
+    // afterUpdate must be triggered manually via hooks.execute in new vue-form-builder API
+    await testField?.hooks.execute('afterUpdate', testField, 'test', '');
+
+    await wrapper.vm.$nextTick();
+
+    // The spy is called once when we execute the hook
+    expect(afterUpdate).toHaveBeenCalled();
+    expect(form.getValue('test')).toBe('hello');
+  });
+});

package/src/forms/form-builder/builders/buildAfterUpdate.ts

@@ -0,0 +1,26 @@
+import {type InteractiveElementInstance} from '@myparcel-dev/vue-form-builder';
+import {createPropSetter, createValueGetter, createValueSetter} from '../utils';
+import {type FormOperation, type HandlerDefinition} from '../types';
+import {executeOperations} from '../operations';
+
+export const buildAfterUpdate = (
+  operations: FormOperation[],
+  prefix: string,
+  customHandlers: HandlerDefinition[] = [],
+): ((instance: InteractiveElementInstance) => void) => {
+  return (instance: InteractiveElementInstance): void => {
+    const getValue = createValueGetter(instance, prefix);
+    const setValue = createValueSetter(instance, prefix);
+    const setProp = createPropSetter(instance, prefix);
+
+    executeOperations(
+      operations,
+      {
+        getValue,
+        setValue,
+        setProp,
+      },
+      customHandlers,
+    );
+  };
+};