feat(order): add helpful text when using postnl age check

apps/admin/src/forms/helpers/addBulkEditNotification.ts

@@ -1,7 +1,9 @@
 import {Variant} from '@myparcel-pdk/common';
+import {KEY_DESCRIPTION} from '../shipmentOptions';
 import {type PdkNotification} from '../../types';
 import {useNotificationStore} from '../../stores';
 import {NotificationCategory} from '../../data';
+import {createLabel} from './createLabel';
 
 const TRANSLATION_KEY = 'bulk_orders_warning';
 
@@ -11,7 +13,7 @@
   notificationStore.add({
     id: TRANSLATION_KEY,
     variant: Variant.Info,
-    content: `${TRANSLATION_KEY}_description`,
+    content: createLabel(TRANSLATION_KEY, KEY_DESCRIPTION),
     category: isModal ? NotificationCategory.Modal : NotificationCategory.General,
     title: TRANSLATION_KEY,
     timeout: false,

apps/admin/src/forms/helpers/createLabel.ts

@@ -0,0 +1,3 @@
+export const createLabel = <Label extends string | undefined>(label: Label, type: string): Label => {
+  return (label ? `${label}_${type}` : undefined) as Label;
+};

apps/admin/src/forms/helpers/defineFormField.ts

@@ -1,4 +1,6 @@
 import {defineField, type InteractiveElementConfiguration} from '@myparcel/vue-form-builder';
+import {KEY_DESCRIPTION, KEY_SUBTEXT} from '../shipmentOptions';
+import {createLabel} from './createLabel';
 
 export const defineFormField = (config: InteractiveElementConfiguration): InteractiveElementConfiguration => {
   const {props, label} = config;
@@ -9,8 +11,8 @@ export const defineFormField = (config: InteractiveElementConfiguration): Intera
   return defineField({
     ...config,
     props: {
-      description: `${label}_description`,
-      subtext: `${label}_subtext`,
+      description: createLabel(label, KEY_DESCRIPTION),
+      subtext: createLabel(label, KEY_SUBTEXT),
       ...props,
     },
   });

apps/admin/src/forms/helpers/getFieldLabel.ts

@@ -0,0 +1,6 @@
+import {snakeCase} from 'lodash-unified';
+import {type Shipment} from '@myparcel-pdk/common';
+import {SHIPMENT_OPTIONS} from '../shipmentOptions';
+
+export const getFieldLabel = (name: keyof Shipment.ModelShipmentOptions): string =>
+  snakeCase(`${SHIPMENT_OPTIONS}_${name}`);

apps/admin/src/forms/helpers/hasPostNlAgeCheck.ts

@@ -0,0 +1,11 @@
+import {type FormInstance} from '@myparcel/vue-form-builder';
+import {CarrierName} from '@myparcel/constants';
+import {FIELD_AGE_CHECK} from '../shipmentOptions';
+import {triStateFieldIsEnabled} from './triStateFieldIsEnabled';
+import {getFormCarrierName} from './getFormCarrierName';
+
+export const hasPostNlAgeCheck = (form: FormInstance): boolean => {
+  const carrier = getFormCarrierName(form);
+
+  return CarrierName.PostNl === carrier && triStateFieldIsEnabled(form, FIELD_AGE_CHECK);
+};

apps/admin/src/forms/helpers/index.ts

@@ -1,14 +1,18 @@
 export * from './addBulkEditNotification';
 export * from './createDefaultOption';
 export * from './createHasShipmentOptionWatcher';
+export * from './createLabel';
 export * from './defineFormField';
 export * from './getCarrier';
+export * from './getFieldLabel';
 export * from './getFormCarrierName';
 export * from './getInsuranceOptions';
 export * from './getPackageTypes';
+export * from './hasPostNlAgeCheck';
 export * from './hasShipmentOption';
 export * from './isPackageTypePackage';
 export * from './resolveFormComponent';
 export * from './setFieldProp';
+export * from './setPostNlAgeCheckSubtext';
 export * from './triStateFieldIsEnabled';
 export * from './updateFieldsDefaults';

apps/admin/src/forms/helpers/setPostNlAgeCheckSubtext.ts

@@ -0,0 +1,17 @@
+import {type InteractiveElementInstance} from '@myparcel/vue-form-builder';
+import {CarrierName} from '@myparcel/constants';
+import {AGE_CHECK, FIELD_AGE_CHECK, KEY_SUBTEXT} from '../shipmentOptions';
+import {setFieldProp} from './setFieldProp';
+import {hasPostNlAgeCheck} from './hasPostNlAgeCheck';
+import {getFieldLabel} from './getFieldLabel';
+import {createLabel} from './createLabel';
+
+export const setPostNlAgeCheckSubtext = ({form}: InteractiveElementInstance): void => {
+  const defaultKey = createLabel(getFieldLabel(AGE_CHECK), KEY_SUBTEXT);
+
+  if (hasPostNlAgeCheck(form)) {
+    setFieldProp(form, FIELD_AGE_CHECK, KEY_SUBTEXT, `${defaultKey}_${CarrierName.PostNl}`);
+  } else {
+    setFieldProp(form, FIELD_AGE_CHECK, KEY_SUBTEXT, defaultKey);
+  }
+};

apps/admin/src/forms/shipmentOptions/field.ts

@@ -36,6 +36,10 @@ 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}`;

apps/admin/src/forms/shipmentOptions/fields/createAgeCheckField.ts

@@ -4,14 +4,16 @@
 import {CarrierName} from '@myparcel/constants';
 import {type ShipmentOptionsRefs} from '../types';
 import {FIELD_AGE_CHECK, FIELD_ONLY_RECIPIENT, FIELD_SIGNATURE} from '../field';
-import {getFormCarrierName, triStateFieldIsEnabled} from '../../helpers';
+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;
       }

apps/admin/src/forms/shipmentOptions/fields/createCarrierField.ts

@@ -10,6 +10,7 @@
   getPackageTypes,
   resolveFormComponent,
   setFieldProp,
+  setPostNlAgeCheckSubtext,
   updateFieldsDefaults,
 } from '../../helpers';
 import {createAssetUrl} from '../../../utils';
@@ -73,6 +74,8 @@
 
       setFieldProp(field.form, FIELD_INSURANCE, PROP_OPTIONS, getInsuranceOptions(field, formatter));
       setFieldProp(field.form, FIELD_PACKAGE_TYPE, PROP_OPTIONS, getPackageTypes(field.form));
+
+      setPostNlAgeCheckSubtext(field);
     },
   });
 };

apps/admin/src/forms/shipmentOptions/fields/createOnlyRecipientField.ts

@@ -3,16 +3,12 @@
 import {CarrierName} from '@myparcel/constants';
 import {type ShipmentOptionsRefs} from '../types';
 import {FIELD_AGE_CHECK, FIELD_ONLY_RECIPIENT} from '../field';
-import {getFormCarrierName, triStateFieldIsEnabled} from '../../helpers';
+import {getFormCarrierName, hasPostNlAgeCheck} from '../../helpers';
 import {createShipmentOptionField} from './createShipmentOptionField';
 
 export const createOnlyRecipientField = (refs: ShipmentOptionsRefs): InteractiveElementConfiguration => {
   return createShipmentOptionField(refs, FIELD_ONLY_RECIPIENT, {
-    readOnlyWhen({form}) {
-      const carrier = getFormCarrierName(form);
-
-      return CarrierName.PostNl === carrier && triStateFieldIsEnabled(form, FIELD_AGE_CHECK);
-    },
+    readOnlyWhen: ({form}) => hasPostNlAgeCheck(form),
 
     afterUpdate({form}, value) {
       if (!(CarrierName.DhlForYou === getFormCarrierName(form) && TriState.On === value)) {

apps/admin/src/forms/shipmentOptions/fields/createShipmentOptionField.ts

@@ -1,9 +1,8 @@
-import {snakeCase} from 'lodash-unified';
 import {type Shipment, TriState} from '@myparcel-pdk/common';
 import {type InteractiveElementConfiguration} from '@myparcel/vue-form-builder';
 import {type ShipmentOptionsRefs} from '../types';
-import {type FieldName, SHIPMENT_OPTIONS} from '../field';
-import {createHasShipmentOptionWatcher, defineFormField, resolveFormComponent} from '../../helpers';
+import {type FieldName} from '../field';
+import {createHasShipmentOptionWatcher, defineFormField, getFieldLabel, resolveFormComponent} from '../../helpers';
 import {AdminComponent} from '../../../data';
 import {createRef} from './createRef';
 
@@ -18,7 +17,7 @@
     name: fieldName,
     component: resolveFormComponent(AdminComponent.TriStateInput),
     ref: createRef(refs, fieldName, TriState.Inherit),
-    label: snakeCase(`${SHIPMENT_OPTIONS}_${name}`),
+    label: getFieldLabel(name),
     visibleWhen: createHasShipmentOptionWatcher(name),
     disabledWhen: createHasShipmentOptionWatcher(name, true),
     ...config,

apps/admin/src/forms/shipmentOptions/fields/createSignatureField.ts

@@ -1,16 +1,11 @@
 import {type InteractiveElementConfiguration} from '@myparcel/vue-form-builder';
-import {CarrierName} from '@myparcel/constants';
 import {type ShipmentOptionsRefs} from '../types';
-import {FIELD_AGE_CHECK, FIELD_SIGNATURE} from '../field';
-import {getFormCarrierName, triStateFieldIsEnabled} from '../../helpers';
+import {FIELD_SIGNATURE} from '../field';
+import {hasPostNlAgeCheck} from '../../helpers';
 import {createShipmentOptionField} from './createShipmentOptionField';
 
 export const createSignatureField = (refs: ShipmentOptionsRefs): InteractiveElementConfiguration => {
   return createShipmentOptionField(refs, FIELD_SIGNATURE, {
-    readOnlyWhen({form}) {
-      const carrier = getFormCarrierName(form);
-
-      return CarrierName.PostNl === carrier && triStateFieldIsEnabled(form, FIELD_AGE_CHECK);
-    },
+    readOnlyWhen: ({form}) => hasPostNlAgeCheck(form),
   });
 };