@wix/patterns 1.255.0 → 1.256.0

package/src/components/ExportButton/ExportButton.tsx

@@ -0,0 +1,107 @@
+import React, { useEffect, useState } from 'react';
+import { FiltersMap, ModalState } from '@wix/bex-core';
+import { Box, Button, Modal } from '@wix/design-system';
+import { UploadExport } from '@wix/wix-ui-icons-common';
+import { observer, Observer } from 'mobx-react-lite';
+import { ExportButtonModalLayout } from './ExportButtonModalLayout';
+import { useWixPatternsContainer } from '@wix/bex-core/react';
+import { useToolbarCollectionContext } from '../ToolbarCollectionContext';
+import { ExportButtonProps } from './ExportProps';
+import { ResponsiveButton } from '../ResponsiveButton/ResponsiveButton';
+
+function _ExportButton<T, F extends FiltersMap>(
+  props: ExportButtonProps<T, F>,
+) {
+  const {
+    toolbarType = 'default',
+    renderError,
+    transformPlatformizedQuery,
+    differentQueryEndpointThanCollection,
+    customTotal,
+    methodMetadata,
+    arrayFieldDelimiter,
+    methodSpec,
+    fields,
+    saveAs,
+    exportModalFooter,
+    exportModalTitle,
+    onProgressModalTitle,
+    exportToCSVMessage,
+  } = props;
+
+  const table = useToolbarCollectionContext<T, F>();
+
+  const {
+    toolbar: { responsive },
+  } = table;
+
+  const { translate: t } = useWixPatternsContainer();
+
+  const [state] = useState(() => (table.exportState ??= new ModalState()));
+
+  useEffect(() => {
+    table.featuredComponents.exportModal.set(
+      <Observer>
+        {() => (
+          <Modal
+            onRequestClose={state.requestClose}
+            isOpen={state.isOpen}
+            dataHook="export-modal"
+          >
+            <ExportButtonModalLayout
+              exportModalState={state}
+              renderError={renderError}
+              transformPlatformizedQuery={transformPlatformizedQuery}
+              customTotal={customTotal}
+              arrayFieldDelimiter={arrayFieldDelimiter}
+              differentQueryEndpointThanCollection={
+                differentQueryEndpointThanCollection
+              }
+              methodMetadata={methodMetadata}
+              methodSpec={methodSpec}
+              fields={fields}
+              saveAs={saveAs}
+              exportModalFooter={exportModalFooter}
+              exportModalTitle={exportModalTitle}
+              onProgressModalTitle={onProgressModalTitle}
+              exportToCSVMessage={exportToCSVMessage}
+            />
+          </Modal>
+        )}
+      </Observer>,
+    );
+
+    return () => {
+      table.featuredComponents.exportModal.set(null);
+    };
+  }, []);
+
+  return (
+    <Box dataHook="export-container">
+      {toolbarType === 'default' ? (
+        <ResponsiveButton
+          state={responsive.actions}
+          dataHook="export-button"
+          onClick={state.open}
+          icon={<UploadExport />}
+        >
+          {t('cairo.export.export')}
+        </ResponsiveButton>
+      ) : (
+        <Button
+          skin="standard"
+          priority="secondary"
+          size="small"
+          ellipsis
+          prefixIcon={<UploadExport />}
+          dataHook="export-button"
+          onClick={state.open}
+        >
+          {t('cairo.export.export')}
+        </Button>
+      )}
+    </Box>
+  );
+}
+
+export const ExportButton = observer(_ExportButton);

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

@@ -0,0 +1,18 @@
+import { ButtonUniDriver } from '@wix/design-system/dist/testkit/unidriver';
+import { UniDriver } from '@wix/wix-ui-test-utils/unidriver';
+import ExportModalUniDriver from './ExportModal.uni.driver';
+
+export function ExportButtonUniDriver(base: UniDriver, body: UniDriver) {
+  const getButton = () => ButtonUniDriver(base, body);
+  const exportModal = ExportModalUniDriver(base, body);
+
+  return {
+    ...exportModal,
+    /** Clicks the button to open export modal */
+    click: () => getButton().click(),
+    /** Indicates whether export button exists in the table toolbar */
+    exists: () => getButton().exists(),
+  };
+}
+
+export default ExportButtonUniDriver;

package/src/components/ExportButton/ExportButtonModalLayout.tsx

@@ -0,0 +1,98 @@
+import { CustomModalLayout } from '@wix/design-system';
+import { getExportModalStepProps } from './getExportModalStepProps';
+import React, { useEffect, useState } from 'react';
+import { observer } from 'mobx-react-lite';
+import { useToolbarCollectionContext } from '../ToolbarCollectionContext';
+import { FiltersMap, useCreateExport } from '@wix/bex-core';
+import { ExportButtonModalLayoutProps } from './ExportProps';
+import {
+  QueryFieldNumber,
+  ArrayFieldDelimiter,
+} from '@wix/bex-utils/@wix/ambassador-fedinfra-exportservice-v1-export-async-job/types';
+import { addEventListener } from '@wix/bex-core/util';
+
+function _ExportButtonModalLayout<T, F extends FiltersMap>(
+  props: ExportButtonModalLayoutProps<T, F>,
+) {
+  const {
+    renderError,
+    transformPlatformizedQuery,
+    differentQueryEndpointThanCollection,
+    customTotal,
+    methodMetadata,
+    methodSpec,
+    fields,
+    saveAs,
+    exportModalState,
+    arrayFieldDelimiter,
+    exportModalFooter,
+    exportModalTitle,
+    onProgressModalTitle,
+    exportToCSVMessage,
+    ...rest
+  } = props;
+
+  const table = useToolbarCollectionContext<T, F>();
+
+  const createExport = useCreateExport<T, F>({
+    transformPlatformizedQuery,
+    differentQueryEndpointThanCollection,
+    customTotal,
+    reportBi: table.reportBi,
+    exportModalState,
+    createExportAsyncJobRequest: {
+      methodMetadata,
+      fields,
+      arrayFieldDelimiter: arrayFieldDelimiter
+        ? ArrayFieldDelimiter[arrayFieldDelimiter]
+        : undefined,
+      methodSpec: methodSpec
+        ? {
+            ...methodSpec,
+            requestQueryFieldNumber: methodSpec.requestQueryFieldNumber
+              ? QueryFieldNumber[methodSpec.requestQueryFieldNumber]
+              : undefined,
+          }
+        : undefined,
+    },
+    saveAs,
+  });
+
+  const [state] = useState(() => createExport());
+
+  const { onRequestClose, ...customModalLayoutProps } = getExportModalStepProps(
+    {
+      state,
+      renderError,
+      exportModalFooter,
+      exportModalTitle,
+      onProgressModalTitle,
+      exportToCSVMessage,
+    },
+  );
+
+  useEffect(() => {
+    if (onRequestClose) {
+      return addEventListener(
+        exportModalState.events,
+        'requestClose',
+        onRequestClose,
+      );
+    }
+
+    return undefined;
+  }, [onRequestClose]);
+
+  useEffect(() => state.init(), []);
+
+  return (
+    <CustomModalLayout
+      width="510px"
+      dataHook="export-modal-layout"
+      {...rest}
+      {...customModalLayoutProps}
+    />
+  );
+}
+
+export const ExportButtonModalLayout = observer(_ExportButtonModalLayout);

package/src/components/ExportButton/ExportModal.tsx

@@ -0,0 +1,27 @@
+import { Modal } from '@wix/design-system';
+import React, { useState } from 'react';
+import { useToolbarCollectionContext } from '../ToolbarCollectionContext';
+import { FiltersMap, ModalState } from '@wix/bex-core';
+import { ExportButtonModalLayout } from './ExportButtonModalLayout';
+import { observer } from 'mobx-react-lite';
+import { ExportModalProps } from './ExportProps';
+
+function _ExportModal<T, F extends FiltersMap>(props: ExportModalProps<T, F>) {
+  const table = useToolbarCollectionContext<T, F>();
+
+  const [exportModalState] = useState(
+    () => (table.exportState ??= new ModalState()),
+  );
+
+  return (
+    <Modal
+      onRequestClose={exportModalState.close}
+      isOpen={exportModalState.isOpen}
+      dataHook="export-modal"
+    >
+      <ExportButtonModalLayout {...props} exportModalState={exportModalState} />
+    </Modal>
+  );
+}
+
+export const ExportModal = observer(_ExportModal);

package/src/components/ExportButton/ExportModal.uni.driver.ts

@@ -0,0 +1,102 @@
+import { UniDriver, waitFor } from '@wix/wix-ui-test-utils/unidriver';
+import { baseUniDriverFactory } from '../../unidriver';
+import {
+  CustomModalLayoutUniDriver,
+  HeadingUniDriver,
+  ModalUniDriver,
+  RadioGroupUniDriver,
+  TextUniDriver,
+} from '@wix/design-system/dist/testkit/unidriver';
+
+export function ExportModalUniDriver(base: UniDriver, body: UniDriver) {
+  const modalBase = () => body.$('.portal-export-modal');
+  const footerBase = () =>
+    modalBase().$('[data-hook="export-modal-footer-text"]');
+
+  const linearProgressBarBase = () =>
+    modalBase().$('[data-hook="export-linear-progress-bar"]');
+
+  const getAbsoluteCounter = () =>
+    TextUniDriver(
+      linearProgressBarBase().$('[data-hook="progress-count"]'),
+      body,
+    );
+
+  const getTotalCounter = () =>
+    HeadingUniDriver(
+      linearProgressBarBase().$('[data-hook="progress-total"]'),
+      body,
+    );
+
+  const getExportRadioGroup = () =>
+    RadioGroupUniDriver(modalBase().$('[data-hook="export-group"]'), body);
+
+  const getModal = () => ModalUniDriver(modalBase(), modalBase());
+
+  const getModalLayout = () =>
+    CustomModalLayoutUniDriver(
+      modalBase().$('[data-hook="export-modal-layout"]'),
+      body,
+    );
+
+  const getFooterText = async () =>
+    (await TextUniDriver(footerBase(), body)).getText();
+
+  const footerExists = () => footerBase().exists();
+
+  const getCsvMessageText = async () =>
+    (
+      await TextUniDriver(
+        modalBase().$('[data-hook="export-csv-message"]'),
+        body,
+      ).getText()
+    ).replace(' ', ' ');
+
+  return {
+    wait: (timeout?: number) => base.wait(timeout),
+    ...baseUniDriverFactory(base),
+    getModal,
+    /** Get RadioGroupDriver of export types list */
+    getExportRadioGroup,
+    getModalLayout,
+    getCsvMessageText,
+    waitModalClosed: (timeout?: number) =>
+      waitFor(async () => !(await getModalLayout().exists()), timeout),
+    /** Clicks export modal primary action button*/
+    clickPrimaryAction: async () =>
+      (await getModalLayout().getPrimaryButtonDriver()).click(),
+    /** Get export modal primary action text*/
+    getPrimaryActionText: async () =>
+      (await getModalLayout().getPrimaryButtonDriver()).getButtonTextContent(),
+    /** Get export modal secondary action text */
+    getSecondaryButtonText: async () =>
+      (
+        await getModalLayout().getSecondaryButtonDriver()
+      ).getButtonTextContent(),
+    /** Clicks export modal secondary action button*/
+    clickSecondaryAction: async () =>
+      (await getModalLayout().getSecondaryButtonDriver()).click(),
+    /** Clicks export modal close button*/
+    clickCloseButton: () => getModalLayout().clickCloseButton(),
+    /** Get export modal title*/
+    getModalTitle: () => getModalLayout().getTitleText(),
+    /** Get export progress absolute counter*/
+    getAbsoluteCounter: () => getAbsoluteCounter().getText(),
+    /** Get export total counter*/
+    getTotalCounter: () => getTotalCounter().getText(),
+    /** Get text from error message without the space value that is added with the widows prop
+    Tests are failing with this Hex valus, so it is replaced here */
+    getErrorMessageText: async () =>
+      (
+        await modalBase().$('[data-hook="export-error-message"]').text()
+      ).replace('\u00A0', ' '),
+    getErrorMessageAction: async () =>
+      modalBase().$('[data-hook="export-error-message-action"]'),
+    /** Get export modal footer text*/
+    getFooterText,
+    /** Indicates whether footer exists in the export modal */
+    footerExists,
+  };
+}
+
+export default ExportModalUniDriver;

package/src/components/ExportButton/ExportProps.tsx

@@ -0,0 +1,115 @@
+import {
+  CustomTotalFn,
+  FiltersMap,
+  ModalState,
+  SaveAsFn,
+  TransformQuery,
+} from '@wix/bex-core';
+import { GetExportModalStepProps } from './getExportModalStepProps';
+import {
+  ArrayFieldDelimiter,
+  CreateExportAsyncJobRequest,
+  MethodSpec,
+  QueryFieldNumber,
+} from '@wix/bex-utils/@wix/ambassador-fedinfra-exportservice-v1-export-async-job/types';
+
+type ExportButtonToolbarType = 'default' | 'bulkActionToolbar';
+
+export interface ExportButtonParams<T, F extends FiltersMap> {
+  renderError?: GetExportModalStepProps<T, F>['renderError'];
+  /**
+   *  A function to transform the cairo query to a QueryV2 object (which will be used to fetch data from the server):
+   * - `platformizedQuery`: QueryV2
+   * - `wixPatternsQuery`: ComputedQueryFull<F>
+   * - `selectedItems?`: string[]
+   * - `uncheckedValues?`: T[]
+   * - `isSelectAll`: boolean
+   * The function should return a QueryV2 instance or a promise of QueryV2
+   */
+  transformPlatformizedQuery?: TransformQuery<T, F>;
+  /**
+   * When set to `true`, the export progress will not show total / out of items.
+   */
+  differentQueryEndpointThanCollection?: boolean;
+  /**
+   * A function that returns the number of total items in the export, to show in the progress bar. Use this option when the export has a different total than the collection itself. For example: table is showing products, but the export includes also variants.
+   * The function accepts the same arguments as `transformPlatformizedQuery`, with the following modifications:
+   * - `platformizedQuery` is already the transformed QueryV2 returned from `transformPlatformizedQuery`
+   * - `collectionTotalPromise` - A promise that resolves to the `total` of the underlying table collection.
+   */
+  customTotal?: CustomTotalFn<T, F>;
+  /**
+   * The target endpoint to query data from. This endpoint must be verified to be compatible with export-service first, see [server side docs](https://dev.wix.com/docs/rest/business-management/export/export-async-job-v1/integration)
+   * - `artifact: string`
+   * - `service: string`
+   * - `method: string`
+   */
+  methodMetadata: CreateExportAsyncJobRequest['methodMetadata'];
+
+  /**
+   * The delimiter to use for array fields
+   * @default SEMICOLON
+   */
+  arrayFieldDelimiter?: keyof typeof ArrayFieldDelimiter;
+
+  /**
+   * Additional endpoint possible variations
+   * `requestQueryFieldNumber?: number` - The field number of the request query field. The default is field number = 1
+   * `responseRepeatedFieldName: string | null` - The name of the response repeated field, i.e items/contacts/products etc. (required)
+   * `responsePagingMetadataFieldName?: string | null` - The name of the response PagingMetadata field (default=paging_metadata)
+   */
+  methodSpec?: {
+    requestQueryFieldNumber?: keyof typeof QueryFieldNumber;
+    responsePagingMetadataFieldName?: MethodSpec['responsePagingMetadataFieldName'];
+    responseRepeatedFieldName?: MethodSpec['responseRepeatedFieldName'];
+  };
+  /**
+   * Translated CSV headers
+   * - `id?`: string; The path to the field out of the query response items. You can ask your BED team to create a list of available paths by running this [Scala script](https://bo.wix.com/wix-docs/rest/drafts/exportservice/integration#drafts_exportservice_integration_fields).
+   * - `header?`: string; How to present the filed in the CSV headers (translated).
+   */
+  fields: CreateExportAsyncJobRequest['fields'];
+  /**
+   *  Optional function to configure the download file name:
+   * - `platformizedQuery`: QueryV2
+   * - `wixPatternsQuery`: ComputedQueryFull<F>
+   * - `selectedItems?`: string[]
+   * - `uncheckedValues?`: T[]
+   * The function should return a string
+   */
+  saveAs?: SaveAsFn<T, F>;
+  /**
+   * Optional footer for export modal
+   * `text`: string
+   */
+  exportModalFooter?: GetExportModalStepProps<T, F>['exportModalFooter'];
+  /**
+   * Optional custom title for the items to export
+   */
+  exportModalTitle?: GetExportModalStepProps<T, F>['exportModalTitle'];
+  /**
+   * Optional custom title during the export process
+   */
+  onProgressModalTitle?: GetExportModalStepProps<T, F>['onProgressModalTitle'];
+  /**
+   * Optional custom message for the items that will be exported to CSV
+   */
+  exportToCSVMessage?: GetExportModalStepProps<T, F>['exportToCSVMessage'];
+}
+
+export type ExportButtonProps<T, F extends FiltersMap> = ExportButtonParams<
+  T,
+  F
+> & { toolbarType?: ExportButtonToolbarType };
+
+export type ExportModalProps<T, F extends FiltersMap> = ExportButtonParams<
+  T,
+  F
+>;
+
+export type ExportButtonModalLayoutProps<
+  T,
+  F extends FiltersMap,
+> = ExportModalProps<T, F> & {
+  exportModalState: ModalState;
+};

package/src/components/ExportButton/ExportStepCancel.tsx

@@ -0,0 +1,17 @@
+import { ExportState, FiltersMap } from '@wix/bex-core';
+import React from 'react';
+import { observer } from 'mobx-react-lite';
+import { Text } from '@wix/design-system';
+
+export interface ExportStepCancelProps<T, F extends FiltersMap> {
+  state: ExportState<T, F>;
+}
+
+function _ExportStepCancel<T, F extends FiltersMap>({
+  state,
+}: ExportStepCancelProps<T, F>) {
+  const { translate: t } = state;
+  return <Text widows>{t('cairo.export.cancelMessage')}</Text>;
+}
+
+export const ExportStepCancel = observer(_ExportStepCancel);

package/src/components/ExportButton/ExportStepConfig.tsx

@@ -0,0 +1,64 @@
+import { ExportState, FiltersMap, SelectedExportOption } from '@wix/bex-core';
+import { Box, RadioGroup, Text } from '@wix/design-system';
+import React from 'react';
+import { observer } from 'mobx-react-lite';
+import { useToolbarCollectionContext } from '../ToolbarCollectionContext';
+import { RadioGroupSafe } from './RadioGroupSafe';
+
+export interface ExportStepConfigProps<T, F extends FiltersMap> {
+  state: ExportState<T, F>;
+  exportToCSVMessage?: string;
+}
+
+function _ExportStepConfig<T, F extends FiltersMap>({
+  state,
+  exportToCSVMessage,
+}: ExportStepConfigProps<T, F>) {
+  const {
+    selectedExportOption,
+    disabledRadios,
+    totalForExportMap,
+    translate: t,
+  } = state;
+
+  const table = useToolbarCollectionContext();
+
+  return (
+    <Box gap="SP4" direction="vertical" paddingBottom="SP1">
+      <RadioGroupSafe
+        dataHook="export-group"
+        onChange={(val) =>
+          state.onExportTypeChange(val as SelectedExportOption)
+        }
+        value={selectedExportOption}
+        disabledRadios={disabledRadios}
+      >
+        <RadioGroup.Radio value="all">
+          {t('cairo.export.allItems')}
+        </RadioGroup.Radio>
+        <RadioGroup.Radio value="filtered">
+          {t('cairo.export.filteredItems')}{' '}
+          {disabledRadios.indexOf('filtered') === -1
+            ? totalForExportMap.filtered != null &&
+              `(${totalForExportMap.filtered})`
+            : '(0)'}
+        </RadioGroup.Radio>
+        {table.selectionProps.value.showSelection && (
+          <RadioGroup.Radio value="selected">
+            {t('cairo.export.selectedItems')}{' '}
+            {disabledRadios.indexOf('selected') === -1
+              ? totalForExportMap.selected != null &&
+                `(${totalForExportMap.selected})`
+              : '(0)'}
+          </RadioGroup.Radio>
+        )}
+      </RadioGroupSafe>
+
+      <Text dataHook="export-csv-message" widows>
+        {exportToCSVMessage || t('cairo.export.exportToCSVMessage')}
+      </Text>
+    </Box>
+  );
+}
+
+export const ExportStepConfig = observer(_ExportStepConfig);

package/src/components/ExportButton/ExportStepError.tsx

@@ -0,0 +1,28 @@
+import { ExportState, FiltersMap } from '@wix/bex-core';
+import { Box, LinearProgressBar } from '@wix/design-system';
+import React, { cloneElement, ReactElement } from 'react';
+import { observer } from 'mobx-react-lite';
+
+export interface ExportStepErrorProps<T, F extends FiltersMap> {
+  state: ExportState<T, F>;
+  children?: ReactElement;
+}
+
+function _ExportStepError<T, F extends FiltersMap>({
+  state,
+  children,
+}: ExportStepErrorProps<T, F>) {
+  const { counter } = state;
+
+  return (
+    <Box gap="SP2" direction="vertical" paddingBottom="SP1">
+      <LinearProgressBar error showProgressIndication value={counter} />
+      {children &&
+        cloneElement(children, {
+          dataHook: 'export-error-message',
+        })}
+    </Box>
+  );
+}
+
+export const ExportStepError = observer(_ExportStepError);

package/src/components/ExportButton/ExportStepProgress.tsx

@@ -0,0 +1,51 @@
+import { ExportState, FiltersMap, TransitionState } from '@wix/bex-core';
+import { Box, Text } from '@wix/design-system';
+import React, { useEffect, useState } from 'react';
+import { observer } from 'mobx-react-lite';
+// import { Collapse } from '../Collapse';
+import { reaction } from 'mobx';
+import { LinearAbsoluteProgressBar } from './LinearAbsoluteProgressBar';
+
+export interface ExportStepProgressProps<T, F extends FiltersMap> {
+  state: ExportState<T, F>;
+}
+
+function _ExportStepProgress<T, F extends FiltersMap>({
+  state,
+}: ExportStepProgressProps<T, F>) {
+  const { counter, totalForExport, absoluteCounter, translate: t } = state;
+
+  const [collapse] = useState(() => new TransitionState());
+
+  useEffect(() => {
+    const disposers = [
+      reaction(
+        () => state.iterationsCountPoll.pollCount > 7,
+        (show) => {
+          collapse.setShow(show);
+        },
+      ),
+    ];
+
+    return () => {
+      disposers.forEach((d) => d());
+    };
+  }, []);
+
+  return (
+    <Box gap="SP1" direction="vertical" paddingTop="SP1">
+      <LinearAbsoluteProgressBar
+        value={counter}
+        count={absoluteCounter}
+        total={totalForExport}
+        dataHook="export-linear-progress-bar"
+      />
+      <Text widows>{t('cairo.export.exportingDescription')}</Text>
+      {/* <Collapse state={collapse} timeout={300}>*/}
+      {/*  <Text>Still on it...</Text>*/}
+      {/* </Collapse>*/}
+    </Box>
+  );
+}
+
+export const ExportStepProgress = observer(_ExportStepProgress);

package/src/components/ExportButton/LinearAbsoluteProgressBar.tsx

@@ -0,0 +1,50 @@
+import {
+  Box,
+  LinearProgressBar,
+  LinearProgressBarProps,
+} from '@wix/design-system';
+import React, { useMemo, useState } from 'react';
+import { Heading } from '../Heading';
+
+export interface LinearAbsoluteProgressBarProps extends LinearProgressBarProps {
+  count: number;
+  total?: number | null;
+}
+
+export function LinearAbsoluteProgressBar(
+  props: LinearAbsoluteProgressBarProps,
+) {
+  const { dataHook, value, count, total } = props;
+  const [formatter] = useState(() =>
+    Intl.NumberFormat('en', { notation: 'compact' }),
+  );
+
+  const countFormatted = useMemo(() => formatter.format(count), [count]);
+  const totalFormatted = useMemo(
+    () => (total != null ? formatter.format(total) : null),
+    [total],
+  );
+
+  return (
+    <Box verticalAlign="middle" dataHook={dataHook}>
+      <LinearProgressBar value={value} />
+
+      <Box
+        width={total != null ? '54px' : '24px'}
+        minWidth={0}
+        flexShrink={0}
+        align="right"
+      >
+        <Heading size="extraTiny">
+          <span data-hook="progress-count">{countFormatted}</span>
+          {totalFormatted != null && (
+            <>
+              <span>/</span>
+              <span data-hook="progress-total">{totalFormatted}</span>
+            </>
+          )}
+        </Heading>
+      </Box>
+    </Box>
+  );
+}