@wix/patterns 1.357.0 → 1.359.0

package/src/components/ImportButton/ImportModal.uni.driver.ts

@@ -0,0 +1,108 @@
+import { UniDriver, waitFor } from '@wix/wix-ui-test-utils/unidriver';
+import { baseUniDriverFactory } from '../../unidriver';
+import {
+  CounterBadgeUniDriver,
+  CustomModalLayoutUniDriver,
+  DropdownUniDriver,
+  ModalUniDriver,
+  TextUniDriver,
+} from '@wix/design-system/dist/testkit/unidriver';
+
+export function ImportModalUniDriver(base: UniDriver, body: UniDriver) {
+  const modalBase = () => body.$('.portal-import-modal');
+  const modalLayoutBase = () => body.$('[data-hook="import-modal-layout"]');
+  const footerBase = () =>
+    modalLayoutBase().$('[data-hook="import-modal-footer-text"]');
+
+  const getModal = () => ModalUniDriver(modalBase(), modalBase());
+
+  const getModalLayout = () =>
+    CustomModalLayoutUniDriver(modalLayoutBase(), body);
+
+  const getFooterText = async () =>
+    (await TextUniDriver(footerBase(), body)).getText();
+
+  const footerExists = () => footerBase().exists();
+
+  const fileInputBase = () =>
+    modalLayoutBase().$('[data-hook="import-file-input"]');
+  const configurationStepBase = () =>
+    modalLayoutBase().$('[data-hook="import-mapping-step"]');
+  const summaryStepBase = () =>
+    modalLayoutBase().$('[data-hook="import-summary-step"]');
+  const progressLabelBase = () =>
+    modalLayoutBase().$('[data-hook="import-progress-label"]');
+
+  return {
+    wait: (timeout?: number) => base.wait(timeout),
+    ...baseUniDriverFactory(base),
+    getModal,
+    getModalLayout,
+    waitModalClosed: (timeout?: number) =>
+      waitFor(async () => !(await getModalLayout().exists()), timeout),
+    clickPrimaryAction: async () =>
+      (await getModalLayout().getPrimaryButtonDriver()).click(),
+    getPrimaryActionText: async () =>
+      (await getModalLayout().getPrimaryButtonDriver()).getButtonTextContent(),
+    isPrimaryButtonDisabled: async () =>
+      (await getModalLayout().getPrimaryButtonDriver()).isButtonDisabled(),
+    getSecondaryButtonText: async () =>
+      (
+        await getModalLayout().getSecondaryButtonDriver()
+      ).getButtonTextContent(),
+    clickSecondaryAction: async () =>
+      (await getModalLayout().getSecondaryButtonDriver()).click(),
+    clickCloseButton: () => getModalLayout().clickCloseButton(),
+    getModalTitle: () => getModalLayout().getTitleText(),
+    getSubtitleText: () => getModalLayout().getSubtitleText(),
+    getFooterText,
+    footerExists,
+
+    isUploadStepVisible: () => fileInputBase().exists(),
+    isConfigurationStepVisible: () => configurationStepBase().exists(),
+    isSummaryStepVisible: () => summaryStepBase().exists(),
+
+    /** Simulates selecting a file in the upload step */
+    uploadFile: async (file: File) => {
+      const nativeInput: HTMLInputElement = await fileInputBase()
+        .$('input[type="file"]')
+        .getNative();
+      Object.defineProperty(nativeInput, 'files', { value: [file] });
+      nativeInput.dispatchEvent(new Event('change', { bubbles: true }));
+    },
+
+    getUploadError: () =>
+      modalLayoutBase().$('[data-hook="import-upload-error"]').text(),
+    uploadErrorExists: () =>
+      modalLayoutBase().$('[data-hook="import-upload-error"]').exists(),
+
+    getProgressLabel: () => progressLabelBase().text(),
+    progressLabelExists: () => progressLabelBase().exists(),
+
+    getPartialErrorText: () =>
+      modalLayoutBase().$('[data-hook="import-partial-error"]').text(),
+    partialErrorExists: () =>
+      modalLayoutBase().$('[data-hook="import-partial-error"]').exists(),
+
+    getErrorMessageText: () =>
+      modalLayoutBase().$('[data-hook="import-error-message"]').text(),
+    errorMessageExists: () =>
+      modalLayoutBase().$('[data-hook="import-error-message"]').exists(),
+
+    /** Get the CounterBadge driver for the columns found counter */
+    getColumnsFoundCounter: () =>
+      CounterBadgeUniDriver(
+        modalLayoutBase().$('[data-hook="import-columns-found-counter"]'),
+        body,
+      ),
+
+    /** Get the Dropdown driver for a specific CSV header mapping */
+    getMappingDropdown: (header: string) =>
+      DropdownUniDriver(
+        modalLayoutBase().$(`[data-hook="import-mapping-${header}"]`),
+        body,
+      ),
+  };
+}
+
+export default ImportModalUniDriver;

package/src/components/ImportButton/ImportProps.tsx

@@ -0,0 +1,21 @@
+import { BackupFn, BulkUploadItemsFn, ModalState } from '@wix/bex-core';
+import { CreateExportAsyncJobRequest } from '@wix/bex-utils/@wix/ambassador-fedinfra-exportservice-v1-export-async-job/types';
+
+type ImportButtonToolbarType = 'default' | 'bulkActionToolbar';
+
+export interface ImportButtonParams
+  extends Pick<CreateExportAsyncJobRequest, 'fields'> {
+  bulkUploadItems: BulkUploadItemsFn;
+  backup?: BackupFn;
+  batchSize?: number;
+}
+
+export type ImportButtonProps = ImportButtonParams & {
+  toolbarType?: ImportButtonToolbarType;
+};
+
+export type ImportModalProps = ImportButtonParams;
+
+export type ImportButtonModalLayoutProps = ImportModalProps & {
+  importModalState: ModalState;
+};

package/src/components/ImportButton/ImportStepConfiguration.tsx

@@ -0,0 +1,139 @@
+import {
+  Box,
+  CounterBadge,
+  Dropdown,
+  Heading,
+  Text,
+  TableListItem,
+  listItemSelectBuilder,
+} from '@wix/design-system';
+import { ArrowRight } from '@wix/wix-ui-icons-common';
+import { ImportState } from '@wix/bex-core';
+import React from 'react';
+import { observer } from 'mobx-react-lite';
+
+export interface ImportStepConfigurationProps {
+  state: ImportState;
+}
+
+const COLUMN_WIDTHS = {
+  title: 'minmax(0, 150px)',
+  arrow: '1fr',
+  field: 'minmax(0, 250px)',
+};
+
+function _ImportStepConfiguration({ state }: ImportStepConfigurationProps) {
+  const { csvHeaders, fields, translate: t } = state;
+
+  const dropdownOptions = fields
+    .filter((field) => field.id != null)
+    .map((field) =>
+      listItemSelectBuilder({
+        id: field.id!,
+        label: field.header,
+        title: field.header,
+      }),
+    );
+
+  return (
+    <Box direction="vertical" dataHook="import-mapping-step">
+      <Box
+        direction="horizontal"
+        gap="SP2"
+        verticalAlign="middle"
+        paddingLeft="SP4"
+        paddingRight="SP4"
+        paddingTop="SP1"
+        paddingBottom="SP2"
+      >
+        <Heading size="small">{t('cairo.import.columnsFound')}</Heading>
+        <CounterBadge
+          size="medium"
+          skin="neutralLight"
+          dataHook="import-columns-found-counter"
+        >
+          {csvHeaders.length}
+        </CounterBadge>
+      </Box>
+
+      <div style={{ overflowY: 'auto', maxHeight: '340px' }}>
+        <Box
+          display="grid"
+          direction="horizontal"
+          gap="SP4"
+          padding="SP2 SP4"
+          backgroundColor="var(--wds-color-fill-surface-neutral,var(--wsr-color-D75, #F7F8F8))"
+          boxShadow="inset 0 1px 0 0 var(--wds-color-border-dark-secondary, var(--wsr-color-D60, #DFE5EB)), inset 0 -1px 0 0 var(--wds-color-border-dark-secondary, var(--wsr-color-D60, #DFE5EB))"
+          gridTemplateColumns={`${COLUMN_WIDTHS.title} ${COLUMN_WIDTHS.arrow} ${COLUMN_WIDTHS.field}`}
+          style={{ position: 'sticky', top: 0, zIndex: 1 }}
+        >
+          <Box minWidth={0} direction="vertical">
+            <Text size="small" weight="thin" ellipsis>
+              {t('cairo.import.columnTitle')}
+            </Text>
+          </Box>
+
+          <Box minWidth={0} direction="vertical" />
+
+          <Box minWidth={0} direction="vertical">
+            <Text size="small" weight="thin" ellipsis>
+              {t('cairo.import.collectionField')}
+            </Text>
+          </Box>
+        </Box>
+
+        {csvHeaders.map((header) => (
+          <TableListItem
+            key={header}
+            showDivider
+            options={[
+              {
+                value: (
+                  <Text ellipsis size="small">
+                    {header}
+                  </Text>
+                ),
+                width: COLUMN_WIDTHS.title,
+              },
+              {
+                value: (
+                  <Box align="center">
+                    <ArrowRight />
+                  </Box>
+                ),
+                width: COLUMN_WIDTHS.arrow,
+              },
+              {
+                value: (
+                  <Dropdown
+                    dataHook={`import-mapping-${header}`}
+                    clearButton
+                    onClear={() => {
+                      state.setMapping(header, null);
+                    }}
+                    placeholder={t('cairo.import.skipColumn')}
+                    selectedId={state.mappingByHeader[header] ?? undefined}
+                    onSelect={({ id }) => {
+                      state.setMapping(header, id as string);
+                    }}
+                    popoverProps={{
+                      appendTo: 'window',
+                      zIndex: 5001,
+                      flip: true,
+                      fixed: false,
+                    }}
+                    options={dropdownOptions}
+                    size="small"
+                  />
+                ),
+                width: COLUMN_WIDTHS.field,
+              },
+            ]}
+          />
+        ))}
+      </div>
+    </Box>
+  );
+}
+
+export const ImportStepConfiguration = observer(_ImportStepConfiguration);

package/src/components/ImportButton/ImportStepError.tsx

@@ -0,0 +1,26 @@
+import { Box, Text } from '@wix/design-system';
+import { ImportState } from '@wix/bex-core';
+import React from 'react';
+import { observer } from 'mobx-react-lite';
+
+export interface ImportStepErrorProps {
+  state: ImportState;
+}
+
+function _ImportStepError({ state }: ImportStepErrorProps) {
+  const { importStatus, translate: t } = state;
+  const errorMessage =
+    importStatus.isError && importStatus.error instanceof Error
+      ? importStatus.error.message
+      : t('cairo.import.genericError');
+
+  return (
+    <Box direction="vertical" gap="SP2">
+      <Text size="small" skin="error">
+        {errorMessage}
+      </Text>
+    </Box>
+  );
+}
+
+export const ImportStepError = observer(_ImportStepError);

package/src/components/ImportButton/ImportStepProgress.tsx

@@ -0,0 +1,67 @@
+import { Box, LinearProgressBar, Text } from '@wix/design-system';
+import { ImportState } from '@wix/bex-core';
+import React, { useMemo } from 'react';
+import { observer } from 'mobx-react-lite';
+
+export interface ImportStepProgressProps {
+  state: ImportState;
+}
+
+function _ImportStepProgress({ state }: ImportStepProgressProps) {
+  const {
+    processedCount,
+    totalCount,
+    isBackingUp,
+    result,
+    translate: t,
+    importStatus,
+    errorHandler,
+  } = state;
+  const progress =
+    totalCount > 0
+      ? Math.min(100, Math.round((processedCount / totalCount) * 100))
+      : 0;
+
+  const hasFailures = result != null && result.failed > 0;
+
+  const errorMessage = useMemo(
+    () =>
+      importStatus.error
+        ? errorHandler.getResolvedError?.(importStatus.error)?.message
+        : null,
+    [importStatus.error, errorHandler],
+  );
+
+  return (
+    <Box direction="vertical" gap="SP2" width="100%">
+      <LinearProgressBar
+        value={progress}
+        showProgressIndication
+        dataHook="import-progress-bar"
+      />
+      <Text size="small" dataHook="import-progress-label">
+        {isBackingUp && !errorMessage
+          ? t('cairo.import.backupDescription')
+          : t('cairo.import.progressLabel', {
+              processed: processedCount,
+              total: totalCount,
+            })}
+      </Text>
+      {hasFailures && (
+        <Text size="small" skin="error" dataHook="import-partial-error">
+          {t('cairo.import.partialSuccess', {
+            succeeded: result.succeeded,
+            failed: result.failed,
+          })}
+        </Text>
+      )}
+      {errorMessage && (
+        <Text size="small" skin="error" dataHook="import-error-message">
+          {errorMessage}
+        </Text>
+      )}
+    </Box>
+  );
+}
+
+export const ImportStepProgress = observer(_ImportStepProgress);

package/src/components/ImportButton/ImportStepUpload.st.css

@@ -0,0 +1,3 @@
+.fileUpload {
+  width: 100%;
+}

package/src/components/ImportButton/ImportStepUpload.st.css.ts

@@ -0,0 +1,25 @@
+// @ts-nocheck
+
+
+import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
+
+
+
+var _namespace_ = "ImportStepUpload2373340862";
+var _style_ = classesRuntime.bind(null, _namespace_);
+
+export var cssStates = statesRuntime.bind(null, _namespace_);
+export var style = _style_;
+export var st: import("@stylable/runtime").STFunction = _style_;
+
+export var namespace = _namespace_;
+export var classes = {"root":"ImportStepUpload2373340862__root","fileUpload":"ImportStepUpload2373340862__fileUpload"};
+export var keyframes = {}; 
+export var layers = {};
+export var containers = {};
+export var stVars = {}; 
+export var vars = {}; 
+
+
+
+

package/src/components/ImportButton/ImportStepUpload.tsx

@@ -0,0 +1,44 @@
+import { Box, Text, FileUpload, AddItem } from '@wix/design-system';
+import { ImportState } from '@wix/bex-core';
+import React from 'react';
+import { observer } from 'mobx-react-lite';
+import { st, classes } from './ImportStepUpload.st.css.js';
+
+export interface ImportStepUploadProps {
+  state: ImportState;
+}
+
+function _ImportStepUpload({ state }: ImportStepUploadProps) {
+  const { parseError, translate: t } = state;
+
+  return (
+    <Box direction="vertical" gap="SP2">
+      <Box height="280px">
+        <FileUpload
+          dataHook="import-file-input"
+          className={st(classes.fileUpload)}
+          accept=".csv,text/csv"
+          onChange={(files) => {
+            const file = files?.[0];
+            if (file) {
+              state.onFileSelected(file);
+            }
+          }}
+        >
+          {({ openFileUploadDialog }) => (
+            <AddItem size="large" skin="filled" onClick={openFileUploadDialog}>
+              {t('cairo.import.uploadButtonLabel')}
+            </AddItem>
+          )}
+        </FileUpload>
+      </Box>
+      {parseError ? (
+        <Text size="small" skin="error" dataHook="import-upload-error">
+          {parseError}
+        </Text>
+      ) : null}
+    </Box>
+  );
+}
+
+export const ImportStepUpload = observer(_ImportStepUpload);

package/src/components/ImportButton/ImportStepper.tsx

@@ -0,0 +1,48 @@
+import { Stepper, Box } from '@wix/design-system';
+import { ImportState, ImportStep } from '@wix/bex-core';
+import React from 'react';
+import { observer } from 'mobx-react-lite';
+
+const STEPPER_INDEX: Record<ImportStep, number> = {
+  upload: 0,
+  configuration: 1,
+  progress: 2,
+};
+
+function getStepperSteps(currentStep: ImportStep, t: ImportState['translate']) {
+  const activeIndex = STEPPER_INDEX[currentStep];
+
+  return [
+    { text: t('cairo.import.stepper.upload') },
+    { text: t('cairo.import.stepper.matchFields') },
+  ].map((step, index) => ({
+    ...step,
+    type: (
+      index < activeIndex
+        ? 'completed'
+        : index > activeIndex
+          ? 'disabled'
+          : 'normal'
+    ) as 'completed' | 'disabled' | 'normal',
+  }));
+}
+
+export interface ImportStepperProps {
+  state: ImportState;
+  removeContentPadding?: boolean;
+}
+
+function _ImportStepper({ state, removeContentPadding }: ImportStepperProps) {
+  const activeStep = STEPPER_INDEX[state.currentStep];
+  const steps = getStepperSteps(state.currentStep, state.translate);
+
+  const contentPadding = removeContentPadding ? undefined : 'SP4';
+
+  return (
+    <Box paddingLeft={contentPadding} paddingRight={contentPadding}>
+      <Stepper activeStep={activeStep} steps={steps} />
+    </Box>
+  );
+}
+
+export const ImportStepper = observer(_ImportStepper);

package/src/components/ImportButton/getImportModalStepProps.tsx

@@ -0,0 +1,75 @@
+import {
+  Box,
+  CustomModalLayoutProps,
+  Text,
+  TextButton,
+} from '@wix/design-system';
+import { ImportState } from '@wix/bex-core';
+import React, { ReactNode } from 'react';
+import { ImportStepUpload } from './ImportStepUpload';
+import { ImportStepConfiguration } from './ImportStepConfiguration';
+import { ImportStepProgress } from './ImportStepProgress';
+
+export interface GetImportModalStepProps {
+  state: ImportState;
+}
+
+export function getImportModalStepProps({
+  state,
+}: GetImportModalStepProps): Partial<
+  CustomModalLayoutProps & { children?: ReactNode; onRequestClose?: () => void }
+> {
+  const { currentStep, translate: t } = state;
+
+  if (currentStep === 'upload') {
+    return {
+      title: t('cairo.import.title'),
+      subtitle: t('cairo.import.subtitle'),
+      children: <ImportStepUpload state={state} />,
+      footnote: (
+        <Box gap="SP1" verticalAlign="middle">
+          <Text size="small" secondary>
+            {t('cairo.import.footerText')}
+          </Text>
+          <TextButton size="small">{t('cairo.import.footerLink')}</TextButton>
+        </Box>
+      ),
+      showFooterDivider: false,
+      secondaryButtonText: t('cairo.import.cancel'),
+      secondaryButtonOnClick: state.close,
+      closeButtonProps: { onClick: state.close, autoFocus: true },
+      onRequestClose: state.close,
+    };
+  }
+
+  if (currentStep === 'configuration') {
+    return {
+      removeContentPadding: true,
+      title: t('cairo.import.configureMappingsTitle'),
+      subtitle: t('cairo.import.subtitle'),
+      children: <ImportStepConfiguration state={state} />,
+      showFooterDivider: true,
+      primaryButtonText: t('cairo.import.startImport'),
+      primaryButtonOnClick: state.startImport,
+      primaryButtonProps: { disabled: !state.hasMappings },
+      secondaryButtonText: t('cairo.import.back'),
+      secondaryButtonOnClick: state.goToUpload,
+      closeButtonProps: { onClick: state.close, autoFocus: true },
+      onRequestClose: state.close,
+    };
+  }
+
+  return {
+    title: t('cairo.import.progressTitle'),
+    children: <ImportStepProgress state={state} />,
+    primaryButtonText: t('cairo.import.importing'),
+    primaryButtonProps: { disabled: true },
+    secondaryButtonText: state.isRestoring
+      ? t('cairo.import.restoring')
+      : t('cairo.import.cancel'),
+    secondaryButtonOnClick: state.close,
+    secondaryButtonProps: { disabled: state.isRestoring },
+    closeButtonProps: { onClick: state.close },
+    onRequestClose: state.isRestoring ? undefined : state.close,
+  };
+}

package/src/components/ImportButton/index.ts

@@ -0,0 +1,3 @@
+export * from './ImportButton';
+export * from './ImportModal';
+export { ImportButtonProps, ImportModalProps } from './ImportProps';

package/src/components/InputOverflow/InputOverflow.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "InputOverflow959630330";
+var _namespace_ = "InputOverflow121088723";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"InputOverflow959630330__root"};
+export var classes = {"root":"InputOverflow121088723__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/LoadingRow/LoadingRow.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "LoadingRow3996135550";
+var _namespace_ = "LoadingRow2081649038";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,8 +13,8 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"LoadingRow3996135550__root"};
-export var keyframes = {"gradientSwoosh":"LoadingRow3996135550__gradientSwoosh"}; 
+export var classes = {"root":"LoadingRow2081649038__root"};
+export var keyframes = {"gradientSwoosh":"LoadingRow2081649038__gradientSwoosh"}; 
 export var layers = {};
 export var containers = {};
 export var stVars = {}; 

package/src/components/MaxHeightText/MaxHeightText.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "MaxHeightText1555679920";
+var _namespace_ = "MaxHeightText785378325";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"MaxHeightText1555679920__root"};
+export var classes = {"root":"MaxHeightText785378325__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/MaxLines/MaxLines.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "MaxLines3184399640";
+var _namespace_ = "MaxLines239794507";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"MaxLines3184399640__root"};
+export var classes = {"root":"MaxLines239794507__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/MultiBulkActionToolbar/MultiBulkActionToolbar.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "MultiBulkActionToolbar3816017489";
+var _namespace_ = "MultiBulkActionToolbar963133974";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"MultiBulkActionToolbar3816017489__root","leftGroupWrapper":"MultiBulkActionToolbar3816017489__leftGroupWrapper","selectedCountItem":"MultiBulkActionToolbar3816017489__selectedCountItem","selectedCountText":"MultiBulkActionToolbar3816017489__selectedCountText"};
+export var classes = {"root":"MultiBulkActionToolbar963133974__root","leftGroupWrapper":"MultiBulkActionToolbar963133974__leftGroupWrapper","selectedCountItem":"MultiBulkActionToolbar963133974__selectedCountItem","selectedCountText":"MultiBulkActionToolbar963133974__selectedCountText"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};