@myparcel-dev/pdk-admin 1.13.0

package/src/components/OrderListItem/ShipmentModeOrderListItem.vue

@@ -0,0 +1,67 @@
+<template>
+  <DeliveryOptionsExcerpt v-if="shipments.length === 0" />
+
+  <TransitionGroup
+    :name="config?.transitions?.shipmentBox"
+    appear>
+    <ShipmentLabel
+      v-for="shipment in data?.shipments ?? []"
+      :key="`${data?.externalIdentifier}_${shipment.id}`"
+      :shipment-id="shipment.id" />
+  </TransitionGroup>
+
+  <PdkDropdownButton
+    v-test="[$.type.__name, order?.externalIdentifier]"
+    :actions="actions"
+    :size="Size.Small" />
+</template>
+
+<script lang="ts" setup>
+import {computed, toValue} from 'vue';
+import {type Shipment, Size} from '@myparcel-dev/pdk-common';
+import {DeliveryOptionsExcerpt} from '../common';
+import {type ActionDefinition, type AnyActionDefinition} from '../../types';
+import {instantiateActions} from '../../services';
+import {useAdminConfig, useOrderData} from '../../composables';
+import {
+  orderExportAction,
+  ordersEditAction,
+  ordersExportPrintShipmentsAction,
+  ordersFetchAction,
+  ordersPrintAction,
+} from '../../actions';
+import ShipmentLabel from './ShipmentLabel.vue';
+
+const config = useAdminConfig();
+const {query, order} = useOrderData();
+
+const data = computed(() => toValue(query.data));
+
+const shipments = computed(() => toValue(data)?.shipments ?? []);
+
+const actions = computed<ActionDefinition[]>(() => {
+  const actions: AnyActionDefinition[] = [];
+
+  if (toValue(order)?.shipments?.some((item: Shipment.ModelShipment) => !item.deleted)) {
+    actions.push(orderExportAction);
+    actions.push({
+      ...ordersPrintAction,
+      standalone: true,
+    });
+    actions.push(ordersFetchAction);
+  } else {
+    actions.push({
+      ...orderExportAction,
+      standalone: true,
+    });
+    actions.push(ordersExportPrintShipmentsAction);
+  }
+
+  actions.push(ordersEditAction);
+
+  return instantiateActions(actions, {
+    orderIds: toValue(order)?.externalIdentifier,
+    form: false,
+  });
+});
+</script>

package/src/components/PluginSettings/AccountSettings.vue

@@ -0,0 +1,81 @@
+<template>
+  <PdkBox
+    v-test="$.type.__name"
+    :loading="loading">
+    <p v-if="hasAccount">
+      <StatusIndicator :status="Status.Success" />&nbsp;{{ translate('notification_account_connected') }}
+    </p>
+
+    <TabNavigation
+      :button="prefixComponent(AdminComponent.Button)"
+      :button-wrapper="prefixComponent(AdminComponent.ButtonGroup)"
+      :closeable="hasAccount"
+      :initial-tab="!hasAccount"
+      :tabs="tabs" />
+  </PdkBox>
+</template>
+
+<script lang="ts" setup>
+import {computed, toValue} from 'vue';
+import {Status} from '@myparcel-dev/pdk-common';
+import {StatusIndicator, TabNavigation} from '../common';
+import {prefixComponent} from '../../utils';
+import {type TabDefinition} from '../../types';
+import {useActionStore} from '../../stores';
+import {AdminComponent} from '../../data';
+import {useLanguage, useStoreContextQuery} from '../../composables';
+import {
+  deleteAccountAction,
+  updateAccountAction,
+  useDeleteAccountMutation,
+  useUpdateAccountMutation,
+} from '../../actions';
+import WebhooksStatus from './WebhooksStatus.vue';
+import EditApiKeyForm from './EditApiKeyForm.vue';
+import DebugOptions from './DebugOptions.vue';
+
+const actionStore = useActionStore();
+
+actionStore.register([updateAccountAction, deleteAccountAction]);
+
+const contextQuery = useStoreContextQuery();
+
+const updateAccount = useUpdateAccountMutation();
+const deleteAccount = useDeleteAccountMutation();
+
+const loading =
+  computed(() => toValue(contextQuery.isLoading) || toValue(updateAccount.isLoading)) ||
+  toValue(deleteAccount.isLoading);
+
+const hasApiKey = computed(() => Boolean(toValue(contextQuery.data)?.pluginSettings.account.apiKey));
+
+const hasAccount = computed(() => !toValue(loading) && hasApiKey.value && Boolean(toValue(contextQuery.data)?.account));
+
+const {translate} = useLanguage();
+
+const tabs = computed(() => {
+  const array: TabDefinition[] = [
+    {
+      name: 'apiKey',
+      component: EditApiKeyForm,
+      label: 'button_api_key_edit',
+    },
+  ];
+
+  if (toValue(hasAccount)) {
+    array.push({
+      name: 'webhooks',
+      component: WebhooksStatus,
+      label: 'button_webhooks_edit',
+    });
+  }
+
+  array.push({
+    name: 'debug',
+    component: DebugOptions,
+    label: 'button_debug',
+  });
+
+  return array;
+});
+</script>

package/src/components/PluginSettings/DebugOptions.vue

@@ -0,0 +1,89 @@
+<template>
+  <div>
+    <PdkHeading level="2">{{ translate('settings_debug_title') }}</PdkHeading>
+
+    <div>
+      <p v-text="translate('debug_refresh_description')" />
+
+      <ActionButton :action="refreshAccountInstance" />
+    </div>
+
+    <div>
+      <p v-text="translate('debug_download_logs_description')" />
+
+      <ActionButton :action="downloadLogsInstance" />
+    </div>
+
+    <div class="debug-hidden">
+      <p v-text="switchButtonDescription" />
+
+      <ActionButton
+        v-if="isConnectedToAcceptance"
+        :action="switchToProductionApiInstance" />
+      <ActionButton
+        v-else
+        :action="switchToAcceptanceApiInstance" />
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import {computed, toValue} from 'vue';
+import {BackendEndpoint} from '@myparcel-dev/pdk-common';
+import {ActionButton} from '../common';
+import {useActionStore, useQueryStore} from '../../stores';
+import {instantiateAction} from '../../services';
+import {useLanguage, useStoreContextQuery} from '../../composables';
+import {
+  downloadLogsAction,
+  refreshAccountAction,
+  switchToAcceptanceApiAction,
+  switchToProductionApiAction,
+  updateAccountAction,
+  useDownloadLogsMutation,
+  useSwitchToAcceptanceApiMutation,
+  useSwitchToProductionApiMutation,
+} from '../../actions';
+
+const {translate} = useLanguage();
+
+const queryStore = useQueryStore();
+const actionStore = useActionStore();
+const contextQuery = useStoreContextQuery();
+
+queryStore.register(BackendEndpoint.DownloadLogs, useDownloadLogsMutation());
+queryStore.register(BackendEndpoint.SwitchToAcceptanceApi, useSwitchToAcceptanceApiMutation());
+queryStore.register(BackendEndpoint.SwitchToProductionApi, useSwitchToProductionApiMutation());
+actionStore.register([
+  updateAccountAction,
+  downloadLogsAction,
+  switchToAcceptanceApiAction,
+  switchToProductionApiAction,
+  refreshAccountAction,
+]);
+
+const refreshAccountInstance = instantiateAction(refreshAccountAction);
+const downloadLogsInstance = instantiateAction(downloadLogsAction);
+const switchToAcceptanceApiInstance = instantiateAction(switchToAcceptanceApiAction);
+const switchToProductionApiInstance = instantiateAction(switchToProductionApiAction);
+
+// Determine if connected to acceptance API based on environment setting
+const isConnectedToAcceptance = computed(() => {
+  const context = toValue(contextQuery.data);
+  const environment = context?.pluginSettings?.account?.environment;
+  return environment === 'acceptance';
+});
+
+// Dynamic button description based on current environment
+const switchButtonDescription = computed(() => {
+  return isConnectedToAcceptance.value
+    ? translate('debug_switch_to_production_api_description')
+    : translate('debug_switch_to_acceptance_api_description');
+});
+</script>
+
+<style scoped>
+.debug-hidden {
+  display: none;
+}
+</style>

package/src/components/PluginSettings/EditApiKeyForm.vue

@@ -0,0 +1,89 @@
+<template>
+  <div v-test="$.type.__name">
+    <MagicForm
+      :form="form as FormInstance"
+      @afterSubmit="$emit('afterSubmit', $event)" />
+
+    <NotificationContainer :category="NotificationCategory.Api" />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import {type Component, computed, markRaw, ref, toValue, watch} from 'vue';
+import {Size, Variant} from '@myparcel-dev/pdk-common';
+import MagicForm, {defineField, defineForm, FormHook, type FormInstance} from '@myparcel-dev/vue-form-builder';
+import {NotificationContainer, ResetButton, SubmitButton} from '../common';
+import {useActionStore} from '../../stores';
+import {defineFormField, FORM_KEY_ACCOUNT_SETTINGS, resolveFormComponent} from '../../forms';
+import {AdminAction, AdminComponent, NotificationCategory} from '../../data';
+import {useAdminConfig, usePluginSettings, useStoreContextQuery} from '../../composables';
+
+defineEmits<(e: 'afterSubmit', form: FormInstance) => void>();
+
+const FIELD_API_KEY = 'apiKey';
+
+const API_KEY_LABEL = 'settings_account_api_key';
+
+const createForm = (): FormInstance => {
+  const actionStore = useActionStore();
+  const config = useAdminConfig();
+  const pluginSettings = usePluginSettings();
+
+  const apiKeyRef = ref(pluginSettings.account.apiKey);
+
+  return defineForm(FORM_KEY_ACCOUNT_SETTINGS, {
+    ...config.formConfigOverrides?.[FORM_KEY_ACCOUNT_SETTINGS],
+    fields: [
+      defineFormField({
+        component: resolveFormComponent(AdminComponent.TextInput),
+        label: API_KEY_LABEL,
+        name: FIELD_API_KEY,
+        optional: true,
+        ref: apiKeyRef,
+        readOnlyWhen: () => Boolean(hasAccount.value),
+      }),
+
+      defineField({
+        name: 'submitButton',
+        component: SubmitButton as Component,
+        visibleWhen: () => !hasAccount.value,
+        readOnlyWhen: () => !apiKeyRef.value,
+      }),
+
+      defineField({
+        name: 'resetButton',
+        component: ResetButton as Component,
+        attributes: {
+          label: 'action_delete',
+          variant: Variant.Error,
+          size: Size.Small,
+        },
+        visibleWhen: () => Boolean(hasAccount.value),
+        readOnlyWhen: () => !apiKeyRef.value,
+      }),
+    ],
+
+    [FormHook.AfterSubmit]: async (form: FormInstance): Promise<void> => {
+      await actionStore.dispatch(AdminAction.AccountUpdate, {form});
+    },
+
+    [FormHook.AfterReset]: async (): Promise<void> => {
+      await actionStore.dispatch(AdminAction.AccountDelete);
+    },
+  });
+};
+
+const contextQuery = useStoreContextQuery();
+
+const form = ref<FormInstance>();
+
+const hasAccount = computed(() => Boolean(toValue(contextQuery.data)?.account));
+
+watch(
+  contextQuery.data,
+  () => {
+    form.value = markRaw(createForm());
+  },
+  {immediate: true},
+);
+</script>

package/src/components/PluginSettings/PluginSettingsForms.vue

@@ -0,0 +1,56 @@
+<template>
+  <div v-test="$.type.__name">
+    <PdkLoader v-show="loading" />
+
+    <div v-show="!loading">
+      <TabNavigation :tabs="tabs" />
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import {computed, ref, toValue, watch} from 'vue';
+import {AdminContextKey} from '@myparcel-dev/pdk-common';
+import {TabNavigation} from '../common';
+import {type TabDefinition} from '../../types';
+import {createActionContext} from '../../services';
+import {createPluginSettingsTabs} from '../../forms';
+import {type AdminAction} from '../../data';
+import {useAdminConfig, useStoreContextQuery} from '../../composables';
+import {pluginSettingsUpdateAction} from '../../actions';
+
+const config = useAdminConfig();
+
+const dynamicContextQuery = useStoreContextQuery();
+const pluginSettingsContextQuery = useStoreContextQuery(AdminContextKey.PluginSettingsView);
+
+const tabs = ref<TabDefinition[]>([]);
+
+const actionContext = createActionContext<AdminAction.PluginSettingsUpdate>(pluginSettingsUpdateAction);
+
+const loading = computed(() => dynamicContextQuery.isLoading || pluginSettingsContextQuery.isLoading);
+
+watch(
+  () => pluginSettingsContextQuery.dataUpdatedAt,
+  () => {
+    if (toValue(loading)) {
+      return;
+    }
+
+    const pluginSettingsView = toValue(pluginSettingsContextQuery.data);
+    const dynamicContext = toValue(dynamicContextQuery.data);
+
+    if (!pluginSettingsView || !dynamicContext?.pluginSettings) {
+      tabs.value = [];
+      return;
+    }
+
+    tabs.value = createPluginSettingsTabs(pluginSettingsView, {
+      pluginSettings: dynamicContext.pluginSettings,
+      actionContext,
+      config,
+    });
+  },
+  {immediate: true},
+);
+</script>

package/src/components/PluginSettings/WebhooksStatus.vue

@@ -0,0 +1,73 @@
+<template>
+  <div v-test="$.type.__name">
+    <PdkHeading level="2">
+      {{ translate('settings_webhook_title') }}
+    </PdkHeading>
+
+    <PdkButtonGroup>
+      <ActionButton
+        v-for="action in webhookActions"
+        :key="action.id"
+        :action="action" />
+    </PdkButtonGroup>
+
+    <ul v-if="webhooks.length">
+      <li
+        v-for="webhook in webhooks"
+        :key="webhook.hook">
+        <StatusIndicator :status="webhook.status">
+          <code v-text="webhook.hook" />
+        </StatusIndicator>
+      </li>
+    </ul>
+
+    <PdkLoader v-else />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import {computed, toValue} from 'vue';
+import {Status} from '@myparcel-dev/pdk-common';
+import {partitionArray} from '@myparcel-dev/ts-utils';
+import {ActionButton, StatusIndicator} from '../common';
+import {type ActionDefinition, type WebhookDefinition} from '../../types';
+import {useActionStore, useQueryStore} from '../../stores';
+import {instantiateAction} from '../../services';
+import {useLanguage} from '../../composables';
+import {webhooksCreateAction, webhooksDeleteAction} from '../../actions';
+
+const {fetchWebhooks, createWebhooks, deleteWebhooks} = useQueryStore().registerWebhookQueries();
+
+useActionStore().registerWebhookActions();
+
+const data = computed(() => toValue(fetchWebhooks.data) ?? []);
+
+const webhooks = computed<(WebhookDefinition & {status: Status})[]>(() => {
+  return data.value.map((webhook) => {
+    let status = Status.Pending;
+
+    if (!toValue(fetchWebhooks.isLoading) && !toValue(createWebhooks.isLoading) && !toValue(deleteWebhooks.isLoading)) {
+      status = webhook.connected ? Status.Success : Status.Error;
+    }
+
+    return {...webhook, status};
+  });
+});
+
+const webhookActions = computed(() => {
+  const actions: ActionDefinition[] = [];
+  const [connected, disconnected] = partitionArray(data.value, (webhook) => webhook.connected);
+
+  if (disconnected.length) {
+    actions.push(instantiateAction(webhooksCreateAction, {hooks: disconnected.map(({hook}) => hook)}));
+  }
+
+  if (connected.length) {
+    actions.push(instantiateAction(webhooksDeleteAction, {hooks: connected.map(({hook}) => hook)}));
+  }
+
+  return actions;
+});
+
+const {translate} = useLanguage();
+</script>

package/src/components/PluginSettings/createUpdateAccountSettingsValidator.ts

@@ -0,0 +1,21 @@
+import {memoize} from 'lodash-unified';
+import {type FormInstance, type InteractiveElementInstance} from '@myparcel-dev/vue-form-builder';
+import {type AdminAction} from '../../data';
+import {type ActionContext, executeAction} from '../../actions';
+
+const memoizedActionValidator = memoize(
+  async (context: ActionContext<AdminAction>) => {
+    const response = await executeAction(context);
+
+    return Boolean(response);
+  },
+  (context) => JSON.stringify((context.parameters as {form?: FormInstance})?.form?.getValues()),
+);
+
+export const createUpdateAccountSettingsValidator =
+  (
+    actionContext: ActionContext<AdminAction.AccountUpdate>,
+  ): ((field: InteractiveElementInstance) => Promise<boolean>) =>
+  async (field: InteractiveElementInstance) => {
+    return memoizedActionValidator({...actionContext, parameters: {form: field.form}});
+  };

package/src/components/common/ActionButton.vue

@@ -0,0 +1,53 @@
+<template>
+  <Component
+    :is="component"
+    v-test="[$.type.__name, action?.id]"
+    :aria-label="hideText ? action?.label : null"
+    :disabled="disabled || action?.disabled"
+    :icon="action?.icon"
+    :label="!hideText ? action?.label : null"
+    :loading="loading"
+    :size="size"
+    :title="hideText ? action?.label : null"
+    :variant="variant"
+    @click="onClick" />
+</template>
+
+<script lang="ts" setup>
+import {type Component} from 'vue';
+import {Size, Variant} from '@myparcel-dev/pdk-common';
+import {prefixComponent} from '../../utils';
+import {type ActionDefinition} from '../../types';
+import {useActionStore} from '../../stores';
+import {AdminComponent} from '../../data';
+import {useLoading} from '../../composables';
+
+const props = withDefaults(
+  defineProps<{
+    component?: string | Component;
+    action: ActionDefinition;
+    disabled?: boolean;
+    hideText?: boolean;
+    size?: Size;
+    variant?: Variant;
+  }>(),
+  {
+    component: () => prefixComponent(AdminComponent.Button),
+    size: () => Size.Medium,
+    variant: () => Variant.Primary,
+  },
+);
+
+const emit = defineEmits(['click']);
+
+const {loading, setLoading} = useLoading();
+
+const actionStore = useActionStore();
+
+const onClick = async () => {
+  emit('click');
+  setLoading(true);
+  await actionStore.dispatch(props.action.id, props.action.parameters);
+  setLoading(false);
+};
+</script>

package/src/components/common/BulkSelectCheckbox.vue

@@ -0,0 +1,46 @@
+<template>
+  <PdkCheckboxInput
+    v-model="model"
+    v-test="$.type.__name"
+    :element="bulkCheckboxElement"
+    :title="translate('select_all')" />
+</template>
+
+<script lang="ts" setup>
+import {computed} from 'vue';
+import {type Keyable} from '@myparcel-dev/pdk-common';
+import {createFormElement} from '../../utils';
+import {useLanguage} from '../../composables';
+
+const NAME_BULK = 'bulk';
+
+const props = defineProps<{
+  options: Keyable[];
+  modelValue: Partial<Record<Keyable, boolean>>;
+}>();
+
+const emit = defineEmits<(e: 'update:modelValue', value: Record<Keyable, boolean>) => void>();
+
+const model = computed({
+  get(): boolean {
+    const values = Object.values(props.modelValue);
+
+    return values.length > 0 && values.every(Boolean);
+  },
+
+  set(checked: boolean): void {
+    emit('update:modelValue', Object.fromEntries(props.options.map((option) => [option, checked])));
+  },
+});
+
+const bulkCheckboxElement = createFormElement(
+  {
+    name: NAME_BULK,
+    ref: model,
+    disabledWhen: () => props.options.length === 0,
+  },
+  NAME_BULK,
+);
+
+const {translate} = useLanguage();
+</script>

package/src/components/common/CarrierLogo.vue

@@ -0,0 +1,14 @@
+<template>
+  <PdkImage
+    :alt="carrier.human"
+    :src="createAssetUrl(carrier.meta.logo_svg)"
+    :title="carrier.human"
+    width="20" />
+</template>
+
+<script lang="ts" setup>
+import {type Carrier} from '@myparcel-dev/sdk';
+import {createAssetUrl} from '../../utils';
+
+defineProps<{carrier: Carrier}>();
+</script>

package/src/components/common/DateRelative.vue

@@ -0,0 +1,20 @@
+<template>
+  <span
+    :title="longDate"
+    v-text="relativeDate" />
+</template>
+
+<script lang="ts" setup>
+import {computed} from 'vue';
+import {type DateTime} from '@myparcel-dev/pdk-common';
+import {Format, useLocalizedFormatter} from '../../composables';
+
+const props = defineProps<{
+  date: string | DateTime;
+}>();
+
+const formatter = useLocalizedFormatter();
+
+const longDate = computed(() => formatter.format(Format.DateLong, props.date));
+const relativeDate = computed(() => formatter.format(Format.DateRelative, props.date));
+</script>

package/src/components/common/DeliveryOptionsDeliveryType.vue

@@ -0,0 +1,23 @@
+<template>
+  <span
+    v-if="deliveryOptions.deliveryType"
+    v-test="[$.type.__name, deliveryOptions.deliveryType]">
+    <PdkIcon :icon="deliveryOptions.deliveryType" />
+
+    <span
+      :title="translate(getDeliveryTypeTranslation())"
+      v-text="translate(getDeliveryTypeTranslation(deliveryOptions.deliveryType))" />
+  </span>
+</template>
+
+<script lang="ts" setup>
+import {type Shipment} from '@myparcel-dev/pdk-common';
+import {getDeliveryTypeTranslation} from '../../utils';
+import {useLanguage} from '../../composables';
+
+defineProps<{
+  deliveryOptions: Shipment.ModelDeliveryOptions;
+}>();
+
+const {translate} = useLanguage();
+</script>

package/src/components/common/DeliveryOptionsExcerpt.vue

@@ -0,0 +1,39 @@
+<template>
+  <div v-if="data && deliveryOptions">
+    <span :class="config.cssUtilities?.displayFlex">
+      <DeliveryOptionsExcerptCarrierName
+        v-if="deliveryOptions?.carrier"
+        :carrier="deliveryOptions?.carrier" />
+
+      <ul :class="config.cssUtilities?.marginYAuto">
+        <li>
+          <DeliveryOptionsPackageType :shipment-or-order="data" />
+        </li>
+
+        <li>
+          <DeliveryOptionsDeliveryType :delivery-options="deliveryOptions" />
+        </li>
+
+        <li v-if="deliveryOptions.date">
+          <DateRelative :date="deliveryOptions.date" />
+        </li>
+      </ul>
+    </span>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import {computed, toValue} from 'vue';
+import {useAdminConfig, useOrderData} from '../../composables';
+import DeliveryOptionsPackageType from './DeliveryOptionsPackageType.vue';
+import DeliveryOptionsExcerptCarrierName from './DeliveryOptionsExcerptCarrierName.vue';
+import DeliveryOptionsDeliveryType from './DeliveryOptionsDeliveryType.vue';
+import DateRelative from './DateRelative.vue';
+
+const {query} = useOrderData();
+
+const data = computed(() => toValue(query.data));
+const deliveryOptions = computed(() => toValue(data)?.deliveryOptions);
+
+const config = useAdminConfig();
+</script>