@wix/patterns 1.436.0 → 1.438.0

package/src/components/CustomFieldModal/CustomFieldForm.tsx

@@ -1,61 +1,48 @@
 import React, { useEffect } from 'react';
 import { observer } from 'mobx-react-lite';
 import {
+  Accordion,
   Box,
   Cell,
-  Checkbox,
-  Collapse,
   Divider,
   FloatingNotification,
   FormField,
-  InfoIcon,
   Input,
   Layout,
   Text,
-  TextButton,
 } from '@wix/design-system';
 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/lazy';
-import { Trans } from '../Trans';
+import { InfoCircle } from '@wix/wix-ui-icons-common';
+import { StatusAlertFilledSmall } from '@wix/wix-ui-icons-common/lazy';
 import { runInAction } from 'mobx';
+import { CustomFieldTypeDropdown } from './CustomFieldTypeDropdown';
 import { PiiFormFields } from './CustomFieldFormPiiFields';
+import { CustomFieldFormPermissions } from './CustomFieldFormPermissions';
 
 export interface CustomFieldFormProps {
   state: CustomFieldModalState;
 }
 
+/** Cancels the modal's content padding so the section below spans the full width. */
+const fullBleed =
+  'calc(-1 * var(--wds-custom-modal-content-padding-horizontal, 24px))';
+
 export const _CustomFieldForm = (props: CustomFieldFormProps) => {
   const { state } = props;
   const {
     form: {
-      $: {
-        key,
-        type,
-        name,
-        readApps,
-        readUsers,
-        writeApps,
-        writeUsers,
-        containsPii,
-      },
+      $: { key, type, name, containsPii },
     },
     errorToastConfig,
-    disabledFields: { permissions },
     mode,
     settings,
     customFieldModalBiReporter,
     generateUniqueKey,
     setKeyFieldIfNotDirty,
   } = state;
-  const defaultPermissions = state.fieldManagement.fieldModal.permissions;
-  const { reportAdvancedSettingsClick, reportKeyFormFieldChange } =
-    customFieldModalBiReporter;
+  const { fieldModal } = state.fieldManagement;
+  const SettingsSection = state.settingsSection?.Component;
 
   const {
     translate: t,
@@ -92,9 +79,9 @@ export const _CustomFieldForm = (props: CustomFieldFormProps) => {
           />
         </Box>
       )}
-      <Box paddingLeft="SP1" paddingRight="SP1" direction="vertical">
+      <Box direction="vertical">
         <Layout>
-          <Cell span={6}>
+          <Cell span={12}>
             <FormField
               dataHook="custom-field-modal-field-type"
               required
@@ -132,7 +119,38 @@ export const _CustomFieldForm = (props: CustomFieldFormProps) => {
               />
             </FormField>
           </Cell>
-          {state.fieldManagement.fieldModal.supportsPii && (
+          <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.typeSupportsPii && (
             <PiiFormFields
               containsPii={{
                 value: containsPii.value,
@@ -140,230 +158,66 @@ export const _CustomFieldForm = (props: CustomFieldFormProps) => {
               }}
               mode={mode}
               language={language}
+              piiWarning={state.piiWarning}
             />
           )}
         </Layout>
-        <Box marginTop="SP4">
-          <TextButton
-            dataHook="custom-field-modal-settings-button"
-            size="small"
-            suffixIcon={settings.isOn ? <ChevronUp /> : <ChevronDown />}
-            onClick={() => settings.toggle()}
+      </Box>
+      {state.showSettings && (
+        <>
+          <Box marginTop="SP4" marginLeft={fullBleed} marginRight={fullBleed}>
+            <Divider />
+          </Box>
+          <Box
+            direction="vertical"
+            marginLeft={fullBleed}
+            marginRight={fullBleed}
           >
-            {t('cairo.customFields.addCustomField.modal.advancedSettings')}
-          </TextButton>
-        </Box>
-        <Collapse
-          open={settings.isOn}
-          onExpandAnimationEnd={() => {
-            reportAdvancedSettingsClick('Open');
-          }}
-          onCollapseAnimationEnd={() => {
-            reportAdvancedSettingsClick('Close');
-          }}
-        >
-          {(!defaultPermissions?.installedApps?.hide ||
-            !defaultPermissions?.siteVisitors?.hide) && (
-            <Box marginTop="SP4" direction="vertical" width="320px">
-              <Text size="small">
-                {t(
-                  'cairo.customFields.addCustomField.modal.advancedSettings.readPermissions',
-                )}
-              </Text>
-              <Text size="tiny" light secondary>
-                {t(
-                  'cairo.customFields.addCustomField.modal.advancedSettings.readPermissions.tooltip',
-                )}
-              </Text>
-            </Box>
-          )}
-          {!defaultPermissions?.installedApps?.hide && (
-            <Box marginTop="SP3" dataHook="custom-field-modal-apps-section">
-              <Layout>
-                <Cell span={4}>
-                  <Box verticalAlign="middle" gap="SP1">
-                    <Text size="small">
-                      {t(
-                        'cairo.customFields.addCustomField.modal.advancedSettings.externalApps',
-                      )}
-                    </Text>
-                    <InfoIcon
-                      size="small"
-                      content={
-                        <Trans i18nKey="cairo.customFields.addCustomField.modal.advancedSettings.externalApps.tooltip" />
-                      }
-                    />
-                  </Box>
-                </Cell>
-                <Cell span={2}>
-                  <Checkbox
-                    dataHook="custom-field-modal-read-apps"
-                    disabled={mode === 'edit' && permissions.read.apps}
-                    size="small"
-                    onChange={() => {
-                      readApps.onChange(!readApps.value);
-                    }}
-                    checked={readApps.value}
-                  >
-                    {t(
-                      'cairo.customFields.addCustomField.modal.advancedSettings.read',
-                    )}
-                  </Checkbox>
-                </Cell>
-                <Cell span={2}>
-                  <Checkbox
-                    dataHook="custom-field-modal-write-apps"
-                    disabled={mode === 'edit' && permissions.write.apps}
-                    size="small"
-                    onChange={() => {
-                      writeApps.onChange(!writeApps.value);
-                    }}
-                    checked={writeApps.value}
-                  >
-                    {t(
-                      'cairo.customFields.addCustomField.modal.advancedSettings.write',
-                    )}
-                  </Checkbox>
-                </Cell>
-              </Layout>
-            </Box>
-          )}
-          {!defaultPermissions?.siteVisitors?.hide && (
-            <>
-              <Box marginTop="SP2" dataHook="custom-field-modal-users-section">
-                <Layout>
-                  <Cell span={4}>
-                    <Box verticalAlign="middle" gap="SP1">
-                      <Text size="small">
-                        {t(
-                          'cairo.customFields.addCustomField.modal.advancedSettings.siteVisitors',
-                        )}
-                      </Text>
-                      <InfoIcon
-                        size="small"
-                        content={
-                          <Trans
-                            i18nKey="cairo.customFields.addCustomField.modal.advancedSettings.siteVisitors.tooltip"
-                            components={{
-                              learnMore: (
-                                <TextButton
-                                  underline="always"
-                                  skin="light"
-                                  size="small"
-                                  as="a"
-                                  rel="noopener"
-                                  target="_blank"
-                                  href={`https://support.wix.com/${language}/article/cms-about-datasets`}
-                                />
-                              ),
-                            }}
-                          />
-                        }
-                      />
-                    </Box>
-                  </Cell>
-                  <Cell span={2}>
-                    <Checkbox
-                      dataHook="custom-field-modal-read-users"
-                      disabled={mode === 'edit' && permissions.read.users}
-                      size="small"
-                      onChange={() => {
-                        readUsers.onChange(!readUsers.value);
-                      }}
-                      checked={readUsers.value}
+            <Accordion
+              dataHook="custom-field-modal-settings-accordion"
+              skin="standard"
+              hideShadow
+              horizontalPadding="large"
+              items={[
+                {
+                  title:
+                    fieldModal.text.settingsLabel ??
+                    t(
+                      'cairo.customFields.addCustomField.modal.advancedSettings',
+                    ),
+                  toggleIconPlacement: 'start',
+                  suffix: state.settingsHasError ? (
+                    <Box
+                      verticalAlign="middle"
+                      color="R10"
+                      dataHook="custom-field-modal-settings-error"
                     >
-                      {t(
-                        'cairo.customFields.addCustomField.modal.advancedSettings.read',
+                      <StatusAlertFilledSmall />
+                    </Box>
+                  ) : undefined,
+                  open: settings.isOn,
+                  onToggle: () => {
+                    settings.toggle();
+                    customFieldModalBiReporter.reportAdvancedSettingsClick(
+                      settings.isOn ? 'Open' : 'Close',
+                    );
+                  },
+                  children: (
+                    <Box direction="vertical" gap="SP4">
+                      {fieldModal.permissions && (
+                        <CustomFieldFormPermissions state={state} />
                       )}
-                    </Checkbox>
-                  </Cell>
-                  <Cell span={2}>
-                    <Checkbox
-                      dataHook="custom-field-modal-write-users"
-                      disabled={mode === 'edit' && permissions.write.users}
-                      size="small"
-                      onChange={() => {
-                        writeUsers.onChange(!writeUsers.value);
-                      }}
-                      checked={writeUsers.value}
-                    >
-                      {t(
-                        'cairo.customFields.addCustomField.modal.advancedSettings.write',
+                      {SettingsSection && (
+                        <SettingsSection fieldType={type.value} />
                       )}
-                    </Checkbox>
-                  </Cell>
-                </Layout>
-              </Box>
-              <Box>
-                <Text size="tiny" light secondary dataHook="permissions-note">
-                  <Trans
-                    i18nKey="cairo.customFields.addCustomField.modal.advancedSettings.siteVisitors.note"
-                    components={{
-                      learnMore: (
-                        <TextButton
-                          size="tiny"
-                          as="a"
-                          rel="noopener"
-                          target="_blank"
-                          href={`https://support.wix.com/${language}/article/content-manager-connecting-elements-to-a-collection-using-a-dataset`}
-                        />
-                      ),
-                    }}
-                  />
-                </Text>
-              </Box>
-            </>
-          )}
-          <Box direction="vertical">
-            <Box marginTop="SP3" marginBottom="SP3">
-              <Divider />
-            </Box>
-
-            <FormField
-              dataHook="custom-field-modal-field-key"
-              required
-              label={t(
-                'cairo.customFields.addCustomField.modal.advancedSettings.key.title',
-              )}
-              status={key.hasError ? 'error' : undefined}
-              statusMessage={key.error}
-            >
-              <Layout>
-                <Cell span={6}>
-                  <Input
-                    dataHook="custom-field-modal-key"
-                    disabled={mode === 'edit'}
-                    value={key.value}
-                    onChange={(e) => {
-                      key.onChange(e.target.value.toLowerCase());
-                      reportKeyFormFieldChange();
-                    }}
-                    placeholder={t(
-                      'cairo.customFields.addCustomField.modal.advancedSettings.key.placeholder',
-                    )}
-                  />
-                </Cell>
-              </Layout>
-            </FormField>
-
-            {!key.hasError && (
-              <Box marginTop="SP1">
-                <Text
-                  size="tiny"
-                  secondary
-                  dataHook="custom-field-modal-fieldKey-tooltip"
-                >
-                  {mode === 'new'
-                    ? t(
-                        'cairo.customFields.addCustomField.modal.advancedSettings.key.tooltip',
-                      )
-                    : t('cairo.customFields.editCustomField.fieldKey.tooltip')}
-                </Text>
-              </Box>
-            )}
+                    </Box>
+                  ),
+                },
+              ]}
+            />
           </Box>
-        </Collapse>
-      </Box>
+        </>
+      )}
     </Box>
   );
 };

package/src/components/CustomFieldModal/{CustomFieldFormV2Permissions.tsx → CustomFieldFormPermissions.tsx}

@@ -13,7 +13,7 @@ import { useWixPatternsContainer } from '@wix/bex-core/react';
 import { CustomFieldModalState } from '@wix/bex-core';
 import { Trans } from '../Trans';
 
-export interface CustomFieldFormV2PermissionsProps {
+export interface CustomFieldFormPermissionsProps {
   state: CustomFieldModalState;
 }
 
@@ -89,8 +89,8 @@ const PermissionRow = ({
   );
 };
 
-export const _CustomFieldFormV2Permissions = (
-  props: CustomFieldFormV2PermissionsProps,
+export const _CustomFieldFormPermissions = (
+  props: CustomFieldFormPermissionsProps,
 ) => {
   const { state } = props;
   const {
@@ -207,6 +207,4 @@ export const _CustomFieldFormV2Permissions = (
   );
 };
 
-export const CustomFieldFormV2Permissions = observer(
-  _CustomFieldFormV2Permissions,
-);
+export const CustomFieldFormPermissions = observer(_CustomFieldFormPermissions);

package/src/components/CustomFieldModal/CustomFieldFormPiiFields.tsx

@@ -4,10 +4,12 @@ import {
   Cell,
   FormField,
   InfoIcon,
+  SectionHelper,
   Text,
   TextButton,
   ToggleSwitch,
 } from '@wix/design-system';
+import type { FieldPiiWarning } from '@wix/bex-core';
 import { Trans } from '../Trans';
 
 interface PiiFormFieldsProps {
@@ -17,12 +19,15 @@ interface PiiFormFieldsProps {
   };
   mode: string;
   language: string;
+  /** Shown only while the toggle is on. */
+  piiWarning?: FieldPiiWarning;
 }
 
 export function PiiFormFields({
   containsPii,
   mode,
   language,
+  piiWarning,
 }: PiiFormFieldsProps) {
   const translateKeys = {
     toggleName:
@@ -33,47 +38,78 @@ export function PiiFormFields({
       'cairo.customFields.addCustomField.modal.PII-setting.toggle.editNote',
   } as const;
   const whyIsItImportantLink = `https://support.wix.com/${language}/article/about-personally-identifiable-information-pii`;
+  const isEdit = mode === 'edit';
 
   return (
-    <Cell span={12}>
-      <FormField>
-        <Box gap="SP1" marginBlockEnd="6px">
-          <ToggleSwitch
-            dataHook="pii-toggle-switch"
-            size="small"
-            disabled={mode === 'edit'}
-            checked={containsPii.value}
-            onChange={(e) => containsPii.onChange(e.target.checked)}
-          />
-          <Text size="small" dataHook="pii-toggle-name">
-            <Trans i18nKey={translateKeys.toggleName} />
-          </Text>
-          <InfoIcon
-            size="small"
-            content={
-              <Trans
-                i18nKey={translateKeys.toggleInfo}
-                components={{
-                  linkVal: (
-                    <TextButton
-                      as="a"
-                      href={whyIsItImportantLink}
-                      underline="always"
-                      size="small"
-                      target="_blank"
-                    />
-                  ),
-                }}
+    <>
+      <Cell span={12}>
+        <FormField>
+          <Box gap="9px" marginBlockEnd={isEdit ? '6px' : undefined}>
+            <ToggleSwitch
+              dataHook="pii-toggle-switch"
+              size="medium"
+              disabled={isEdit}
+              checked={containsPii.value}
+              onChange={(e) => containsPii.onChange(e.target.checked)}
+            />
+            <Box gap="3px">
+              <Text size="small" dataHook="pii-toggle-name">
+                <Trans i18nKey={translateKeys.toggleName} />
+              </Text>
+              <InfoIcon
+                size="small"
+                content={
+                  <Trans
+                    i18nKey={translateKeys.toggleInfo}
+                    components={{
+                      linkVal: (
+                        <TextButton
+                          as="a"
+                          href={whyIsItImportantLink}
+                          underline="always"
+                          size="small"
+                          target="_blank"
+                        />
+                      ),
+                    }}
+                  />
+                }
               />
-            }
-          />
-        </Box>
-      </FormField>
-      <Box>
-        <Text size="small" dataHook="pii-toggle-edit-note">
-          <Trans i18nKey={translateKeys.toggleEditNote} />
-        </Text>
-      </Box>
-    </Cell>
+            </Box>
+          </Box>
+        </FormField>
+        {isEdit && (
+          <Box>
+            <Text size="small" dataHook="pii-toggle-edit-note">
+              <Trans i18nKey={translateKeys.toggleEditNote} />
+            </Text>
+          </Box>
+        )}
+      </Cell>
+      {containsPii.value && piiWarning && (
+        <Cell span={12}>
+          <SectionHelper
+            dataHook="custom-field-modal-pii-warning"
+            skin="warning"
+            showPrefixIcon
+          >
+            {/* Inline, not SectionHelper's `actionText` — that slot renders a
+                bordered button on its own row. */}
+            {piiWarning.text}{' '}
+            {piiWarning.action && (
+              <TextButton
+                dataHook="custom-field-modal-pii-warning-action"
+                size="small"
+                skin="dark"
+                underline="always"
+                onClick={piiWarning.action.onClick}
+              >
+                {piiWarning.action.label}
+              </TextButton>
+            )}
+          </SectionHelper>
+        </Cell>
+      )}
+    </>
   );
 }