@wix/patterns 1.427.0 → 1.431.0

package/src/components/CustomFieldModal/CustomFieldFormV2.tsx

@@ -0,0 +1,158 @@
+import React, { useEffect } from 'react';
+import { observer } from 'mobx-react-lite';
+import {
+  Box,
+  Cell,
+  FloatingNotification,
+  FormField,
+  Input,
+  Layout,
+  Text,
+} from '@wix/design-system';
+import { useWixPatternsContainer } from '@wix/bex-core/react';
+import { CustomFieldModalState } from '@wix/bex-core';
+import { InfoCircle } from '@wix/wix-ui-icons-common';
+import { runInAction } from 'mobx';
+import { CustomFieldTypeDropdownV2 } from './CustomFieldTypeDropdownV2';
+import { PiiFormFields } from './CustomFieldFormPiiFields';
+
+export interface CustomFieldFormV2Props {
+  state: CustomFieldModalState;
+}
+
+export const _CustomFieldFormV2 = (props: CustomFieldFormV2Props) => {
+  const { state } = props;
+  const {
+    form: {
+      $: { key, type, name, containsPii },
+    },
+    errorToastConfig,
+    mode,
+    customFieldModalBiReporter,
+    generateUniqueKey,
+    setKeyFieldIfNotDirty,
+  } = state;
+
+  const {
+    translate: t,
+    environment: { language },
+  } = useWixPatternsContainer();
+
+  useEffect(() => customFieldModalBiReporter.init(), []);
+
+  return (
+    <Box width={552} direction="vertical">
+      {errorToastConfig && (
+        <Box
+          position="absolute"
+          top="24px"
+          left="49%"
+          transform="translateX(-50%)"
+        >
+          <FloatingNotification
+            dataHook="custom-field-modal-error-state"
+            type="destructive"
+            prefixIcon={<InfoCircle />}
+            text={errorToastConfig.message}
+            textButtonProps={
+              errorToastConfig?.action && {
+                label: errorToastConfig.action.text,
+                onClick: () => errorToastConfig?.action?.onClick?.(),
+              }
+            }
+            onClose={() => {
+              runInAction(() => {
+                state.errorToastConfig = undefined;
+              });
+            }}
+          />
+        </Box>
+      )}
+      <Box paddingLeft="SP1" paddingRight="SP1" direction="vertical">
+        <Layout>
+          <Cell span={12}>
+            <FormField
+              dataHook="custom-field-modal-field-type"
+              required
+              label={t('cairo.customFields.addCustomField.modal.fieldType')}
+              status={type.hasError ? 'error' : undefined}
+              statusMessage={type.error}
+            >
+              <CustomFieldTypeDropdownV2 state={state} />
+              {mode === 'edit' && (
+                <Box marginTop="SP1">
+                  <Text size="tiny" secondary>
+                    {t('cairo.customFields.editCustomField.fieldType.tooltip')}
+                  </Text>
+                </Box>
+              )}
+            </FormField>
+          </Cell>
+          <Cell span={6}>
+            <FormField
+              dataHook="custom-field-modal-field-name"
+              required
+              label={t('cairo.customFields.addCustomField.modal.fieldName')}
+              status={name.hasError ? 'error' : undefined}
+              statusMessage={name.error}
+            >
+              <Input
+                dataHook="custom-field-modal-name"
+                onChange={(e) => {
+                  name.onChange(e.target.value);
+                  setKeyFieldIfNotDirty(generateUniqueKey(e.target.value));
+                }}
+                value={name.value}
+                maxLength={64}
+                placeholder={state.namePlaceholder}
+              />
+            </FormField>
+          </Cell>
+          <Cell span={6}>
+            <FormField
+              dataHook="custom-field-modal-field-key"
+              required
+              label={t(
+                'cairo.customFields.addCustomField.modal.advancedSettings.key.title',
+              )}
+              infoContent={
+                mode === 'new'
+                  ? t(
+                      'cairo.customFields.addCustomField.modal.advancedSettings.key.tooltip',
+                    )
+                  : t('cairo.customFields.editCustomField.fieldKey.tooltip')
+              }
+              status={key.hasError ? 'error' : undefined}
+              statusMessage={key.error}
+            >
+              <Input
+                dataHook="custom-field-modal-key"
+                disabled={mode === 'edit'}
+                value={key.value}
+                onChange={(e) => {
+                  key.onChange(e.target.value.toLowerCase());
+                  customFieldModalBiReporter.reportKeyFormFieldChange();
+                }}
+                placeholder={t(
+                  'cairo.customFields.addCustomField.modal.advancedSettings.key.placeholder',
+                )}
+              />
+            </FormField>
+          </Cell>
+          {state.fieldManagement.supportsPii && (
+            <PiiFormFields
+              containsPii={{
+                value: containsPii.value,
+                onChange: containsPii.onChange,
+              }}
+              mode={mode}
+              language={language}
+            />
+          )}
+        </Layout>
+      </Box>
+    </Box>
+  );
+};
+
+export const CustomFieldFormV2 = observer(_CustomFieldFormV2);

package/src/components/CustomFieldModal/CustomFieldModal.tsx

@@ -5,8 +5,21 @@ import { CustomActionModal, MessageActionModal } from '../ActionModal';
 import { CustomFieldForm } from '.';
 import { useWixPatternsContainer } from '@wix/bex-core/react';
 import { CustomFieldModalPrimaryButton } from './CustomFieldModalPrimaryButton';
-import { CustomFieldModalState, Translate } from '@wix/bex-core';
+import {
+  CustomFieldModalState,
+  FieldModalSubtitle,
+  Translate,
+} from '@wix/bex-core';
 import { minimalRequiredWdsRuntimeCheck } from '../../minimalRequiredWdsRuntimeCheck';
+import { useBmHarmonyTheme } from '../../hooks/useBmHarmonyTheme';
+
+// Lazy so the V2 form (and its subtree) stays out of the main bundle while the
+// flag is off.
+const CustomFieldFormV2 = React.lazy(() =>
+  import(
+    /* webpackChunkName: "CustomFieldFormV2" */ './CustomFieldFormV2'
+  ).then((m) => ({ default: m.CustomFieldFormV2 })),
+);
 
 export const _CustomFieldModal = ({
   state,
@@ -25,6 +38,7 @@ export const _CustomFieldModal = ({
   const {
     translate: t,
     environment: { language },
+    internalExperiments,
   } = useWixPatternsContainer();
 
   const {
@@ -43,19 +57,29 @@ export const _CustomFieldModal = ({
     );
   }
 
+  const { fieldModalText } = state.fieldManagement;
+  const title =
+    mode === 'new' ? fieldModalText.addTitle : fieldModalText.editTitle;
+  const addSubtitle = mode === 'new' ? fieldModalText.addSubtitle : undefined;
+  const useV2Form = internalExperiments?.enabled('newFieldsModal');
+
   return (
     <CustomActionModal
       dataHook="custom-field-modal"
       state={state.modalState}
-      title={
-        mode === 'new'
-          ? t('cairo.customFields.addCustomField.modal.title')
-          : t('cairo.customFields.editCustomField.modal.title')
-      }
+      title={title}
       subtitle={
-        mode === 'new' && <CustomFieldModalSubtitle t={t} language={language} />
+        addSubtitle && <CustomFieldModalSubtitle subtitle={addSubtitle} />
+      }
+      content={
+        useV2Form ? (
+          <React.Suspense fallback={null}>
+            <CustomFieldFormV2 state={state} />
+          </React.Suspense>
+        ) : (
+          <CustomFieldForm state={state} />
+        )
       }
-      content={<CustomFieldForm state={state} />}
       primaryButtonText={
         <CustomFieldModalPrimaryButton
           state={state}
@@ -99,8 +123,10 @@ const Footnote: React.FC<FootnoteProps> = ({
   reportLearnMoreClick,
   t,
 }) => {
+  const isBmHarmonyTheme = useBmHarmonyTheme();
+
   return (
-    <Text size="small" dataHook="pii-footnote">
+    <Text size={isBmHarmonyTheme ? 'tiny' : 'small'} dataHook="pii-footnote">
       {t('cairo.customFields.addCustomField.modal.PII')}
       &nbsp;
       <a
@@ -116,30 +142,35 @@ const Footnote: React.FC<FootnoteProps> = ({
 };
 
 interface CustomFieldModalSubtitleProps {
-  t: Translate;
-  language: string;
+  subtitle: FieldModalSubtitle;
 }
 
 const CustomFieldModalSubtitle: React.FC<CustomFieldModalSubtitleProps> = ({
-  t,
-  language,
+  subtitle: { text, note, learnMore },
 }) => {
+  const isBmHarmonyTheme = useBmHarmonyTheme();
+  const textSize = isBmHarmonyTheme ? 'small' : 'medium';
+
   return (
     <Box direction="vertical">
-      <Text>{t('cairo.customFields.addCustomField.modal.subtitle')}</Text>
-      <Text>
-        {t('cairo.customFields.addCustomField.modal.subtitle.note')}
-        &nbsp;
-        <TextButton
-          as="a"
-          rel="noopener"
-          target="_blank"
-          href={`https://support.wix.com/${language}/article/about-custom-fields`}
-          dataHook="custom-field-modal-subtitle-learnmore"
-        >
-          {t('cairo.subtitle.learnMore')}
-        </TextButton>
-      </Text>
+      <Text size={textSize}>{text}</Text>
+      {(note || learnMore) && (
+        <Text size={textSize}>
+          {note}
+          {note && learnMore ? ' ' : null}
+          {learnMore && (
+            <TextButton
+              as="a"
+              rel="noopener"
+              target="_blank"
+              href={learnMore.href}
+              dataHook="custom-field-modal-subtitle-learnmore"
+            >
+              {learnMore.label}
+            </TextButton>
+          )}
+        </Text>
+      )}
     </Box>
   );
 };

package/src/components/CustomFieldModal/CustomFieldModal.uni.driver.ts

@@ -63,6 +63,11 @@ export function CustomFieldModalUniDriver(base: UniDriver, body: UniDriver) {
 
   const getFormTypeDriver = () =>
     DropdownUniDriver(body.$('[data-hook="custom-field-modal-type"]'), body);
+  const searchFieldType = (text: string) =>
+    getFormTypeDriver().inputDriver.enterText(text);
+  // Group headers are options too, so their titles come back in this list.
+  const getFieldTypeOptions = () =>
+    getFormTypeDriver().dropdownLayoutDriver.optionsContent();
   const getFormNameDriver = () =>
     InputUniDriver(body.$('[data-hook="custom-field-modal-name"]'), body);
   const getFormKeyDriver = () =>
@@ -234,6 +239,8 @@ export function CustomFieldModalUniDriver(base: UniDriver, body: UniDriver) {
     clickClose,
     clickCancel,
     clickAdvancedSettings,
+    searchFieldType,
+    getFieldTypeOptions,
     isInstalledAppsSectionVisible: () => getInstalledAppsSection().exists(),
     isSiteVisitorsSectionVisible: () => getSiteVisitorsSection().exists(),
     fillInCustomFieldForm,

package/src/components/CustomFieldModal/CustomFieldTypeDropdownV2.tsx

@@ -0,0 +1,131 @@
+import React from 'react';
+import { observer } from 'mobx-react-lite';
+import {
+  AutoComplete,
+  Box,
+  Input,
+  listItemSectionBuilder,
+  listItemSelectBuilder,
+} from '@wix/design-system';
+import { CustomFieldModalState } from '@wix/bex-core';
+import { useWixPatternsContainer } from '@wix/bex-core/react';
+import { getFieldTypeIcon } from '../../utils/fieldTypePrefixIcons';
+
+export interface CustomFieldTypeDropdownV2Props {
+  state: CustomFieldModalState;
+}
+
+export const _CustomFieldTypeDropdownV2 = (
+  props: CustomFieldTypeDropdownV2Props,
+) => {
+  const {
+    state: {
+      form: {
+        $: { type, name },
+      },
+      mode,
+      fieldManagement: { creatableFieldTypes },
+      generateUniqueKey,
+      setKeyFieldIfNotDirty,
+    },
+  } = props;
+
+  const { translate: t } = useWixPatternsContainer();
+
+  const [search, setSearch] = React.useState<string | null>(null);
+  const query = search?.trim().toLowerCase() ?? '';
+
+  const selectedType = creatableFieldTypes.find(
+    (option) => option.id === type.value,
+  );
+
+  const fieldTypeOptions = React.useMemo(() => {
+    const toOption = (option: (typeof creatableFieldTypes)[number]) =>
+      listItemSelectBuilder({
+        dataHook: `custom-field-modal-type-${option.id}`,
+        id: option.id,
+        prefix: (
+          <Box>
+            {getFieldTypeIcon({
+              fieldType: option.patternsType,
+              size: 'medium',
+            })}
+          </Box>
+        ),
+        title: option.label,
+        subtitle: option.subtitle,
+        label: option.label,
+      });
+
+    // While searching the list is flat — group headers would name groups whose
+    // other options have been filtered out.
+    if (query) {
+      return creatableFieldTypes
+        .filter((option) => option.label.toLowerCase().includes(query))
+        .map(toOption);
+    }
+
+    const groups = creatableFieldTypes.reduce<string[]>((labels, option) => {
+      const label = option.group;
+      if (label && !labels.includes(label)) {
+        labels.push(label);
+      }
+      return labels;
+    }, []);
+
+    if (groups.length === 0) {
+      return creatableFieldTypes.map(toOption);
+    }
+
+    const grouped = groups.flatMap((label) => [
+      listItemSectionBuilder({
+        id: `custom-field-modal-type-group-${label}`,
+        type: 'title',
+        title: label,
+      }),
+      ...creatableFieldTypes
+        .filter((option) => option.group === label)
+        .map(toOption),
+    ]);
+    const ungrouped = creatableFieldTypes
+      .filter((option) => !option.group)
+      .map(toOption);
+    return [...grouped, ...ungrouped];
+  }, [creatableFieldTypes, query]);
+
+  return (
+    <AutoComplete
+      dataHook="custom-field-modal-type"
+      disabled={mode === 'edit'}
+      value={search ?? selectedType?.label ?? ''}
+      selectedId={type.value}
+      prefix={
+        search === null && selectedType ? (
+          <Input.IconAffix>
+            {getFieldTypeIcon({
+              fieldType: selectedType.patternsType,
+              size: 'medium',
+            })}
+          </Input.IconAffix>
+        ) : undefined
+      }
+      onChange={(e) => setSearch(e.target.value)}
+      onSelect={({ id }) => {
+        setSearch(null);
+        type.onChange(String(id));
+        setKeyFieldIfNotDirty(generateUniqueKey(name.value));
+      }}
+      // Closing without picking anything drops the search text so the input goes
+      // back to showing the selected type.
+      onClose={() => setSearch(null)}
+      popoverProps={{ appendTo: 'window', zIndex: 5001 }}
+      placeholder={t(
+        'cairo.customFields.addCustomField.modal.fieldType.placeholder',
+      )}
+      emptyStateMessage={t('cairo.emptyState.subtitle.nothingMatchesCriteria')}
+      options={fieldTypeOptions}
+    />
+  );
+};
+
+export const CustomFieldTypeDropdownV2 = observer(_CustomFieldTypeDropdownV2);

package/src/components/CustomFieldsPanel/FieldsSourceAddFieldCTA.tsx

@@ -4,6 +4,7 @@ import { AddItem, Box, Divider } from '@wix/design-system';
 import { useWixPatternsContainer } from '@wix/bex-core/react';
 import type { CollectionFieldsSourceState } from '../../state/CollectionFieldsSourceState';
 import { CustomFieldsDisabledHint } from '../CustomFields';
+import { useBmHarmonyTheme } from '../../hooks/useBmHarmonyTheme';
 
 function _FieldsSourceAddFieldCTA({
   source,
@@ -11,6 +12,7 @@ function _FieldsSourceAddFieldCTA({
   source: CollectionFieldsSourceState;
 }) {
   const { translate: t } = useWixPatternsContainer();
+  const isHarmonyTheme = useBmHarmonyTheme();
   const fm = source.fieldsSource.fieldManagement;
 
   if (!fm?.canAddFields) {
@@ -19,7 +21,7 @@ function _FieldsSourceAddFieldCTA({
 
   return (
     <Box direction="vertical" width="100%">
-      <Divider direction="horizontal" />
+      {!isHarmonyTheme && <Divider direction="horizontal" />}
       <Box
         padding="SP4"
         width="100%"

package/src/components/CustomFieldsPanel/ManageFieldsCTAButton.tsx

@@ -5,7 +5,7 @@ import { CustomFieldOrigin, withoutDefaults } from '@wix/bex-core';
 import { observer } from 'mobx-react-lite';
 import { CustomFieldsPanelEntry } from './CustomFieldsPanelEntry';
 import { cairoFiltersPanelUsed } from '@wix/bex-core/bi';
-import { SettingsSmall } from '@wix/wix-ui-icons-common';
+import { SettingsSmall } from '@wix/wix-ui-icons-common/lazy';
 import { CustomFieldsDisabledTooltip } from '../CustomFields';
 
 export interface ManageFieldsCTAButtonProps {

package/src/components/CustomFieldsWidget/ActionButtons.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Box, Button } from '@wix/design-system';
 import { observer } from 'mobx-react-lite';
-import { Add } from '@wix/wix-ui-icons-common';
+import { Add } from '@wix/wix-ui-icons-common/lazy';
 import { CustomFieldsWidgetState } from '../../state';
 import { ManageFieldsCTAButton } from '../CustomFieldsPanel/ManageFieldsCTAButton';
 import { CustomFieldsDisabledTooltip } from '../CustomFields';

package/src/components/CustomFieldsWidget/CustomFieldsViewWidgetSection.tsx

@@ -12,7 +12,7 @@ import React from 'react';
 import { useWixPatternsContainer } from '@wix/bex-core/react';
 import { observer } from 'mobx-react-lite';
 import { FileCardList } from '../FileCard/FileCardList';
-import { getDateWithoutTimezone } from '../../utils/datesUtil';
+import { getDateWithoutTimezone, parseDate } from '../../utils/datesUtil';
 
 interface CustomFieldsViewWidgetSectionProps {
   customFields: CustomField[];
@@ -77,12 +77,18 @@ const _CustomFieldsViewWidgetSection = ({
         const files = Array.isArray(value) ? value : [value];
         return <FileCardList files={files} showDownloadCTA showDetails />;
       }
-      case 'date':
-        newValue = dateFormatters.medium.format(getDateWithoutTimezone(value));
+      // A value that isn't a date renders blank rather than throwing out of
+      // render — see FieldCell's date cases.
+      case 'date': {
+        const date = getDateWithoutTimezone(value);
+        newValue = date ? dateFormatters.medium.format(date) : '';
         break;
-      case 'dateTime':
-        newValue = dateFormatters.mediumTime.format(new Date(value));
+      }
+      case 'dateTime': {
+        const dateTime = parseDate(value);
+        newValue = dateTime ? dateFormatters.mediumTime.format(dateTime) : '';
         break;
+      }
       case 'checkbox':
         newValue = value
           ? t('cairo.customFields.booleanValue.true')

package/src/components/CustomFieldsWidget/CustomFieldsWidgetCard.tsx

@@ -6,7 +6,7 @@ import { Box, Card, InfoIcon } from '@wix/design-system';
 import { Heading } from '../Heading';
 import { useWixPatternsContainer } from '@wix/bex-core/react';
 import { CustomFieldsWidgetContentLazy } from './CustomFieldsWidgetContentLazy';
-import { Refresh } from '@wix/wix-ui-icons-common';
+import { Refresh } from '@wix/wix-ui-icons-common/lazy';
 import { CustomFieldsWidgetProps } from './types';
 import { useWidgetPageStatus } from '../useWidgetPageStatus';
 

package/src/components/CustomFieldsWidget/CustomFieldsWidgetInline.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { observer } from 'mobx-react-lite';
 import type { CustomFieldsWidgetState } from '../../state';
-import { Refresh as RefreshIcon } from '@wix/wix-ui-icons-common';
+import { Refresh as RefreshIcon } from '@wix/wix-ui-icons-common/lazy';
 import { LoadingErrorState } from '../ErrorState';
 import { CustomFieldsWidgetContentLazy } from './CustomFieldsWidgetContentLazy';
 import { CustomFieldsWidgetProps } from './types';

package/src/components/CustomFieldsWidget/ErrorStateContent.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { EmptyState, TextButton } from '@wix/design-system';
 import { observer } from 'mobx-react-lite';
-import { Refresh } from '@wix/wix-ui-icons-common';
+import { Refresh } from '@wix/wix-ui-icons-common/lazy';
 import { CustomFieldsWidgetState } from '../../state';
 import { CustomFieldsViewWidgetState } from '@wix/bex-core';
 

package/src/components/DataExtension/DataExtensionImportFieldEditor.tsx

@@ -4,15 +4,16 @@ import { reaction } from 'mobx';
 import { CustomFieldModalState, type ImportState } from '@wix/bex-core';
 import { useWixPatternsContainer } from '@wix/bex-core/react';
 import { CustomFieldModal } from '../CustomFieldModal';
-import { mappingToFieldDraft } from './platformizedImportRef';
+import { mappingToFieldDraft } from './dataExtensionFieldDraft';
 
 /**
- * The DataExtension create/edit-field modal for the import flow, returned by
- * `usePlatformizedImport` as `renderFieldEditor`. Reuses `CustomFieldModal` in
- * side-effect-free mode (`onSubmit`) — on confirm it hands the draft to the
- * import (which batches creation pre-upload) instead of creating the field. It
- * opens/pre-fills from `state.editingMapping` and clears `state.editingHeader`
- * on close, mirroring the CMS editor.
+ * The DataExtension create/edit-field modal for the import flow. `ImportButton`
+ * picks and lazy-loads it for a platformized import (from the config's
+ * `dataSource`). Reuses `CustomFieldModal` in side-effect-free mode (`onSubmit`)
+ * — on confirm it hands the draft to the import (which batches creation
+ * pre-upload) instead of creating the field. It opens/pre-fills from
+ * `state.editingMapping` and clears `state.editingHeader` on close, mirroring the
+ * CMS editor.
  */
 const _DataExtensionImportFieldEditor = ({ state }: { state: ImportState }) => {
   const container = useWixPatternsContainer();

package/src/components/DataExtension/dataExtensionFieldDraft.ts

@@ -0,0 +1,45 @@
+import {
+  toDataExtensionFieldType,
+  type FieldDraft,
+  type FieldManagement,
+  type FieldPermissions,
+  type NewFieldConfig,
+  type NewFieldType,
+} from '@wix/bex-core';
+
+// Resolve the four FieldDraft permission booleans from a FieldPermissions bag,
+// defaulting to read-for-apps / hidden-from-visitors when a slot is unset.
+const resolvePermissions = (permissions?: FieldPermissions) => ({
+  readApps: permissions?.installedApps?.defaultRead ?? true,
+  writeApps: permissions?.installedApps?.defaultWrite ?? true,
+  readUsers: permissions?.siteVisitors?.defaultRead ?? false,
+  writeUsers: permissions?.siteVisitors?.defaultWrite ?? false,
+});
+
+type NewFieldMapping = {
+  fieldType: NewFieldType;
+  displayName?: string;
+  config?: NewFieldConfig;
+};
+
+/**
+ * Turns a column's `new` mapping into the DataExtension `FieldDraft` used to both
+ * create the field and pre-fill the editor. The precise type comes from a prior
+ * edit (`config.deType`) or the default for the detected type; permissions come
+ * from a prior edit or the source defaults. Key derives from the resolved column
+ * (creation) or the name (editor).
+ */
+export const mappingToFieldDraft = (
+  mapping: NewFieldMapping,
+  key: string,
+  name: string,
+  fieldManagement: FieldManagement,
+): FieldDraft => ({
+  type: mapping.config?.deType ?? toDataExtensionFieldType(mapping.fieldType),
+  key,
+  name,
+  containsPii: mapping.config?.isPii ?? false,
+  ...resolvePermissions(
+    mapping.config?.permissions ?? fieldManagement.permissions,
+  ),
+});

package/src/components/DataExtension/dataExtensionFieldManagement.ts

@@ -168,6 +168,21 @@ export const dataExtensionFieldManagement = ({
     get supportsPii() {
       return dataExtension.containsPii;
     },
+    get fieldModalText() {
+      const { translate: t, environment } = dataExtension.container;
+      return {
+        addTitle: t('cairo.customFields.addCustomField.modal.title'),
+        editTitle: t('cairo.customFields.editCustomField.modal.title'),
+        addSubtitle: {
+          text: t('cairo.customFields.addCustomField.modal.subtitle'),
+          note: t('cairo.customFields.addCustomField.modal.subtitle.note'),
+          learnMore: {
+            label: t('cairo.subtitle.learnMore'),
+            href: `https://support.wix.com/${environment.language}/article/about-custom-fields`,
+          },
+        },
+      };
+    },
     addField: upsertField,
     editField: (_fieldId, draft) => upsertField(draft),
     getFieldDraft: (fieldId) =>

package/src/components/DataExtension/manageCustomFieldsPageAction.tsx

@@ -1,7 +1,7 @@
 import { CollectionPageState, WixPatternsContainer } from '@wix/bex-core';
 import { MoreActionsItem } from '../MoreActions';
 import React from 'react';
-import { AdjustSmall } from '@wix/wix-ui-icons-common';
+import { AdjustSmall } from '@wix/wix-ui-icons-common/lazy';
 
 export function manageCustomFieldsPageAction({
   pageState,

package/src/components/DateRangePicker/DateRangePicker.tsx

@@ -10,7 +10,7 @@ import {
   TimeInputProps,
 } from '@wix/design-system';
 import { DateRangePickerState } from '../../state';
-import { TimeSmall } from '@wix/wix-ui-icons-common';
+import { TimeSmall } from '@wix/wix-ui-icons-common/lazy';
 import { useWindowFlipPopoverProps } from '../../utils/useWindowFlipPopoverProps';
 import { usePatternsTheme } from '../../themes/PatternsThemeProvider';