@wix/patterns 1.430.0 → 1.431.0

package/src/components/CustomColumnsPanel/ColumnsList.tsx

@@ -6,6 +6,7 @@ import { Column } from '../../model';
 import { Box } from '@wix/design-system';
 import { addEventListener } from '@wix/bex-core/util';
 import { ColumnListTableListItem } from './ColumnListTableListItem';
+import { useBmHarmonyTheme } from '../../hooks/useBmHarmonyTheme';
 
 export interface ColumnsListProps<T, F extends FiltersMap> {
   state: CustomColumnsPanelStateBase<T, F>;
@@ -15,6 +16,7 @@ function _ColumnsList<T, F extends FiltersMap>(props: ColumnsListProps<T, F>) {
   const { state } = props;
   const { columnsCollection, dragAndDrop } = state;
   const hasSearchValue = state.searchValue.trim().length > 0;
+  const isHarmonyTheme = useBmHarmonyTheme();
 
   useEffect(() => {
     if (dragAndDrop == null) {
@@ -40,14 +42,18 @@ function _ColumnsList<T, F extends FiltersMap>(props: ColumnsListProps<T, F>) {
   }, []);
 
   const renderItem = useCallback(
-    (column: Column, index: number, { length }: { length: number }) => {
+    (column: Column, index: number) => {
       const itemContent = (
         <ColumnListTableListItem
           key={column.id}
           index={index}
           state={state}
           column={column}
-          showDivider={index < length - 1}
+          showDivider={
+            isHarmonyTheme
+              ? false
+              : index < columnsCollection.result.items.length - 1
+          }
         />
       );
 
@@ -69,14 +75,14 @@ function _ColumnsList<T, F extends FiltersMap>(props: ColumnsListProps<T, F>) {
 
       return itemContent;
     },
-    [hasSearchValue],
+    [hasSearchValue, isHarmonyTheme],
   );
 
   let child = (
     <Box
       direction="vertical"
       dataHook="custom-columns-list"
-      backgroundColor="D60"
+      {...(isHarmonyTheme ? { paddingLeft: 'SP2', paddingRight: 'SP2' } : {})}
     >
       {columnsCollection.result.items.map(renderItem)}
     </Box>
@@ -104,7 +110,7 @@ function _ColumnsList<T, F extends FiltersMap>(props: ColumnsListProps<T, F>) {
             state={dragAndDrop}
             renderItem={(index) => {
               const item = columnsCollection.result.items[index];
-              return item ? renderItem(item, index, { length: 0 }) : null;
+              return item ? renderItem(item, index) : null;
             }}
           />
         </>

package/src/components/CustomColumnsPanel/CustomColumnsEntityPageContext.ts

@@ -0,0 +1,18 @@
+import { createContext, useContext } from 'react';
+import { CustomColumnsEntityPageState } from '../../state/CustomColumnsEntityPageState';
+import { assertContextValue } from '../../createContext';
+
+/** Carries the panel's state from the mount to the registered panel component,
+ *  which the side-panel machinery renders with no props. Per mount, so two
+ *  panels on one page stay independent. */
+export const CustomColumnsEntityPageContext =
+  createContext<CustomColumnsEntityPageState | null>(null);
+
+export const CustomColumnsEntityPageProvider =
+  CustomColumnsEntityPageContext.Provider;
+
+export const useCustomColumnsEntityPageContext = () => {
+  const value = useContext(CustomColumnsEntityPageContext);
+  assertContextValue('CustomColumnsEntityPageProvider', value);
+  return value;
+};

package/src/components/CustomColumnsPanel/CustomColumnsEntityPagePanelEntry.tsx

@@ -1,20 +1,14 @@
 import React from 'react';
 import { observer } from 'mobx-react-lite';
 import { CustomColumnsPanel } from './CustomColumnsPanel';
-import { CustomColumnsEntityPageState } from '../../state/CustomColumnsEntityPageState';
+import { useCustomColumnsEntityPageContext } from './CustomColumnsEntityPageContext';
 
 function _CustomColumnsEntityPagePanelEntry() {
-  const state = CustomColumnsEntityPagePanelEntry.state;
-
-  if (!state) {
-    return null;
-  }
+  const state = useCustomColumnsEntityPageContext();
 
   return <CustomColumnsPanel state={state} />;
 }
 
 export const CustomColumnsEntityPagePanelEntry = observer(
   _CustomColumnsEntityPagePanelEntry,
-) as typeof _CustomColumnsEntityPagePanelEntry & {
-  state?: CustomColumnsEntityPageState;
-};
+);

package/src/components/CustomColumnsPanel/CustomColumnsEntityPagePanelMount.tsx

@@ -6,6 +6,7 @@ import { CustomColumnsEntityPageState } from '../../state/CustomColumnsEntityPag
 import { WixPatternsModalsContainer } from '../WixPatternsModalsContainer';
 import { WixPatternsPanelModalsContainer } from '../WixPatternsPanelModalsContainer';
 import { CustomColumnsEntityPagePanelEntry } from './CustomColumnsEntityPagePanelEntry';
+import { CustomColumnsEntityPageProvider } from './CustomColumnsEntityPageContext';
 
 export interface CustomColumnsEntityPagePanelMountProps {
   state: CustomColumnsEntityPageState;
@@ -19,7 +20,6 @@ function _CustomColumnsEntityPagePanelMount({
   const { modalsContainerRef, stackingRootRef } = usePageContext();
 
   useEffect(() => {
-    CustomColumnsEntityPagePanelEntry.state = state;
     panels.registerSidePanel(
       'customColumns',
       CustomColumnsEntityPagePanelEntry,
@@ -27,16 +27,23 @@ function _CustomColumnsEntityPagePanelMount({
     return panels.init();
   }, []);
 
-  if (isPanelLayout) {
-    return <WixPatternsPanelModalsContainer state={panels} />;
-  }
-
+  // The panel component is registered by type and rendered with no props, so it
+  // reads its state from this provider — one per mount, which keeps two panels
+  // on the same page independent.
   return (
-    <WixPatternsModalsContainer
-      rootRef={stackingRootRef}
-      anchorRef={useRelativeSidePanel ? stackingRootRef : modalsContainerRef}
-      state={panels}
-    />
+    <CustomColumnsEntityPageProvider value={state}>
+      {isPanelLayout ? (
+        <WixPatternsPanelModalsContainer state={panels} />
+      ) : (
+        <WixPatternsModalsContainer
+          rootRef={stackingRootRef}
+          anchorRef={
+            useRelativeSidePanel ? stackingRootRef : modalsContainerRef
+          }
+          state={panels}
+        />
+      )}
+    </CustomColumnsEntityPageProvider>
   );
 }
 

package/src/components/CustomColumnsPanel/CustomColumnsNoResults.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { observer } from 'mobx-react-lite';
 import { Box, Text, TextButton } from '@wix/design-system';
-import { Revert } from '@wix/wix-ui-icons-common';
+import { Revert } from '@wix/wix-ui-icons-common/lazy';
 import { CustomColumnsPanelStateBase } from '../../state/CustomColumnsPanelStateBase';
 import { FiltersMap } from '@wix/bex-core';
 import { CollectionEmptyStateBase } from '../CollectionEmptyStateBase';

package/src/components/CustomColumnsPanel/CustomColumnsPanel.tsx

@@ -4,6 +4,7 @@ import { CustomColumnsPanelStateBase } from '../../state/CustomColumnsPanelState
 import { FiltersMap } from '@wix/bex-core';
 import { useWixPatternsContainer } from '@wix/bex-core/react';
 import { observer } from 'mobx-react-lite';
+import { useBmHarmonyTheme } from '../../hooks/useBmHarmonyTheme';
 import { ColumnsList } from './ColumnsList';
 import { CustomColumnsSearch } from './CustomColumnsSearch';
 import { CustomColumnsNoResults } from './CustomColumnsNoResults';
@@ -30,6 +31,7 @@ export function _CustomColumnsPanel<T, F extends FiltersMap>({
 }: CustomColumnsPanelProps<T, F>) {
   const entered = useRafRender();
   const { translate: t } = useWixPatternsContainer();
+  const isHarmonyTheme = useBmHarmonyTheme();
 
   const { dragAndDrop, collectionFieldsSource } = state;
   const archive = collectionFieldsSource?.fieldsSource.archive;
@@ -37,7 +39,8 @@ export function _CustomColumnsPanel<T, F extends FiltersMap>({
     collectionFieldsSource?.customFieldsPanel.deleteFieldModal;
   const schemaCtx = useSchemaContext();
   const isSchema = !!schemaCtx?.schema;
-  const isEditable = !!collectionFieldsSource || isSchema;
+  const isEditable =
+    !!collectionFieldsSource || isSchema || state.isFieldsEditable;
 
   useEffect(() => state.init(), []);
 
@@ -73,7 +76,7 @@ export function _CustomColumnsPanel<T, F extends FiltersMap>({
       >
         <SidePanel.Header title={t(titleKey)} subtitle={t(subtitleKey)}>
           {shouldShowSearch && (
-            <Box padding="0 SP3 SP2 SP3">
+            <Box padding={isHarmonyTheme ? '0 SP4 SP2 SP4' : '0 SP3 SP2 SP3'}>
               <CustomColumnsSearch state={state} />
             </Box>
           )}
@@ -91,16 +94,29 @@ export function _CustomColumnsPanel<T, F extends FiltersMap>({
             <CustomColumnsNoResults state={state} />
           ) : (
             <>
-              {archive?.shouldDisplay && deleteFieldModal && (
-                <Suspense fallback={null}>
-                  <ArchivedItemsCTAButton
-                    archive={archive}
-                    deleteFieldModal={deleteFieldModal}
-                    onCloseSidePanel={() => state.onClose()}
-                    dataHook="custom-columns"
-                  />
-                </Suspense>
-              )}
+              {archive?.shouldDisplay &&
+                deleteFieldModal &&
+                (isHarmonyTheme ? (
+                  <Box direction="vertical" marginLeft="SP2" marginRight="SP2">
+                    <Suspense fallback={null}>
+                      <ArchivedItemsCTAButton
+                        archive={archive}
+                        deleteFieldModal={deleteFieldModal}
+                        onCloseSidePanel={() => state.onClose()}
+                        dataHook="custom-columns"
+                      />
+                    </Suspense>
+                  </Box>
+                ) : (
+                  <Suspense fallback={null}>
+                    <ArchivedItemsCTAButton
+                      archive={archive}
+                      deleteFieldModal={deleteFieldModal}
+                      onCloseSidePanel={() => state.onClose()}
+                      dataHook="custom-columns"
+                    />
+                  </Suspense>
+                ))}
               <ColumnsList state={state} />
             </>
           )}

package/src/components/CustomColumnsPanel/CustomColumnsSearch.tsx

@@ -4,6 +4,7 @@ import { observer } from 'mobx-react-lite';
 import { CustomColumnsPanelStateBase } from '../../state/CustomColumnsPanelStateBase';
 import { FiltersMap } from '@wix/bex-core';
 import { useWixPatternsContainer } from '@wix/bex-core/react';
+import { useBmHarmonyTheme } from '../../hooks/useBmHarmonyTheme';
 
 export interface CustomColumnsSearchProps<T, F extends FiltersMap> {
   state: CustomColumnsPanelStateBase<T, F>;
@@ -13,6 +14,7 @@ export function _CustomColumnsSearch<T, F extends FiltersMap>({
   state,
 }: CustomColumnsSearchProps<T, F>) {
   const { translate: t } = useWixPatternsContainer();
+  const isHarmonyTheme = useBmHarmonyTheme();
   const searchInputRef = useRef<Search>(null);
 
   useEffect(() => {
@@ -31,6 +33,7 @@ export function _CustomColumnsSearch<T, F extends FiltersMap>({
       ref={searchInputRef}
       dataHook="custom-columns-search"
       size="small"
+      border={isHarmonyTheme ? 'standard' : undefined}
       value={state.searchValue}
       onChange={(e) => {
         state.setSearchValue(e.target.value);

package/src/components/CustomColumnsPanel/FieldIndications.tsx

@@ -3,7 +3,7 @@ import { Badge, Box, Tooltip } from '@wix/design-system';
 import {
   LockLockedFilledSmall,
   FlagFilledSmall,
-} from '@wix/wix-ui-icons-common';
+} from '@wix/wix-ui-icons-common/lazy';
 import { useWixPatternsContainer } from '@wix/bex-core/react';
 import { observer } from 'mobx-react-lite';
 import { Column } from '../../model';

package/src/components/CustomFieldModal/CustomFieldForm.tsx

@@ -17,7 +17,11 @@ import {
 import { useWixPatternsContainer } from '@wix/bex-core/react';
 import { CustomFieldModalState } from '@wix/bex-core';
 import { CustomFieldTypeDropdown } from './CustomFieldTypeDropdown';
-import { ChevronDown, ChevronUp, InfoCircle } from '@wix/wix-ui-icons-common';
+import {
+  ChevronDown,
+  ChevronUp,
+  InfoCircle,
+} from '@wix/wix-ui-icons-common/lazy';
 import { Trans } from '../Trans';
 import { runInAction } from 'mobx';
 import { PiiFormFields } from './CustomFieldFormPiiFields';

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,