@myparcel-dev/pdk-admin 1.13.0

package/src/forms/form-builder/types/common.types.ts

@@ -0,0 +1,35 @@
+import {type OneOrMore} from '@myparcel-dev/ts-utils';
+import {type FormPropSetter, type FormValueGetter, type FormValueSetter} from '../utils';
+import {
+  type FormAfterUpdateBuilder,
+  type FormDisabledWhenBuilder,
+  type FormReadOnlyWhenBuilder,
+  type FormVisibleWhenBuilder,
+} from './SubOperationBuilder.types';
+import {type WithCondition} from './FormCondition.types';
+
+export type AnyVal = string | number | boolean;
+
+export type PropVal = OneOrMore<AnyVal> | OneOrMore<Record<string, AnyVal>>;
+
+export interface WithTarget {
+  $target: string;
+}
+
+export interface WithValue<V = AnyVal> {
+  $value: V;
+}
+
+export type FormWhenBuilder = FormVisibleWhenBuilder | FormDisabledWhenBuilder | FormReadOnlyWhenBuilder;
+
+export type OperationArguments = Partial<WithTarget | WithValue | WithCondition>;
+
+export type FormOperation = Record<string, OperationArguments>;
+
+export type FormBuilder = FormWhenBuilder | FormAfterUpdateBuilder;
+
+export type FormOperationMethods = {
+  getValue: FormValueGetter;
+  setValue: FormValueSetter;
+  setProp: FormPropSetter;
+};

package/src/forms/form-builder/types/index.ts

@@ -0,0 +1,4 @@
+export * from './FormCondition.types';
+export * from './FormOperations.types';
+export * from './SubOperationBuilder.types';
+export * from './common.types';

package/src/forms/form-builder/utils/createPropSetter.ts

@@ -0,0 +1,19 @@
+import {set} from 'lodash-unified';
+import {type FieldInstance, type InteractiveElementInstance} from '@myparcel-dev/vue-form-builder';
+import {type PropVal} from '../types';
+
+export type FormPropSetter = (prop: string, value: PropVal, target?: string) => void;
+
+export const createPropSetter = (instance: InteractiveElementInstance, prefix: string): FormPropSetter => {
+  return (prop, value, target) => {
+    let field: FieldInstance;
+
+    if (target) {
+      field = instance.form.getField(`${prefix}${target}`);
+    } else {
+      field = instance;
+    }
+
+    set(field.props, prop, value);
+  };
+};

package/src/forms/form-builder/utils/createValueGetter.ts

@@ -0,0 +1,16 @@
+import {toValue} from 'vue';
+import {type InteractiveElementInstance} from '@myparcel-dev/vue-form-builder';
+import {type AnyVal} from '../types';
+
+export type FormValueGetter = (target?: string) => AnyVal;
+
+export const createValueGetter = (instance: InteractiveElementInstance, prefix: string): FormValueGetter => {
+  return (target?: string): AnyVal => {
+    if (target) {
+      return instance.form.getValue(`${prefix}${target}`);
+    }
+
+    // @ts-expect-error todo
+    return toValue(instance.ref);
+  };
+};

package/src/forms/form-builder/utils/createValueSetter.ts

@@ -0,0 +1,21 @@
+import {isRef} from 'vue';
+import {type InteractiveElementInstance} from '@myparcel-dev/vue-form-builder';
+import {type AnyVal} from '../types';
+
+export type FormValueSetter = (value: AnyVal, target?: string) => void;
+
+export const createValueSetter = (instance: InteractiveElementInstance, prefix: string): FormValueSetter => {
+  return (value, target) => {
+    if (target) {
+      instance.form.setValue(`${prefix}${target}`, value);
+    } else {
+      if (isRef(instance.ref)) {
+        instance.ref.value = value;
+        return;
+      }
+
+      // @ts-expect-error todo
+      instance.ref = value;
+    }
+  };
+};

package/src/forms/form-builder/utils/index.ts

@@ -0,0 +1,6 @@
+export type {FormPropSetter} from './createPropSetter';
+
+export * from './createValueGetter';
+export * from './createValueSetter';
+
+export {createPropSetter} from './createPropSetter';

package/src/forms/formKeys.ts

@@ -0,0 +1,28 @@
+import {AdminModalKey} from '../data';
+
+export const FORM_KEY_ACCOUNT_SETTINGS = 'accountSettings';
+
+export const FORM_KEY_MODAL = 'modal';
+
+export const FORM_KEY_MODAL_PRINT_OPTIONS = AdminModalKey.PrintOptions;
+
+export const FORM_KEY_MODAL_RETURN_OPTIONS = AdminModalKey.ReturnOptions;
+
+export const FORM_KEY_MODAL_SHIPMENT_OPTIONS = AdminModalKey.ShipmentOptions;
+
+export const FORM_KEY_PLUGIN_SETTINGS = 'pluginSettings';
+
+export const FORM_KEY_PRODUCT_SETTINGS = 'productSettings';
+
+export const FORM_KEY_CHILD_PRODUCT_SETTINGS = 'childProductSettings';
+
+export const FORM_KEYS = [
+  FORM_KEY_ACCOUNT_SETTINGS,
+  FORM_KEY_CHILD_PRODUCT_SETTINGS,
+  FORM_KEY_MODAL,
+  FORM_KEY_MODAL_PRINT_OPTIONS,
+  FORM_KEY_MODAL_RETURN_OPTIONS,
+  FORM_KEY_MODAL_SHIPMENT_OPTIONS,
+  FORM_KEY_PLUGIN_SETTINGS,
+  FORM_KEY_PRODUCT_SETTINGS,
+] as const;

package/src/forms/helpers/addBulkEditNotification.ts

@@ -0,0 +1,21 @@
+import {Variant} from '@myparcel-dev/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';
+
+export const addBulkEditNotification = (isModal: boolean): void => {
+  const notificationStore = useNotificationStore();
+
+  notificationStore.add({
+    id: TRANSLATION_KEY,
+    variant: Variant.Info,
+    content: createLabel(TRANSLATION_KEY, KEY_DESCRIPTION),
+    category: isModal ? NotificationCategory.Modal : NotificationCategory.General,
+    title: TRANSLATION_KEY,
+    timeout: false,
+  } as PdkNotification);
+};

package/src/forms/helpers/createDefaultOption.ts

@@ -0,0 +1,12 @@
+import {type Keyable, TriState} from '@myparcel-dev/pdk-common';
+import {type SelectOption} from '../../types';
+
+export const createDefaultOption = (value?: Keyable | undefined): SelectOption => ({
+  label: {
+    key: 'option_inherit_value',
+    args: {
+      value: value ?? '?',
+    },
+  },
+  value: TriState.Inherit,
+});

package/src/forms/helpers/createHasShipmentOptionWatcher.ts

@@ -0,0 +1,12 @@
+import { type Shipment } from '@myparcel-dev/pdk-common';
+import { type InteractiveElementInstance, type FormInstance } from '@myparcel-dev/vue-form-builder';
+import { isPackageTypePackage } from './isPackageTypePackage';
+import { hasShipmentOption } from './hasShipmentOption';
+
+export const createHasShipmentOptionWatcher = (
+  shipmentOption: keyof Shipment.ModelShipmentOptions,
+  invert = false,
+  validator: (form: FormInstance) => boolean = isPackageTypePackage,
+): ((field: InteractiveElementInstance) => boolean) => {
+  return ({ form }) => (validator(form) && hasShipmentOption(form, shipmentOption)) !== invert;
+};

package/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;
+};

package/src/forms/helpers/defineFormField.ts

@@ -0,0 +1,19 @@
+import {defineField, type InteractiveElementConfiguration} from '@myparcel-dev/vue-form-builder';
+import {KEY_DESCRIPTION, KEY_SUBTEXT} from '../shipmentOptions';
+import {createLabel} from './createLabel';
+
+export const defineFormField = (config: InteractiveElementConfiguration): InteractiveElementConfiguration => {
+  const {props, label} = config;
+
+  // TODO: fix infinitely deep instantiation error
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore
+  return defineField({
+    ...config,
+    props: {
+      description: createLabel(label, KEY_DESCRIPTION),
+      subtext: createLabel(label, KEY_SUBTEXT),
+      ...props,
+    },
+  });
+};

package/src/forms/helpers/getCarrier.ts

@@ -0,0 +1,11 @@
+import {AdminContextKey, type Carrier} from '@myparcel-dev/pdk-common';
+import {type FormInstance} from '@myparcel-dev/vue-form-builder';
+import {FIELD_CARRIER} from '../shipmentOptions';
+import {useContext} from '../../composables';
+
+export const getCarrier = (form: FormInstance): Carrier.ModelCarrier | undefined => {
+  const dynamicContext = useContext(AdminContextKey.Dynamic);
+  const chosenCarrier = form.getValue(FIELD_CARRIER);
+
+  return dynamicContext.carriers.find((carrier) => carrier.externalIdentifier === chosenCarrier);
+};

package/src/forms/helpers/getDeliveryTypes.ts

@@ -0,0 +1,19 @@
+import {type FormInstance} from '@myparcel-dev/vue-form-builder';
+import {DeliveryTypeName} from '@myparcel-dev/constants';
+import {getDynamicTranslation} from '../../utils';
+import {type SelectOption} from '../../types';
+import {getCarrier} from './getCarrier';
+
+export const getDeliveryTypes = (form?: FormInstance): SelectOption[] => {
+  let array = Object.values(DeliveryTypeName);
+
+  if (form) {
+    const carrier = getCarrier(form);
+    array = array.filter((name) => carrier?.capabilities.deliveryTypes.includes(name));
+  }
+
+  return array.map((name) => ({
+    label: getDynamicTranslation('delivery_type', name),
+    value: name,
+  }));
+};

package/src/forms/helpers/getFieldLabel.ts

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

package/src/forms/helpers/getFormCarrierName.ts

@@ -0,0 +1,7 @@
+import {type FormInstance} from '@myparcel-dev/vue-form-builder';
+import {FIELD_CARRIER} from '../shipmentOptions';
+import {resolveCarrier} from '../../utils';
+
+export const getFormCarrierName = (form: FormInstance): string | undefined => {
+  return resolveCarrier(form.getValue(FIELD_CARRIER));
+};

package/src/forms/helpers/getInsuranceOptions.ts

@@ -0,0 +1,23 @@
+import {TriState} from '@myparcel-dev/pdk-common';
+import {type ElementInstance, type SelectOption} from '../../types';
+import {Format, type Formatter} from '../../composables';
+import {getCarrier} from './getCarrier';
+
+export const getInsuranceOptions = (field: ElementInstance, formatter: Formatter): SelectOption[] => {
+  const carrier = getCarrier(field.form);
+
+  const insurancePossibilities = carrier?.capabilities.shipmentOptions.insurance ?? [];
+
+  const carrierPossibilities = insurancePossibilities.map((amount) => ({
+    plainLabel: formatter.format(Format.Currency, amount / 100),
+    value: amount.toString(),
+  }));
+
+  return [
+    {
+      label: 'option_default',
+      value: TriState.Inherit,
+    },
+    ...carrierPossibilities,
+  ];
+};

package/src/forms/helpers/getPackageTypes.ts

@@ -0,0 +1,19 @@
+import {type FormInstance} from '@myparcel-dev/vue-form-builder';
+import {PackageTypeName} from '@myparcel-dev/constants';
+import {getPackageTypeTranslation} from '../../utils';
+import {type SelectOption} from '../../types';
+import {getCarrier} from './getCarrier';
+
+export const getPackageTypes = (form?: FormInstance): SelectOption[] => {
+  let array = Object.values(PackageTypeName);
+
+  if (form) {
+    const carrier = getCarrier(form);
+    array = array.filter((name) => carrier?.capabilities.packageTypes.includes(name));
+  }
+
+  return array.map((name) => ({
+    label: getPackageTypeTranslation(name),
+    value: name,
+  }));
+};

package/src/forms/helpers/hasPostNlAgeCheck.ts

@@ -0,0 +1,11 @@
+import {type FormInstance} from '@myparcel-dev/vue-form-builder';
+import {CarrierName} from '@myparcel-dev/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);
+};

package/src/forms/helpers/hasShipmentOption.ts

@@ -0,0 +1,8 @@
+import { type Shipment } from '@myparcel-dev/pdk-common';
+import { type FormInstance } from '@myparcel-dev/vue-form-builder';
+import { getCarrier } from './getCarrier';
+
+export const hasShipmentOption = (form: FormInstance, option: keyof Shipment.ModelShipmentOptions): boolean => {
+  const carrier = getCarrier(form);
+  return Boolean(carrier?.capabilities.shipmentOptions[option]);
+};

package/src/forms/helpers/index.ts

@@ -0,0 +1,20 @@
+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 './isPackageTypePackageOrSmall';
+export * from './isPackageTypeSmallPackage';
+export * from './resolveFormComponent';
+export * from './setFieldProp';
+export * from './setPostNlAgeCheckSubtext';
+export * from './triStateFieldIsEnabled';
+export * from './updateFieldsDefaults';

package/src/forms/helpers/isPackageTypePackage.ts

@@ -0,0 +1,7 @@
+import { type FormInstance } from '@myparcel-dev/vue-form-builder';
+import { PackageTypeName } from '@myparcel-dev/constants';
+import { FIELD_PACKAGE_TYPE } from '../shipmentOptions';
+
+export const isPackageTypePackage = (form: FormInstance): boolean => {
+  return PackageTypeName.Package === form.getValue(FIELD_PACKAGE_TYPE);
+};

package/src/forms/helpers/isPackageTypePackageOrSmall.ts

@@ -0,0 +1,7 @@
+import {type FormInstance} from '@myparcel-dev/vue-form-builder';
+import {isPackageTypeSmallPackage} from './isPackageTypeSmallPackage';
+import {isPackageTypePackage} from './isPackageTypePackage';
+
+export const isPackageTypePackageOrSmall = (form: FormInstance): boolean => {
+  return isPackageTypePackage(form) || isPackageTypeSmallPackage(form);
+};

package/src/forms/helpers/isPackageTypeSmallPackage.ts

@@ -0,0 +1,7 @@
+import {type FormInstance} from '@myparcel-dev/vue-form-builder';
+import {PackageTypeName} from '@myparcel-dev/constants';
+import {FIELD_PACKAGE_TYPE} from '../shipmentOptions';
+
+export const isPackageTypeSmallPackage = (form: FormInstance): boolean => {
+  return PackageTypeName.PackageSmall === form.getValue(FIELD_PACKAGE_TYPE);
+};

package/src/forms/helpers/resolveFormComponent.ts

@@ -0,0 +1,12 @@
+import {type Component, resolveComponent} from 'vue';
+import {memoize} from 'lodash-unified';
+import {prefixComponent} from '../../utils';
+import {type AdminComponent} from '../../data';
+
+const memoizedResolveFormComponent = memoize((componentName: AdminComponent): Component => {
+  return resolveComponent(prefixComponent(componentName)) as Component;
+});
+
+export const resolveFormComponent = (componentName: AdminComponent): Component => {
+  return memoizedResolveFormComponent(componentName);
+};

package/src/forms/helpers/setFieldProp.ts

@@ -0,0 +1,32 @@
+import {type FormInstance} from '@myparcel-dev/vue-form-builder';
+import {isOfType} from '@myparcel-dev/ts-utils';
+import {type ElementInstance} from '../../types';
+
+type SetFieldProp = {
+  (form: FormInstance, name: string, key: string, value: unknown): void;
+  (field: ElementInstance, key: string, value: unknown, arg3?: never, arg4?: never): void;
+};
+
+export const setFieldProp: SetFieldProp = (arg1, arg2, arg3, arg4) => {
+  let field = arg1;
+  let key = arg2;
+  let value = arg3;
+
+  if (isOfType<FormInstance>(arg1, 'fields')) {
+    const foundField = arg1.getField<ElementInstance>(arg2);
+
+    if (!foundField) {
+      throw new Error(`Field ${arg2} not found`);
+    }
+
+    field = foundField;
+    key = arg3 as string;
+    value = arg4;
+  }
+
+  if (!isOfType<ElementInstance>(field, 'form')) {
+    return;
+  }
+
+  field.props[key] = value as never;
+};

package/src/forms/helpers/setPostNlAgeCheckSubtext.ts

@@ -0,0 +1,17 @@
+import {type InteractiveElementInstance} from '@myparcel-dev/vue-form-builder';
+import {CarrierName} from '@myparcel-dev/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);
+  }
+};

package/src/forms/helpers/triStateFieldIsEnabled.ts

@@ -0,0 +1,20 @@
+import {toValue} from 'vue';
+import {TriState} from '@myparcel-dev/pdk-common';
+import {type FormInstance} from '@myparcel-dev/vue-form-builder';
+import {type ElementInstance, type TriStateInputProps} from '../../types';
+
+export const triStateFieldIsEnabled = (form: FormInstance, fieldName: string): boolean => {
+  const field = form.getField(fieldName) as unknown as ElementInstance<TriState, TriStateInputProps> | undefined;
+
+  if (!field) {
+    return false;
+  }
+
+  const value = toValue(field.ref);
+
+  if (TriState.Inherit === value) {
+    return TriState.On === field.props.defaultValue;
+  }
+
+  return TriState.On === value;
+};

package/src/forms/helpers/updateFieldsDefaults.ts

@@ -0,0 +1,26 @@
+import {toValue} from 'vue';
+import {get as lodashGet} from 'lodash-unified';
+import {type Shipment} from '@myparcel-dev/pdk-common';
+import {type InteractiveElementInstance} from '@myparcel-dev/vue-form-builder';
+
+/**
+ * Update the default values of the fields based on the carrier, so the tri-state defaults are correct.
+ */
+export const updateFieldsDefaults = (
+  carrier: string,
+  {form, name}: InteractiveElementInstance,
+  inheritedDeliveryOptions: Record<string, Shipment.ModelDeliveryOptions>,
+): void => {
+  (toValue(form.fields) as InteractiveElementInstance[]).forEach((otherField) => {
+    if (otherField.name === name) {
+      return;
+    }
+
+    const optionPathParts = otherField.name.split('.');
+
+    // Remove the deliveryOptions prefix
+    optionPathParts.shift();
+
+    otherField.props.defaultValue = lodashGet(inheritedDeliveryOptions, [carrier, ...optionPathParts]);
+  });
+};

package/src/forms/index.ts

@@ -0,0 +1,6 @@
+export * from './createReturnsForm';
+export * from './form-builder';
+export * from './formKeys';
+export * from './helpers';
+export * from './pluginSettings';
+export * from './shipmentOptions';

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

@@ -0,0 +1,37 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`generateFormFields > should generate fields from a view 1`] = `
+[
+  {
+    "attributes": {
+      "max": 100,
+      "min": 0,
+      "step": 1,
+    },
+    "component": "PdkNumberInput",
+    "label": "general_settings_name",
+    "name": "generalSettings.name",
+    "optional": true,
+    "props": {
+      "description": "general_settings_name_description",
+      "subtext": "general_settings_name_subtext",
+    },
+    "slots": undefined,
+    "wrapper": undefined,
+  },
+  {
+    "attributes": {},
+    "component": "PdkTextInput",
+    "label": "general_settings_description",
+    "name": "generalSettings.description",
+    "optional": true,
+    "props": {
+      "description": "general_settings_description_description",
+      "subtext": "general_settings_description_subtext",
+    },
+    "slots": undefined,
+    "visibleWhen": [Function],
+    "wrapper": undefined,
+  },
+]
+`;

package/src/forms/pluginSettings/createFormTab.ts

@@ -0,0 +1,19 @@
+import {h, type VNode} from 'vue';
+import MagicForm from '@myparcel-dev/vue-form-builder';
+import {type TabDefinition} from '../../types';
+import {useLanguage} from '../../composables';
+import {type FormTab} from './types';
+
+export const createFormTab = (tab: FormTab): TabDefinition => {
+  const language = useLanguage();
+  const children: VNode[] = [h('div', {}, h(MagicForm, {form: tab.form}))];
+
+  if (tab.description && language.has(tab.description)) {
+    children.unshift(h('p', language.translate(tab.description)));
+  }
+
+  return {
+    ...tab,
+    component: () => h('div', {}, children),
+  };
+};

package/src/forms/pluginSettings/createPluginSettingsForm.ts

@@ -0,0 +1,39 @@
+import {get as lodashGet} from 'lodash-unified';
+import {BackendEndpoint, type Plugin} from '@myparcel-dev/pdk-common';
+import {defineForm, type FormInstance} from '@myparcel-dev/vue-form-builder';
+import {useStoreQuery} from '../../composables';
+import {SubmitButton} from '../../components';
+import {executeAction} from '../../actions';
+import {type PluginSettingsTabsContext} from './types';
+import {generateFormFields} from './generateFormFields';
+
+export const createPluginSettingsForm = (
+  id: string,
+  view: Plugin.SettingsView,
+  context: PluginSettingsTabsContext,
+): FormInstance => {
+  const {pluginSettings, actionContext} = context;
+
+  const mutation = useStoreQuery(BackendEndpoint.UpdatePluginSettings);
+
+  const values = lodashGet(pluginSettings, id, {});
+
+  const generatedFields = generateFormFields({fields: view.elements, values}, `${id}.`);
+
+  return defineForm(id, {
+    ...context.config.formConfigOverrides?.pluginSettings,
+    fields: [
+      ...generatedFields,
+      {
+        component: SubmitButton,
+        props: {
+          loading: mutation.isLoading,
+        },
+      },
+    ],
+
+    async afterSubmit(form) {
+      await executeAction({...actionContext, parameters: {form}});
+    },
+  });
+};

package/src/forms/pluginSettings/createPluginSettingsTabs.ts

@@ -0,0 +1,35 @@
+import {h, markRaw} from 'vue';
+import {type Plugin} from '@myparcel-dev/pdk-common';
+import {type TabDefinition} from '../../types';
+import {useLanguage} from '../../composables';
+import {type PluginSettingsTabsContext} from './types';
+import {createPluginSettingsTabsComponent} from './createPluginSettingsTabsComponent';
+import {createPluginSettingsForm} from './createPluginSettingsForm';
+import {createFormTab} from './createFormTab';
+
+export const createPluginSettingsTabs = (
+  view: Plugin.ModelContextPluginSettingsViewContext,
+  context: PluginSettingsTabsContext,
+): TabDefinition[] => {
+  return Object.entries(view).map(([id, view]) => {
+    const tab = {
+      name: id,
+      label: view.title,
+    };
+
+    // If children is null, it's a single form
+    if (!view.children) {
+      return createFormTab({...tab, form: createPluginSettingsForm(id, view, context)});
+    }
+
+    // If children is an empty array, it's an empty view
+    if (!view.children.length) {
+      const {translate} = useLanguage();
+
+      return {...tab, component: h('div', {}, translate(`view_${id}_empty`))};
+    }
+
+    // If children is an array, it's a tabbed view
+    return {...tab, component: markRaw(createPluginSettingsTabsComponent(id, view, context))};
+  });
+};