@myparcel-dev/pdk-admin 1.13.0

package/src/forms/pluginSettings/createPluginSettingsTabsComponent.ts

@@ -0,0 +1,42 @@
+import {type Component, defineComponent, h} from 'vue';
+import {type Plugin} from '@myparcel-dev/pdk-common';
+import {AdminView, HASH_SEPARATOR} from '../../data';
+import {TabNavigation} from '../../components';
+import {type PluginSettingsTabsContext} from './types';
+import {createPluginSettingsForm} from './createPluginSettingsForm';
+import {createFormTab} from './createFormTab';
+
+export const createPluginSettingsTabsComponent = (
+  id: string,
+  view: Plugin.SettingsView,
+  context: PluginSettingsTabsContext,
+): Component =>
+  defineComponent({
+    name: `${AdminView.PluginSettings}-${id}`,
+
+    setup: () => {
+      return {
+        tabs: (view.children ?? []).map((subview) => {
+          const {subtext, description, id: subviewId, title, titleSuffix} = subview;
+
+          return createFormTab({
+            name: `${id}.${subviewId}`,
+            label: title,
+            labelSuffix: titleSuffix,
+            form: createPluginSettingsForm(`${id}.${subviewId}`, subview, context),
+            description,
+            subtext,
+          });
+        }),
+      };
+    },
+
+    render() {
+      return h('div', [
+        h(TabNavigation, {
+          hashPrefix: `${view.id}${HASH_SEPARATOR}`,
+          tabs: this.tabs,
+        }),
+      ]);
+    },
+  });

package/src/forms/pluginSettings/generateFormFields.spec.ts

@@ -0,0 +1,54 @@
+import {describe, expect, it} from 'vitest';
+import {type Plugin} from '@myparcel-dev/pdk-common';
+import {type InteractiveElementConfiguration} from '@myparcel-dev/vue-form-builder';
+import {AdminComponent} from '../../data';
+import {generateFormFields} from './generateFormFields';
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const removeRef: any = (field: InteractiveElementConfiguration) => {
+  const {ref, ...rest} = field;
+  return rest;
+};
+
+describe('generateFormFields', () => {
+  it('should generate fields from a view', () => {
+    const view: Plugin.SettingsView = {
+      id: 'general_settings',
+      title: 'general_settings',
+      description: 'general_settings_description',
+      children: [],
+      elements: [
+        {
+          name: 'generalSettings.name',
+          label: 'general_settings_name',
+          $attributes: {
+            min: 0,
+            max: 100,
+            step: 1,
+          },
+          $component: AdminComponent.NumberInput,
+        },
+        {
+          name: 'generalSettings.description',
+          label: 'general_settings_description',
+          $component: AdminComponent.TextInput,
+          $builders: [
+            {
+              $visibleWhen: {
+                $if: [
+                  {
+                    $target: 'generalSettings.name',
+                    $eq: 'foo',
+                  },
+                ],
+              },
+            },
+          ],
+        },
+      ],
+    };
+
+    const fields = generateFormFields({fields: view.elements, values: {}});
+    expect(fields.map(removeRef)).toMatchSnapshot();
+  });
+});

package/src/forms/pluginSettings/generateFormFields.ts

@@ -0,0 +1,50 @@
+import {ref, toRaw} from 'vue';
+import {type Plugin} from '@myparcel-dev/pdk-common';
+import {
+  type FieldConfiguration,
+  defineField,
+  type InteractiveElementConfiguration,
+} from '@myparcel-dev/vue-form-builder';
+import {defineFormField, resolveFormComponent} from '../helpers';
+import {type FormBuilder, parseBuilders} from '../form-builder';
+import {type AdminComponent} from '../../data';
+
+type GenerateFormFields = (
+  config: {
+    fields: null | Plugin.Field[];
+    values: Record<string, unknown>;
+  },
+  prefix?: string,
+) => FieldConfiguration[];
+
+export const generateFormFields: GenerateFormFields = ({fields, values}, prefix = '') => {
+  if (!fields) {
+    return [];
+  }
+
+  return fields.map((data) => {
+    const {$attributes, $component, $slot, $wrapper, label, name, $builders, ...props} = toRaw(data);
+
+    const common = {
+      component: resolveFormComponent($component as AdminComponent),
+      props: {...props},
+      attributes: {...$attributes},
+      optional: true,
+      slots: $slot ? {default: () => $slot} : undefined,
+      wrapper: $wrapper && typeof $wrapper === 'string' ? resolveFormComponent($wrapper as AdminComponent) : undefined,
+      ...parseBuilders(($builders ?? []) as FormBuilder[], prefix),
+    } as FieldConfiguration;
+
+    // Plain element
+    if (!label || !name) {
+      return defineField(common);
+    }
+
+    return defineFormField({
+      ...common,
+      name: prefix + name,
+      ref: ref(toRaw(values?.[name])),
+      label,
+    } as InteractiveElementConfiguration);
+  });
+};

package/src/forms/pluginSettings/index.ts

@@ -0,0 +1,6 @@
+export * from './createFormTab';
+export * from './createPluginSettingsForm';
+export * from './createPluginSettingsTabs';
+export * from './createPluginSettingsTabsComponent';
+export * from './generateFormFields';
+export * from './types';

package/src/forms/pluginSettings/types.ts

@@ -0,0 +1,15 @@
+import {type Plugin} from '@myparcel-dev/pdk-common';
+import {type FormInstance} from '@myparcel-dev/vue-form-builder';
+import {type AdminConfiguration, type TabDefinition} from '../../types';
+import {type AdminAction} from '../../data';
+import {type ActionContext} from '../../actions';
+
+export interface FormTab extends Omit<TabDefinition, 'component'> {
+  form: FormInstance;
+}
+
+export type PluginSettingsTabsContext = {
+  pluginSettings: Plugin.ModelContextDynamicContext['pluginSettings'];
+  actionContext: ActionContext<AdminAction.PluginSettingsUpdate>;
+  config: AdminConfiguration;
+};

package/src/forms/shipmentOptions/createShipmentOptionsForm.ts

@@ -0,0 +1,83 @@
+/* eslint-disable @typescript-eslint/no-magic-numbers */
+// noinspection JSUnusedGlobalSymbols
+
+import {toRaw} from 'vue';
+import {get} from 'lodash-unified';
+import {type Plugin} from '@myparcel-dev/pdk-common';
+import {defineForm, type FormInstance} from '@myparcel-dev/vue-form-builder';
+import {type OneOrMore, toArray} from '@myparcel-dev/ts-utils';
+import {addBulkEditNotification} from '../helpers';
+import {createShipmentFormName} from '../../utils';
+import {useModalStore} from '../../stores';
+import {AdminModalKey} from '../../data';
+import {useAdminConfig} from '../../composables';
+import {type ShipmentOptionsRefs} from './types';
+import {createHideSenderField} from './fields/createHideSenderField';
+import {createDeliveryTypeField} from './fields/createDeliveryTypeField';
+import {
+  createAgeCheckField,
+  createCarrierField,
+  createDigitalStampRangeField,
+  createDirectReturnField,
+  createInsuranceField,
+  createLabelAmountField,
+  createLargeFormatField,
+  createOnlyRecipientField,
+  createPackageTypeField,
+  createSameDayDeliveryField,
+  createSignatureField,
+  createReceiptCodeField,
+} from './fields';
+import {ALL_FIELDS, FIELD_CARRIER} from './field';
+
+export const createShipmentOptionsForm = (orders?: OneOrMore<Plugin.ModelPdkOrder>): FormInstance => {
+  const ordersArray = toArray(orders ?? []).map(toRaw);
+
+  const config = useAdminConfig();
+  const modalStore = useModalStore();
+
+  const isBulk = ordersArray.length > 1;
+  const isModal = AdminModalKey.ShipmentOptions === modalStore.opened;
+
+  if (isBulk) {
+    addBulkEditNotification(isModal);
+  }
+
+  const order = ((isBulk ? undefined : ordersArray[0]) ?? {}) as Plugin.ModelContextOrderDataContext;
+
+  const refs = ALL_FIELDS.reduce((acc, fieldName) => {
+    acc[fieldName] = get(order, fieldName);
+
+    return acc;
+  }, {} as ShipmentOptionsRefs);
+
+  refs[FIELD_CARRIER] = get(order, `${FIELD_CARRIER}.externalIdentifier`);
+
+  return defineForm(createShipmentFormName(order.externalIdentifier), {
+    ...(isModal ? config.formConfigOverrides?.modal : null),
+    ...config.formConfigOverrides?.shipmentOptions,
+    fields: [
+      // General delivery options
+      createCarrierField(refs, order.inheritedDeliveryOptions),
+
+      createPackageTypeField(refs),
+
+      createDeliveryTypeField(refs),
+
+      createLabelAmountField(refs),
+
+      createDigitalStampRangeField(refs),
+
+      // Actual shipment options
+      createAgeCheckField(refs),
+      createSignatureField(refs),
+      createOnlyRecipientField(refs),
+      createDirectReturnField(refs),
+      createLargeFormatField(refs),
+      createHideSenderField(refs),
+      createSameDayDeliveryField(refs),
+      createReceiptCodeField(refs),
+      createInsuranceField(refs),
+    ],
+  });
+};

package/src/forms/shipmentOptions/field.ts

@@ -0,0 +1,90 @@
+import {type Shipment} from '@myparcel-dev/pdk-common';
+
+export type FieldName = string;
+
+const DELIVERY_OPTIONS_PREFIX = 'deliveryOptions';
+
+const PHYSICAL_PROPERTIES_PREFIX = 'physicalProperties';
+
+export const SHIPMENT_OPTIONS = `shipmentOptions`;
+
+const SHIPMENT_OPTIONS_PREFIX = `${DELIVERY_OPTIONS_PREFIX}.${SHIPMENT_OPTIONS}`;
+
+export const CARRIER = 'carrier' satisfies keyof Shipment.ModelDeliveryOptions;
+
+export const LABEL_AMOUNT = 'labelAmount' satisfies keyof Shipment.ModelDeliveryOptions;
+
+export const PACKAGE_TYPE = 'packageType' satisfies keyof Shipment.ModelDeliveryOptions;
+
+export const DELIVERY_TYPE = 'deliveryType' satisfies keyof Shipment.ModelDeliveryOptions;
+
+export const AGE_CHECK = 'ageCheck' satisfies keyof Shipment.ModelShipmentOptions;
+
+export const RECEIPT_CODE = 'receiptCode' satisfies keyof Shipment.ModelShipmentOptions;
+
+export const DIRECT_RETURN = 'return' satisfies keyof Shipment.ModelShipmentOptions;
+
+export const HIDE_SENDER = 'hideSender' satisfies keyof Shipment.ModelShipmentOptions;
+
+export const LARGE_FORMAT = 'largeFormat' satisfies keyof Shipment.ModelShipmentOptions;
+
+export const ONLY_RECIPIENT = 'onlyRecipient' satisfies keyof Shipment.ModelShipmentOptions;
+
+export const SAME_DAY_DELIVERY = 'sameDayDelivery' satisfies keyof Shipment.ModelShipmentOptions;
+
+export const SIGNATURE = 'signature' satisfies keyof Shipment.ModelShipmentOptions;
+
+export const INSURANCE = 'insurance' satisfies keyof Shipment.ModelShipmentOptions;
+
+export const MANUAL_WEIGHT = 'manualWeight';
+
+export const PROP_OPTIONS = 'options';
+
+export const KEY_DESCRIPTION = 'description';
+
+export const KEY_SUBTEXT = 'subtext';
+
+export const FIELD_CARRIER: FieldName = `${DELIVERY_OPTIONS_PREFIX}.${CARRIER}`;
+
+export const FIELD_LABEL_AMOUNT: FieldName = `${DELIVERY_OPTIONS_PREFIX}.${LABEL_AMOUNT}`;
+
+export const FIELD_PACKAGE_TYPE: FieldName = `${DELIVERY_OPTIONS_PREFIX}.${PACKAGE_TYPE}`;
+
+export const FIELD_DELIVERY_TYPE: FieldName = `${DELIVERY_OPTIONS_PREFIX}.${DELIVERY_TYPE}`;
+
+export const FIELD_AGE_CHECK: FieldName = `${SHIPMENT_OPTIONS_PREFIX}.${AGE_CHECK}`;
+
+export const FIELD_DIRECT_RETURN: FieldName = `${SHIPMENT_OPTIONS_PREFIX}.${DIRECT_RETURN}`;
+
+export const FIELD_HIDE_SENDER: FieldName = `${SHIPMENT_OPTIONS_PREFIX}.${HIDE_SENDER}`;
+
+export const FIELD_LARGE_FORMAT: FieldName = `${SHIPMENT_OPTIONS_PREFIX}.${LARGE_FORMAT}`;
+
+export const FIELD_ONLY_RECIPIENT: FieldName = `${SHIPMENT_OPTIONS_PREFIX}.${ONLY_RECIPIENT}`;
+
+export const FIELD_SAME_DAY_DELIVERY: FieldName = `${SHIPMENT_OPTIONS_PREFIX}.${SAME_DAY_DELIVERY}`;
+
+export const FIELD_SIGNATURE: FieldName = `${SHIPMENT_OPTIONS_PREFIX}.${SIGNATURE}`;
+
+export const FIELD_INSURANCE: FieldName = `${SHIPMENT_OPTIONS_PREFIX}.${INSURANCE}`;
+
+export const FIELD_MANUAL_WEIGHT: FieldName = `${PHYSICAL_PROPERTIES_PREFIX}.${MANUAL_WEIGHT}`;
+
+export const FIELD_RECEIPT_CODE: FieldName = `${SHIPMENT_OPTIONS_PREFIX}.${RECEIPT_CODE}`;
+
+export const ALL_FIELDS = [
+  FIELD_AGE_CHECK,
+  FIELD_CARRIER,
+  FIELD_DIRECT_RETURN,
+  FIELD_HIDE_SENDER,
+  FIELD_INSURANCE,
+  FIELD_LABEL_AMOUNT,
+  FIELD_LARGE_FORMAT,
+  FIELD_ONLY_RECIPIENT,
+  FIELD_MANUAL_WEIGHT,
+  FIELD_PACKAGE_TYPE,
+  FIELD_DELIVERY_TYPE,
+  FIELD_SAME_DAY_DELIVERY,
+  FIELD_SIGNATURE,
+  FIELD_RECEIPT_CODE,
+] as const;

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

@@ -0,0 +1,33 @@
+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/createCarrierField.ts

@@ -0,0 +1,83 @@
+import {toValue} from 'vue';
+import {AdminContextKey, type Plugin} from '@myparcel-dev/pdk-common';
+import {type InteractiveElementConfiguration} from '@myparcel-dev/vue-form-builder';
+import {PackageTypeName} from '@myparcel-dev/constants';
+import {type ShipmentOptionsRefs} from '../types';
+import {FIELD_CARRIER, FIELD_DELIVERY_TYPE, FIELD_INSURANCE, FIELD_PACKAGE_TYPE, PROP_OPTIONS} from '../field';
+import {getDeliveryTypes} from '../../helpers/getDeliveryTypes';
+import {
+  defineFormField,
+  getInsuranceOptions,
+  getPackageTypes,
+  resolveFormComponent,
+  setFieldProp,
+  setPostNlAgeCheckSubtext,
+  updateFieldsDefaults,
+} from '../../helpers';
+import {createAssetUrl} from '../../../utils';
+import {type RadioGroupOption} from '../../../types';
+import {useFetchCarrier} from '../../../sdk';
+import {AdminComponent} from '../../../data';
+import {useContext, useLanguage, useLocalizedFormatter} from '../../../composables';
+import {createRef} from './createRef';
+
+// eslint-disable-next-line max-lines-per-function
+export const createCarrierField = (
+  refs: ShipmentOptionsRefs,
+  inheritedDeliveryOptions: Plugin.ModelContextOrderDataContext['inheritedDeliveryOptions'],
+): InteractiveElementConfiguration => {
+  const dynamicContext = useContext(AdminContextKey.Dynamic);
+
+  const formatter = useLocalizedFormatter();
+
+  const {translate} = useLanguage();
+
+  return defineFormField({
+    name: FIELD_CARRIER,
+    label: 'carrier',
+    ref: createRef<string>(refs, FIELD_CARRIER, PackageTypeName.Package),
+    component: resolveFormComponent(AdminComponent.RadioGroup),
+    props: {
+      options: [],
+    },
+
+    onBeforeMount: async (field) => {
+      const carrierSelectOptions = await Promise.all(
+        dynamicContext.carriers.map(async (carrier): Promise<RadioGroupOption> => {
+          const query = useFetchCarrier(carrier.name);
+          await query.suspense();
+
+          const apiCarrier = toValue(query.data);
+
+          let plainLabel = apiCarrier?.human ?? carrier.human ?? '';
+
+          if (!carrier.isDefault) {
+            plainLabel += ` ${carrier.label ?? translate(`carrier_type_${carrier.type}`)}`;
+          }
+
+          return {
+            plainLabel,
+            value: carrier.externalIdentifier ?? apiCarrier?.name ?? '',
+            image: apiCarrier?.meta.logo_svg ? createAssetUrl(apiCarrier.meta.logo_svg) : undefined,
+          };
+        }),
+      );
+
+      setFieldProp(field, PROP_OPTIONS, carrierSelectOptions);
+
+      await field?.afterUpdate?.(field, toValue(field.ref), undefined);
+
+      updateFieldsDefaults(toValue(field.ref) as string, field, inheritedDeliveryOptions);
+    },
+
+    afterUpdate: (field, newCarrier: string) => {
+      updateFieldsDefaults(newCarrier, field, inheritedDeliveryOptions);
+
+      setFieldProp(field.form, FIELD_INSURANCE, PROP_OPTIONS, getInsuranceOptions(field, formatter));
+      setFieldProp(field.form, FIELD_PACKAGE_TYPE, PROP_OPTIONS, getPackageTypes(field.form));
+      setFieldProp(field.form, FIELD_DELIVERY_TYPE, PROP_OPTIONS, getDeliveryTypes(field.form));
+
+      setPostNlAgeCheckSubtext(field);
+    },
+  });
+};

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

@@ -0,0 +1,18 @@
+import {snakeCase} from 'lodash-unified';
+import {type InteractiveElementConfiguration} from '@myparcel-dev/vue-form-builder';
+import {DeliveryTypeName} from '@myparcel-dev/constants';
+import {type ShipmentOptionsRefs} from '../types';
+import {FIELD_DELIVERY_TYPE, SHIPMENT_OPTIONS} from '../field';
+import {defineFormField, resolveFormComponent} from '../../helpers';
+import {AdminComponent} from '../../../data';
+import {createRef} from './createRef';
+
+export const createDeliveryTypeField = (refs: ShipmentOptionsRefs): InteractiveElementConfiguration => {
+  return defineFormField({
+    name: FIELD_DELIVERY_TYPE,
+    label: snakeCase(`${SHIPMENT_OPTIONS}_delivery_type`),
+    ref: createRef<DeliveryTypeName>(refs, FIELD_DELIVERY_TYPE, DeliveryTypeName.Standard),
+    component: resolveFormComponent(AdminComponent.RadioGroup),
+    // options defined in afterUpdate of `createCarrierField`
+  });
+};

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

@@ -0,0 +1,48 @@
+import {ref, toValue} from 'vue';
+import {get} from 'lodash-unified';
+import {TriState} from '@myparcel-dev/pdk-common';
+import {type InteractiveElementConfiguration} from '@myparcel-dev/vue-form-builder';
+import {PackageTypeName} from '@myparcel-dev/constants';
+import {type ShipmentOptionsRefs} from '../types';
+import {FIELD_MANUAL_WEIGHT, FIELD_PACKAGE_TYPE} from '../field';
+import {createDefaultOption, defineFormField, resolveFormComponent} from '../../helpers';
+import {type GlobalFieldProps, type OptionsProp} from '../../../types';
+import {AdminComponent} from '../../../data';
+import {useDigitalStampRanges, useOrderData, usePluginSettings} from '../../../composables';
+
+export const createDigitalStampRangeField = (refs: ShipmentOptionsRefs): InteractiveElementConfiguration => {
+  const pluginSettings = usePluginSettings();
+  const {order} = useOrderData();
+
+  const orderData = toValue(order);
+
+  const {initialWeight, manualWeight} = orderData?.physicalProperties ?? {};
+
+  const totalWeight = Number(initialWeight) + Number(pluginSettings.order.emptyDigitalStampWeight ?? 0);
+
+  const {ranges, currentRange} = useDigitalStampRanges(orderData);
+
+  const selectedValue =
+    TriState.Inherit === manualWeight
+      ? TriState.Inherit
+      : (get(refs, FIELD_MANUAL_WEIGHT, manualWeight) as number) ?? currentRange.value?.value;
+
+  return defineFormField({
+    name: FIELD_MANUAL_WEIGHT,
+    label: 'weight_range',
+    ref: ref(selectedValue ?? TriState.Inherit),
+    component: resolveFormComponent(AdminComponent.SelectInput),
+    visibleWhen: (field) => PackageTypeName.DigitalStamp === field.form.getValue(FIELD_PACKAGE_TYPE),
+    disabledWhen: (field) => PackageTypeName.DigitalStamp !== field.form.getValue(FIELD_PACKAGE_TYPE),
+    props: {
+      subtext: {
+        key: 'order_weight',
+        args: {
+          // eslint-disable-next-line id-length
+          n: totalWeight,
+        },
+      },
+      options: [createDefaultOption(currentRange.value?.plainLabel), ...ranges.value],
+    } satisfies OptionsProp & GlobalFieldProps,
+  });
+};

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

@@ -0,0 +1,8 @@
+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

@@ -0,0 +1,8 @@
+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/createInsuranceField.ts

@@ -0,0 +1,31 @@
+import { type InteractiveElementConfiguration } from '@myparcel-dev/vue-form-builder';
+import { type ShipmentOptionsRefs } from '../types';
+import { FIELD_INSURANCE, PROP_OPTIONS, INSURANCE } from '../field';
+import {
+  createHasShipmentOptionWatcher,
+  getInsuranceOptions,
+  isPackageTypePackageOrSmall,
+  resolveFormComponent,
+  setFieldProp,
+} from '../../helpers';
+import { type ElementInstance } from '../../../types';
+import { AdminComponent } from '../../../data';
+import { useLocalizedFormatter } from '../../../composables';
+import { createShipmentOptionField } from './createShipmentOptionField';
+import { createRef } from './createRef';
+
+export const createInsuranceField = (refs: ShipmentOptionsRefs): InteractiveElementConfiguration => {
+  const formatter = useLocalizedFormatter();
+
+  return createShipmentOptionField(refs, FIELD_INSURANCE, {
+    ref: createRef(refs, FIELD_INSURANCE, 0),
+    component: resolveFormComponent(AdminComponent.SelectInput),
+    visibleWhen: createHasShipmentOptionWatcher(INSURANCE, false, isPackageTypePackageOrSmall),
+    disabledWhen: createHasShipmentOptionWatcher(INSURANCE, true, isPackageTypePackageOrSmall),
+    onBeforeMount(field: ElementInstance) {
+      const insurancePossibilities = getInsuranceOptions(field, formatter);
+
+      setFieldProp(field, PROP_OPTIONS, insurancePossibilities);
+    },
+  });
+};

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

@@ -0,0 +1,20 @@
+import {snakeCase} from 'lodash-unified';
+import {type InteractiveElementConfiguration} from '@myparcel-dev/vue-form-builder';
+import {type ShipmentOptionsRefs} from '../types';
+import {FIELD_LABEL_AMOUNT, LABEL_AMOUNT} from '../field';
+import {defineFormField, resolveFormComponent} from '../../helpers';
+import {AdminComponent} from '../../../data';
+import {createRef} from './createRef';
+
+export const createLabelAmountField = (refs: ShipmentOptionsRefs): InteractiveElementConfiguration => {
+  return defineFormField({
+    name: FIELD_LABEL_AMOUNT,
+    label: snakeCase(LABEL_AMOUNT),
+    ref: createRef<number>(refs, FIELD_LABEL_AMOUNT, 1),
+    component: resolveFormComponent(AdminComponent.NumberInput),
+    props: {
+      min: 1,
+      max: 10,
+    },
+  });
+};

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

@@ -0,0 +1,8 @@
+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

@@ -0,0 +1,21 @@
+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/createPackageTypeField.ts

@@ -0,0 +1,18 @@
+import {snakeCase} from 'lodash-unified';
+import {type InteractiveElementConfiguration} from '@myparcel-dev/vue-form-builder';
+import {PackageTypeName} from '@myparcel-dev/constants';
+import {type ShipmentOptionsRefs} from '../types';
+import {FIELD_PACKAGE_TYPE, SHIPMENT_OPTIONS} from '../field';
+import {defineFormField, resolveFormComponent} from '../../helpers';
+import {AdminComponent} from '../../../data';
+import {createRef} from './createRef';
+
+export const createPackageTypeField = (refs: ShipmentOptionsRefs): InteractiveElementConfiguration => {
+  return defineFormField({
+    name: FIELD_PACKAGE_TYPE,
+    label: snakeCase(`${SHIPMENT_OPTIONS}_package_type`),
+    ref: createRef<PackageTypeName>(refs, FIELD_PACKAGE_TYPE, PackageTypeName.Package),
+    component: resolveFormComponent(AdminComponent.RadioGroup),
+    // options defined in afterUpdate of `createCarrierField`
+  });
+};