@myparcel-dev/pdk-admin 1.13.0

package/src/components/common/DeliveryOptionsExcerptCarrierName.vue

@@ -0,0 +1,21 @@
+<template>
+  <CarrierLogo
+    v-if="carrierData"
+    :carrier="carrierData" />
+
+  <template v-if="carrierData">&nbsp;&nbsp;</template>
+</template>
+
+<script lang="ts" setup>
+import {computed, toRefs, toValue} from 'vue';
+import {type Carrier} from '@myparcel-dev/pdk-common';
+import {useFetchCarrier} from '../../sdk';
+import CarrierLogo from './CarrierLogo.vue';
+
+const props = defineProps<{carrier: Carrier.ModelCarrier}>();
+const propRefs = toRefs(props);
+
+const carriersQuery = useFetchCarrier(propRefs.carrier.value.name);
+
+const carrierData = computed(() => toValue(carriersQuery.data));
+</script>

package/src/components/common/DeliveryOptionsPackageType.vue

@@ -0,0 +1,30 @@
+<template>
+  <span
+    v-if="shipmentOrOrder.deliveryOptions?.packageType"
+    v-test="[$.type.__name, shipmentOrOrder.deliveryOptions.packageType]">
+    <PackageType :package-type="shipmentOrOrder.deliveryOptions.packageType" />
+
+    <DigitalStampWeightRange
+      v-if="weight && shipmentOrOrder.deliveryOptions.packageType === PackageTypeName.DigitalStamp"
+      :weight="weight" />
+  </span>
+</template>
+
+<script lang="ts" setup>
+import {computed} from 'vue';
+import {type Plugin, type Shipment} from '@myparcel-dev/pdk-common';
+import {isOfType} from '@myparcel-dev/ts-utils';
+import {PackageTypeName} from '@myparcel-dev/constants';
+import PackageType from './PackageType.vue';
+import DigitalStampWeightRange from './DigitalStampWeightRange.vue';
+
+const props = defineProps<{shipmentOrOrder: Shipment.ModelShipment | Plugin.ModelPdkOrder}>();
+
+const weight = computed(() => {
+  const {physicalProperties} = props.shipmentOrOrder;
+
+  return isOfType<Shipment.ModelPhysicalProperties>(physicalProperties, 'weight')
+    ? physicalProperties.weight
+    : physicalProperties?.totalWeight;
+});
+</script>

package/src/components/common/DigitalStampWeightRange.vue

@@ -0,0 +1,14 @@
+<template>
+  <span v-text="` ${currentRange.plainLabel}`" />
+</template>
+
+<script lang="ts" setup>
+import {toRefs} from 'vue';
+import {useDigitalStampRanges} from '../../composables';
+
+const props = defineProps<{weight: number}>();
+
+const propRefs = toRefs(props);
+
+const {currentRange} = useDigitalStampRanges(propRefs.weight);
+</script>

package/src/components/common/NotificationContainer.vue

@@ -0,0 +1,35 @@
+<template>
+  <div v-test="[$.type.__name, category]">
+    <TransitionGroup
+      :name="config?.transitions?.notification"
+      appear>
+      <PdkNotification
+        v-for="(notification, index) in notifications"
+        :key="`alert_${index}_${notification.content}`"
+        :notification="notification" />
+    </TransitionGroup>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import {computed} from 'vue';
+import {type NotificationFilter} from '../../types';
+import {useNotificationStore} from '../../stores';
+import {useAdminConfig} from '../../composables';
+import {NotificationCategory} from "../../data";
+
+const props = defineProps<{
+  category?: NotificationCategory;
+  filter?: NotificationFilter;
+}>();
+
+const config = useAdminConfig();
+
+const notifications = computed(() => {
+  const {notifications} = useNotificationStore();
+
+  return notifications.filter((notification) => {
+    return props.category === notification.category && (props.filter ? props.filter?.(notification) : true);
+  });
+});
+</script>

package/src/components/common/PackageType.vue

@@ -0,0 +1,16 @@
+<template>
+  <PdkIcon :icon="packageType" />
+  <span
+    :title="translate(getPackageTypeTranslation())"
+    v-text="translate(getPackageTypeTranslation(packageType))" />
+</template>
+
+<script lang="ts" setup>
+import {type PackageTypeName} from '@myparcel-dev/constants';
+import {getPackageTypeTranslation} from '../../utils';
+import {useLanguage} from '../../composables';
+
+const props = defineProps<{packageType: PackageTypeName | string}>();
+
+const {translate} = useLanguage();
+</script>

package/src/components/common/PlainElement.ts

@@ -0,0 +1,8 @@
+import {defineComponent, h} from 'vue';
+
+export default defineComponent({
+  name: 'PlainElement',
+  render() {
+    return h('div', this.$attrs, this.$slots);
+  },
+});

package/src/components/common/ResetButton.vue

@@ -0,0 +1,26 @@
+<template>
+  <PdkButton
+    v-test="$.type.__name"
+    :disabled="disabled"
+    :icon="AdminIcon.Refresh"
+    label="action_reset"
+    :variant="Variant.Secondary"
+    @click="reset" />
+</template>
+
+<script lang="ts" setup>
+import {Variant} from '@myparcel-dev/pdk-common';
+import {useForm} from '@myparcel-dev/vue-form-builder';
+
+import {AdminIcon} from "../../data";
+
+defineProps<{
+  disabled?: boolean;
+}>();
+
+const form = useForm();
+
+const reset = () => {
+  void form.reset();
+};
+</script>

package/src/components/common/ReturnsForm.vue

@@ -0,0 +1,31 @@
+<template>
+  <MagicForm
+    v-test="$.type.__name"
+    :form="returnsForm" />
+</template>
+
+<script lang="ts">
+import {defineComponent} from 'vue';
+import MagicForm from '@myparcel-dev/vue-form-builder';
+import {createReturnsForm} from '../../forms';
+
+export default defineComponent({
+  name: 'ReturnsForm',
+  components: {
+    MagicForm,
+  },
+
+  props: {
+    orderId: {
+      type: String,
+      required: true,
+    },
+  },
+
+  setup(props) {
+    return {
+      returnsForm: createReturnsForm(props.orderId),
+    };
+  },
+});
+</script>

package/src/components/common/ShipmentBarcode.vue

@@ -0,0 +1,41 @@
+<template>
+  <span
+    v-test="[$.type.__name, shipment.id]"
+    :class="[config?.cssUtilities?.whitespaceNoWrap, config?.cssUtilities?.displayFlex]">
+    <CarrierLogo
+      v-if="carrier"
+      :carrier="carrier" />
+
+    <template v-if="carrier">&nbsp;</template>
+
+    <PdkLink
+      v-if="shipment.barcode && shipment.linkConsumerPortal"
+      :alt="translate('shipment_barcode')"
+      :href="shipment.linkConsumerPortal">
+      {{ shipment.barcode }}
+    </PdkLink>
+
+    <span
+      v-else
+      :title="translate('shipment_barcode')"
+      v-text="shipment.barcode || translate('shipment_no_barcode')"></span>
+  </span>
+</template>
+
+<script lang="ts" setup>
+import {toRefs} from 'vue';
+import {useQueryStore} from '../../stores';
+import {useAdminConfig, useLanguage, useShipmentData} from '../../composables';
+import CarrierLogo from './CarrierLogo.vue';
+
+const props = defineProps<{shipmentId: number}>();
+
+const {shipmentId} = toRefs(props);
+
+useQueryStore().registerShipmentQueries(shipmentId);
+
+const {translate} = useLanguage();
+
+const {carrier, shipment} = useShipmentData(shipmentId);
+const config = useAdminConfig();
+</script>

package/src/components/common/ShipmentOptionsForm.vue

@@ -0,0 +1,22 @@
+<template>
+  <MagicForm
+    v-test="$.type.__name"
+    :form="shipmentOptionsForm" />
+</template>
+
+<script lang="ts" setup>
+import {toRefs, toValue} from 'vue';
+import {isDef} from '@vueuse/core';
+import MagicForm from '@myparcel-dev/vue-form-builder';
+import {type OneOrMore} from '@myparcel-dev/ts-utils';
+import {createShipmentOptionsForm} from '../../forms';
+import {useOrdersData} from '../../composables';
+
+const props = defineProps<{order: OneOrMore<string>}>();
+
+const propRefs = toRefs(props);
+
+const queries = useOrdersData(propRefs.order.value);
+
+const shipmentOptionsForm = createShipmentOptionsForm(queries.map((data) => toValue(data.order)).filter(isDef));
+</script>

package/src/components/common/ShipmentStatus.vue

@@ -0,0 +1,23 @@
+<template>
+  <span
+    v-if="data?.status"
+    v-test="[$.type.__name, shipmentId]"
+    :title="translate('shipment_status')"
+    v-text="translate(`shipment_status_${data.status}`)" />
+</template>
+
+<script lang="ts" setup>
+import {toRefs} from 'vue';
+import {useQueryStore} from '../../stores';
+import {useLanguage, useShipmentData} from '../../composables';
+
+const props = defineProps<{shipmentId: number}>();
+
+const {shipmentId} = toRefs(props);
+
+useQueryStore().registerShipmentQueries(shipmentId);
+
+const {shipment: data} = useShipmentData(shipmentId);
+
+const {translate} = useLanguage();
+</script>

package/src/components/common/StatusIndicator.vue

@@ -0,0 +1,46 @@
+<template>
+  <span
+    v-test="[$.type.__name, status]"
+    :class="config?.cssUtilities?.whitespaceNoWrap">
+    <PdkIcon
+      :class="cssClasses"
+      :icon="icon" />
+    <slot />
+  </span>
+</template>
+
+
+<script lang="ts" setup>
+import {computed, type PropType} from 'vue';
+import {Status} from '@myparcel-dev/pdk-common';
+import {AdminIcon} from '../../data';
+import {useAdminConfig} from '../../composables';
+
+const props = defineProps({
+  status: {
+    type: String as PropType<Status>,
+    default: Status.Pending,
+  },
+});
+
+const config = useAdminConfig();
+
+const icon = computed(() => {
+  switch (props.status) {
+    case Status.Success:
+      return AdminIcon.Yes;
+
+    case Status.Error:
+      return AdminIcon.No;
+
+    default:
+      return AdminIcon.Spinner;
+  }
+});
+
+const cssClasses = computed(() => ({
+  [config?.cssUtilities?.textColorSuccess ?? '']: props.status === Status.Success,
+  [config?.cssUtilities?.textColorError ?? '']: props.status === Status.Error,
+  [config?.cssUtilities?.animationSpin ?? '']: props.status === Status.Pending,
+}));
+</script>

package/src/components/common/SubmitButton.vue

@@ -0,0 +1,30 @@
+<template>
+  <PdkButton
+    v-test="$.type.__name"
+    :disabled="disabled"
+    :icon="icon"
+    :loading="loading"
+    label="action_save"
+    @click="submit" />
+</template>
+
+<script lang="ts" setup>
+import {useForm} from '@myparcel-dev/vue-form-builder';
+import {useLoading} from '../../composables';
+import {AdminIcon} from "../../data";
+
+defineProps<{
+  disabled?: boolean;
+}>();
+
+const form = useForm();
+const {loading, setLoading} = useLoading();
+
+async function submit() {
+  setLoading(true);
+  await form.submit();
+  setLoading(false);
+}
+
+const icon = AdminIcon.Save;
+</script>

package/src/components/common/TabNavigation.vue

@@ -0,0 +1,134 @@
+<template>
+  <component
+    :is="buttonWrapper"
+    v-if="tabs.length > 1"
+    v-test="$.type.__name"
+    role="tablist">
+    <component
+      :is="button"
+      v-for="tab in tabs"
+      :key="`tab_button_${tab.name}`"
+      :active="tab.name === activeTab"
+      role="tab"
+      @click="() => handleClick(tab)">
+      <PdkIcon
+        v-if="tab.icon"
+        :icon="tab.icon" />
+      {{ translate(tab.label) }}
+      <span
+        v-if="tab.labelSuffix"
+        v-text="` ${translate(tab.labelSuffix)}`"></span>
+    </component>
+    <slot name="button-wrapper" />
+  </component>
+
+  <PdkTabNavContentWrapper
+    v-if="activeTabContents"
+    role="tabpanel">
+    <Transition
+      :name="config.transitions?.tabNavigation"
+      mode="out-in">
+      <KeepAlive>
+        <component
+          :is="activeTabContents.component"
+          :key="activeTabContents.name"
+          v-test="`TabNavContent-${activeTabContents.name}`" />
+      </KeepAlive>
+    </Transition>
+  </PdkTabNavContentWrapper>
+</template>
+
+<script lang="ts" setup>
+import {computed, type PropType, ref, watch} from 'vue';
+import {type ComponentOrHtmlElement} from '@myparcel-dev/vue-form-builder';
+import {prefixComponent} from '../../utils';
+import {type PrefixedAdminComponent, type TabDefinition} from '../../types';
+import {AdminComponent, HASH_SEPARATOR} from '../../data';
+import {useAdminConfig, useLanguage} from '../../composables';
+
+const props = defineProps({
+  button: {
+    type: [String, Object] as PropType<ComponentOrHtmlElement | PrefixedAdminComponent>,
+    default: () => prefixComponent(AdminComponent.TabNavButton),
+  },
+
+  buttonWrapper: {
+    type: [String, Object] as PropType<ComponentOrHtmlElement | PrefixedAdminComponent>,
+    default: () => prefixComponent(AdminComponent.TabNavButtonWrapper),
+  },
+
+  closeable: {
+    type: Boolean,
+  },
+
+  hashPrefix: {
+    type: String,
+    default: '',
+  },
+
+  initialTab: {
+    type: [String, Boolean],
+    default: null,
+  },
+
+  tabs: {
+    type: Array as PropType<TabDefinition[]>,
+    required: true,
+  },
+});
+
+const activeTab = ref<string | null>(null);
+
+const handleClick = (tab: TabDefinition) => {
+  if (props.initialTab !== false) {
+    window.location.hash = props.hashPrefix + tab.name;
+  }
+
+  if (props.closeable && activeTab.value === tab.name) {
+    activeTab.value = null;
+    return;
+  }
+
+  activeTab.value = tab.name;
+};
+
+const activeTabContents = computed(() => {
+  return (props.tabs as unknown as TabDefinition[])?.find((tab) => tab.name === activeTab.value);
+});
+
+const config = useAdminConfig();
+const {translate} = useLanguage();
+
+watch(
+  () => [props.tabs, props.initialTab],
+  () => {
+    if (!props.tabs?.length) {
+      activeTab.value = null;
+      return;
+    }
+
+    if (activeTab.value || props.initialTab === false) {
+      return;
+    }
+
+    let initialTab = props.initialTab === true ? null : props.initialTab;
+
+    if (!props.initialTab) {
+      const hash = window.location.hash.replace('#', '').replace(props.hashPrefix ?? '', '');
+      const tabName = hash.split(HASH_SEPARATOR)[0];
+
+      const isValidHash = props.tabs?.some((tab) => tab.name === tabName);
+
+      if (isValidHash) {
+        initialTab = tabName;
+      }
+    }
+
+    activeTab.value = initialTab ?? props.tabs?.[0]?.name;
+  },
+  {
+    immediate: true,
+    deep: true,
+  },
+);
+</script>

package/src/components/common/index.ts

@@ -0,0 +1,39 @@
+export {default as ActionButton} from './ActionButton.vue';
+
+export {default as BulkSelectCheckbox} from './BulkSelectCheckbox.vue';
+
+export {default as CarrierLogo} from './CarrierLogo.vue';
+
+export {default as DateRelative} from './DateRelative.vue';
+
+export {default as DeliveryOptionsDeliveryType} from './DeliveryOptionsDeliveryType.vue';
+
+export {default as DeliveryOptionsExcerpt} from './DeliveryOptionsExcerpt.vue';
+
+export {default as DeliveryOptionsExcerptCarrierName} from './DeliveryOptionsExcerptCarrierName.vue';
+
+export {default as DeliveryOptionsPackageType} from './DeliveryOptionsPackageType.vue';
+
+export {default as DigitalStampWeightRange} from './DigitalStampWeightRange.vue';
+
+export {default as NotificationContainer} from './NotificationContainer.vue';
+
+export {default as PackageType} from './PackageType.vue';
+
+export {default as PlainElement} from './PlainElement';
+
+export {default as ResetButton} from './ResetButton.vue';
+
+export {default as ReturnsForm} from './ReturnsForm.vue';
+
+export {default as ShipmentBarcode} from './ShipmentBarcode.vue';
+
+export {default as ShipmentOptionsForm} from './ShipmentOptionsForm.vue';
+
+export {default as ShipmentStatus} from './ShipmentStatus.vue';
+
+export {default as StatusIndicator} from './StatusIndicator.vue';
+
+export {default as SubmitButton} from './SubmitButton.vue';
+
+export {default as TabNavigation} from './TabNavigation.vue';

package/src/components/index.ts

@@ -0,0 +1 @@
+export * from './common';

package/src/components/modals/PrintOptionsModal.vue

@@ -0,0 +1,32 @@
+<template>
+  <PdkModal
+    v-test="$.type.__name"
+    :actions="actions"
+    :modal-key="modalKey"
+    title="print_options_title">
+    <PrintOptionsModalForm />
+  </PdkModal>
+</template>
+
+<script lang="ts" setup>
+/**
+ * Modal with print options. Opened when any print action is executed, if the modal is enabled in the module settings.
+ */
+
+import {defineAsyncComponent} from 'vue';
+import {useActionStore} from '../../stores';
+import {instantiateActions} from '../../services';
+import {modalCloseAction, modalSubmitFormAction} from '../../actions';
+import {AdminModalKey} from "../../data";
+
+const modalKey = AdminModalKey.PrintOptions;
+
+// eslint-disable-next-line @typescript-eslint/naming-convention
+const PrintOptionsModalForm = defineAsyncComponent(() => import('./PrintOptionsModalForm.vue'));
+
+const actionStore = useActionStore();
+
+actionStore.register(modalSubmitFormAction);
+
+const actions = instantiateActions([modalCloseAction, modalSubmitFormAction]);
+</script>

package/src/components/modals/PrintOptionsModalForm.vue

@@ -0,0 +1,33 @@
+<template>
+  <MagicForm
+    v-if="form"
+    v-test="$.type.__name"
+    :form="form" />
+</template>
+
+<script lang="ts" setup>
+import {markRaw, onMounted, ref} from 'vue';
+import MagicForm, {defineForm} from '@myparcel-dev/vue-form-builder';
+import {generateFormFields} from '../../forms';
+import {useAdminConfig, useContext, usePluginSettings} from '../../composables';
+import {AdminModalKey} from "../../data";
+
+const context = useContext();
+const pluginSettings = usePluginSettings();
+const config = useAdminConfig();
+
+const form = ref();
+
+onMounted(() => {
+  form.value = markRaw(
+    defineForm(AdminModalKey.PrintOptions, {
+      ...config.formConfigOverrides?.modal,
+      ...config.formConfigOverrides?.[AdminModalKey.PrintOptions],
+      fields: generateFormFields({
+        fields: context.printOptionsView.elements,
+        values: pluginSettings.label,
+      }),
+    }),
+  );
+});
+</script>

package/src/components/modals/ShipmentOptionsModal.vue

@@ -0,0 +1,56 @@
+<template>
+  <PdkModal
+    v-test="$.type.__name"
+    :actions="actions"
+    :modal-key="AdminModalKey.ShipmentOptions"
+    title="shipment_options_title">
+    <component
+      :is="ShipmentOptionsModalForm"
+      :key="JSON.stringify(orderIds)"
+      v-bind="{order: orderIds}" />
+  </PdkModal>
+</template>
+
+<script lang="ts" setup>
+import {computed, defineAsyncComponent, toValue} from 'vue';
+import {instantiateActions} from '../../services';
+import {AdminModalKey} from '../../data';
+import {useOrdersData, usePluginSettings} from '../../composables';
+import {
+  modalCloseAction,
+  orderExportAction,
+  orderExportToShipmentsAction,
+  ordersExportPrintShipmentsAction,
+  ordersUpdateAction,
+} from '../../actions';
+
+/**
+ * Shipment options modal. Opened by clicking the "Create" button in the "Labels" column in the orders list.
+ */
+
+// eslint-disable-next-line @typescript-eslint/naming-convention
+const ShipmentOptionsModalForm = defineAsyncComponent(() => import('./ShipmentOptionsModalForm.vue'));
+
+const pluginSettings = usePluginSettings();
+
+const {orderMode} = pluginSettings.order;
+
+const ordersData = computed(() => useOrdersData());
+
+const orderIds = computed(() => toValue(ordersData).map((data) => toValue(data.order)?.externalIdentifier));
+
+const actions = computed(() => {
+  const disabled = toValue(ordersData).some((data) => toValue(data.query.isLoading));
+
+  const actions = [
+    modalCloseAction,
+    ordersUpdateAction,
+    ...(orderMode ? [orderExportAction] : [orderExportToShipmentsAction, ordersExportPrintShipmentsAction]),
+  ];
+
+  // TODO: figure out why this throws an error in build
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore
+  return instantiateActions(actions, {disabled});
+});
+</script>

package/src/components/modals/ShipmentOptionsModalForm.vue

@@ -0,0 +1,21 @@
+<template>
+  <ShipmentOptionsForm
+    v-if="orderIds.length"
+    v-test="$.type.__name"
+    :order="orderIds" />
+</template>
+
+<script lang="ts" setup>
+import {computed, toValue} from 'vue';
+import {type OneOrMore} from '@myparcel-dev/ts-utils';
+import {ShipmentOptionsForm} from '../common';
+import {useOrdersData} from '../../composables';
+
+const props = defineProps<{order: OneOrMore<string>}>();
+
+const orderIds = computed(() => {
+  return useOrdersData(props.order)
+    .filter((data) => toValue(data.order))
+    .map((data) => toValue(data.order)?.externalIdentifier);
+});
+</script>