@wix/patterns 1.436.0 → 1.437.0

package/src/components/CustomFieldModal/CustomFieldFormPiiFieldsV2.tsx

@@ -1,115 +0,0 @@
-import React from 'react';
-import {
-  Box,
-  Cell,
-  FormField,
-  InfoIcon,
-  SectionHelper,
-  Text,
-  TextButton,
-  ToggleSwitch,
-} from '@wix/design-system';
-import type { FieldPiiWarning } from '@wix/bex-core';
-import { Trans } from '../Trans';
-
-interface PiiFormFieldsV2Props {
-  containsPii: {
-    value: boolean;
-    onChange: (value: boolean) => void;
-  };
-  mode: string;
-  language: string;
-  /** Shown only while the toggle is on. */
-  piiWarning?: FieldPiiWarning;
-}
-
-export function PiiFormFieldsV2({
-  containsPii,
-  mode,
-  language,
-  piiWarning,
-}: PiiFormFieldsV2Props) {
-  const translateKeys = {
-    toggleName:
-      'cairo.customFields.addCustomField.modal.PII-setting.toggle.name',
-    toggleInfo:
-      'cairo.customFields.addCustomField.modal.PII-setting.toggle.info',
-    toggleEditNote:
-      '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="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>
-          </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>
-      )}
-    </>
-  );
-}

package/src/components/CustomFieldModal/CustomFieldFormV2.tsx

@@ -1,225 +0,0 @@
-import React, { useEffect } from 'react';
-import { observer } from 'mobx-react-lite';
-import {
-  Accordion,
-  Box,
-  Cell,
-  Divider,
-  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 { StatusAlertFilledSmall } from '@wix/wix-ui-icons-common/lazy';
-import { runInAction } from 'mobx';
-import { CustomFieldTypeDropdownV2 } from './CustomFieldTypeDropdownV2';
-import { PiiFormFieldsV2 } from './CustomFieldFormPiiFieldsV2';
-import { CustomFieldFormV2Permissions } from './CustomFieldFormV2Permissions';
-
-export interface CustomFieldFormV2Props {
-  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 _CustomFieldFormV2 = (props: CustomFieldFormV2Props) => {
-  const { state } = props;
-  const {
-    form: {
-      $: { key, type, name, containsPii },
-    },
-    errorToastConfig,
-    mode,
-    settings,
-    customFieldModalBiReporter,
-    generateUniqueKey,
-    setKeyFieldIfNotDirty,
-  } = state;
-  const { fieldModal } = state.fieldManagement;
-  const SettingsSection = state.settingsSection?.Component;
-
-  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 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.typeSupportsPii && (
-            <PiiFormFieldsV2
-              containsPii={{
-                value: containsPii.value,
-                onChange: containsPii.onChange,
-              }}
-              mode={mode}
-              language={language}
-              piiWarning={state.piiWarning}
-            />
-          )}
-        </Layout>
-      </Box>
-      {state.showSettings && (
-        <>
-          <Box marginTop="SP4" marginLeft={fullBleed} marginRight={fullBleed}>
-            <Divider />
-          </Box>
-          <Box
-            direction="vertical"
-            marginLeft={fullBleed}
-            marginRight={fullBleed}
-          >
-            <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"
-                    >
-                      <StatusAlertFilledSmall />
-                    </Box>
-                  ) : undefined,
-                  open: settings.isOn,
-                  onToggle: () => {
-                    settings.toggle();
-                    customFieldModalBiReporter.reportAdvancedSettingsClick(
-                      settings.isOn ? 'Open' : 'Close',
-                    );
-                  },
-                  children: (
-                    <Box direction="vertical" gap="SP4">
-                      {fieldModal.permissions && (
-                        <CustomFieldFormV2Permissions state={state} />
-                      )}
-                      {SettingsSection && (
-                        <SettingsSection fieldType={type.value} />
-                      )}
-                    </Box>
-                  ),
-                },
-              ]}
-            />
-          </Box>
-        </>
-      )}
-    </Box>
-  );
-};
-
-export const CustomFieldFormV2 = observer(_CustomFieldFormV2);

package/src/components/CustomFieldModal/CustomFieldTypeDropdownV2.tsx

@@ -1,139 +0,0 @@
-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, containsPii },
-      },
-      mode,
-      fieldManagement: { fieldModal },
-      generateUniqueKey,
-      setKeyFieldIfNotDirty,
-    },
-  } = props;
-
-  const { translate: t } = useWixPatternsContainer();
-
-  const [search, setSearch] = React.useState<string | null>(null);
-  const query = search?.trim().toLowerCase() ?? '';
-
-  const selectedType = fieldModal.types.find(
-    (option) => option.id === type.value,
-  );
-
-  const fieldTypeOptions = React.useMemo(() => {
-    const toOption = (option: (typeof fieldModal.types)[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,
-      });
-
-    if (query) {
-      return fieldModal.types
-        .filter((option) => option.label.toLowerCase().includes(query))
-        .map(toOption);
-    }
-
-    const groups = fieldModal.types.reduce<string[]>((labels, option) => {
-      const label = option.group;
-      if (label && !labels.includes(label)) {
-        labels.push(label);
-      }
-      return labels;
-    }, []);
-
-    if (groups.length === 0) {
-      return fieldModal.types.map(toOption);
-    }
-
-    const grouped = groups.flatMap((label) => [
-      listItemSectionBuilder({
-        id: `custom-field-modal-type-group-${label}`,
-        type: 'subheader',
-        title: label,
-      }),
-      ...fieldModal.types
-        .filter((option) => option.group === label)
-        .map(toOption),
-    ]);
-    const ungrouped = fieldModal.types
-      .filter((option) => !option.group)
-      .map(toOption);
-    return [...grouped, ...ungrouped];
-  }, [fieldModal.types, query]);
-
-  return (
-    <AutoComplete
-      dataHook="custom-field-modal-type"
-      disabled={mode === 'edit'}
-      value={search ?? selectedType?.label ?? ''}
-      selectedId={type.value}
-      prefix={
-        search === null && selectedType ? (
-          <Input.IconAffix>
-            {/* WDS paints input affix icons blue; the type icons stay dark. */}
-            <Box color="D10">
-              {getFieldTypeIcon({
-                fieldType: selectedType.patternsType,
-                size: 'medium',
-              })}
-            </Box>
-          </Input.IconAffix>
-        ) : undefined
-      }
-      onChange={(e) => setSearch(e.target.value)}
-      onSelect={({ id }) => {
-        const nextType = String(id);
-        setSearch(null);
-        if (nextType !== type.value) {
-          // The settings were filled in for the old type; the new one starts fresh.
-          props.state.resetSettingsValues();
-        }
-        type.onChange(nextType);
-        // Read off `props.state` — a destructured computed holds the pre-change value.
-        if (!props.state.typeSupportsPii) {
-          containsPii.onChange(false);
-        }
-        setKeyFieldIfNotDirty(generateUniqueKey(name.value));
-      }}
-      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);