@wix/patterns 1.255.0 → 1.256.0

package/src/components/Tags/ManageTags/ManageTagsModal/ManageTagsModal.tsx

@@ -0,0 +1,212 @@
+import React, { useCallback, useRef } from 'react';
+import { observer } from 'mobx-react-lite';
+import {
+  CustomModalLayout,
+  Modal,
+  Box,
+  TextButton,
+  AddItem,
+  Text,
+  Divider,
+  Search,
+} from '@wix/design-system';
+import { Add } from '@wix/wix-ui-icons-common';
+import { useWixPatternsContainer } from '@wix/bex-core/react';
+import { TagsListItem } from './List/TagsListItem';
+import { st, classes } from './ManageTagsModal.st.css.js';
+import { ScrollableContent } from '../../../ScrollableContent';
+import { MessageActionModal } from '../../../ActionModal';
+import { Trans } from '../../../Trans';
+import { TagsModalState } from '../../../../state/TagsModalState';
+import { NewTagItemEditable } from './NewTagItemEditable';
+import { minimalRequiredWdsRuntimeCheck } from '../../../../minimalRequiredWdsRuntimeCheck';
+import { ManageTagsNotification } from './ManageTagsNotification';
+import { TAG_MAX_LENGTH, ToastConfig } from '@wix/bex-core';
+
+export interface ManageTagsModalProps {
+  state: TagsModalState;
+}
+const ManageTagsModalComponent = ({ state }: ManageTagsModalProps) => {
+  if (process.env.NODE_ENV !== 'production') {
+    minimalRequiredWdsRuntimeCheck({
+      required: '^1.72.0',
+      requiredBy: 'WixPatterns/ManageTagsModal',
+    });
+  }
+  const { translate: t } = useWixPatternsContainer();
+  state.ref = useRef<HTMLDivElement>(null);
+
+  const closeModal = useCallback(() => {
+    state.closeManageTagsModal();
+  }, [state]);
+
+  const handleCreateClick = useCallback(() => {
+    state.handleCreateCtaClick();
+  }, [state]);
+
+  const handleCreateTagFromSearch = useCallback(() => {
+    state.createTagFromSearch();
+  }, [state]);
+
+  const handleSearchClear = useCallback(() => {
+    state.handleSearchClear();
+  }, [state]);
+
+  const handleSearchChange = useCallback(
+    (event) => {
+      const newSearchValue = event.target.value;
+      state.handleSearchChange(newSearchValue);
+    },
+    [state],
+  );
+
+  const handleNotificationClose = useCallback(
+    (toastConfig: ToastConfig) => {
+      state.hideNotification(toastConfig);
+    },
+    [state],
+  );
+
+  return (
+    <Modal
+      isOpen={state.isOpen}
+      onRequestClose={closeModal}
+      shouldCloseOnOverlayClick
+      dataHook="manage-tags-modal"
+    >
+      <Box width={510}>
+        <CustomModalLayout
+          className={st(classes.root)}
+          overflowY="visible"
+          showFooterDivider
+          removeContentPadding
+          title={t('cairo.tags.manageTags.modal.title', {
+            EntityName: state.entityTypeName,
+          })}
+          subtitle={t('cairo.tags.manageTags.modal.subtitle')}
+          sideActions={
+            <Box>
+              <TextButton
+                dataHook="manage-tags-modal-create-btn"
+                size="small"
+                prefixIcon={<Add />}
+                onClick={handleCreateClick}
+                disabled={state.isShowingNewTagListItem}
+              >
+                {t('cairo.tags.manageTags.modal.add.CTA')}
+              </TextButton>
+            </Box>
+          }
+          primaryButtonText={t('cairo.tags.manageTags.modal.close.CTA')}
+          primaryButtonOnClick={closeModal}
+          onCloseButtonClick={closeModal}
+          dataHook="manage-tags-modal-layout"
+        >
+          <Box direction="vertical" height="100%" flex={1}>
+            {state.toastConfig && (
+              <Box
+                position="absolute"
+                top="18px"
+                left="50%"
+                transform="translateX(-50%)"
+                maxWidth="388px"
+              >
+                <ManageTagsNotification
+                  toastConfig={state.toastConfig}
+                  onClose={handleNotificationClose}
+                  dataHook="manage-tags-modal-notification"
+                />
+              </Box>
+            )}
+            <Box direction="vertical" gap="SP2">
+              <Box padding="0 SP4">
+                <Search
+                  autoFocus
+                  dataHook="manage-tags-modal-search"
+                  onChange={handleSearchChange}
+                  value={state.searchValue}
+                  placeholder={t(
+                    'cairo.tags.manageTags.modal.search.placeholder',
+                  )}
+                  onEnterPressed={handleCreateTagFromSearch}
+                  onClear={handleSearchClear}
+                />
+              </Box>
+              <Divider />
+            </Box>
+            <Box
+              direction="vertical"
+              maxHeight={446}
+              minHeight={225}
+              dataHook="manage-tags-modal-tags-list"
+              overflowY="auto"
+              paddingBottom="SP1"
+            >
+              <ScrollableContent overflowY smooth ref={state.ref}>
+                {state.searchValue && state.shownItems.length === 0 && (
+                  <div>
+                    <AddItem
+                      theme="plain"
+                      size="tiny"
+                      alignItems="left"
+                      onClick={handleCreateTagFromSearch}
+                      dataHook="manage-tags-modal-list-add"
+                    >
+                      <Text skin="primary">
+                        <Trans
+                          i18nKey="cairo.tags.manageTags.modal.list.create.CTA"
+                          values={{
+                            tagName: `${state.searchValue.slice(
+                              0,
+                              TAG_MAX_LENGTH,
+                            )}`,
+                          }}
+                          components={{
+                            name: <Text weight="bold" skin="primary" />,
+                          }}
+                        />
+                      </Text>
+                    </AddItem>
+                  </div>
+                )}
+                {state.shownItems.map((tag, idx) => (
+                  <TagsListItem
+                    state={state}
+                    key={tag.id}
+                    tag={tag}
+                    isLastTag={
+                      !state.isShowingNewTagListItem &&
+                      idx === state.shownItems.length - 1
+                    }
+                  />
+                ))}
+                {state.isShowingNewTagListItem && (
+                  <NewTagItemEditable state={state} />
+                )}
+              </ScrollableContent>
+            </Box>
+          </Box>
+        </CustomModalLayout>
+      </Box>
+      {state.confirmModalState.value && (
+        <MessageActionModal
+          dataHook="manage-tags-modal-confirm-delete-modal"
+          state={state.confirmModalState}
+          content={
+            <Trans
+              i18nKey="cairo.tags.manageTags.modal.deleteModal.body"
+              values={{ name: state.tagToDelete?.name }}
+              components={{
+                text: <Text />,
+                name: <Text weight="bold" />,
+              }}
+            />
+          }
+          {...state.confirmModalState.value}
+        />
+      )}
+    </Modal>
+  );
+};
+
+export const ManageTagsModal = observer(ManageTagsModalComponent);

package/src/components/Tags/ManageTags/ManageTagsModal/ManageTagsModal.uni.driver.ts

@@ -0,0 +1,118 @@
+import { UniDriver } from '@wix/wix-ui-test-utils/unidriver';
+import { baseUniDriverFactory } from '../../../../unidriver';
+import {
+  CustomModalLayoutUniDriver,
+  TagUniDriver,
+  SearchUniDriver,
+  AddItemUniDriver,
+  ListItemEditableUniDriver,
+  TextButtonUniDriver,
+  FormFieldUniDriver,
+  IconButtonUniDriver,
+  MessageModalLayoutUniDriver,
+  FloatingNotificationUniDriver,
+} from '@wix/design-system/dist/testkit/unidriver';
+
+export function ManageTagsModalUniDriver(base: UniDriver, body: UniDriver) {
+  const modalBase = () => body.$(`[data-hook="manage-tags-modal-layout"]`);
+
+  const getManageTagsModal = () =>
+    CustomModalLayoutUniDriver(modalBase(), body);
+
+  const exists = () => getManageTagsModal().exists();
+
+  const getModalTitle = () => getManageTagsModal().getTitleText();
+
+  const getTags = () => body.$$(`[data-hook="manage-tags-modal-tag"]`);
+
+  const getTagsCount = () => getTags().count();
+
+  const getTagByIdx = (idx: number) => TagUniDriver(getTags().get(idx), body);
+
+  const getTagById = (tagId: string) =>
+    TagUniDriver(body.$(`[id="${tagId}"]`), body);
+
+  const getTagRows = () => body.$$(`[data-hook="manage-tags-modal-tag-row"]`);
+
+  const getTagRowByIdx = (idx: number) => getTagRows().get(idx);
+
+  const clickTagRenameButtonByIdx = (idx: number) =>
+    IconButtonUniDriver(
+      getTagRowByIdx(idx).$(`[data-hook="manage-tags-modal-tag-action-edit"]`),
+      body,
+    ).click();
+
+  const clickTagDeleteButtonByIdx = (idx: number) =>
+    IconButtonUniDriver(
+      getTagRowByIdx(idx).$(
+        `[data-hook="manage-tags-modal-tag-action-delete"]`,
+      ),
+      body,
+    ).click();
+
+  const getCreateBtnDriver = () =>
+    TextButtonUniDriver(
+      body.$(`[data-hook="manage-tags-modal-create-btn"]`),
+      body,
+    );
+
+  const getNotificationDriver = () =>
+    FloatingNotificationUniDriver(
+      body.$(`[data-hook="manage-tags-modal-notification"]`),
+      body,
+    );
+
+  const getNotificationButtonExists = () =>
+    body
+      .$(`[data-hook="manage-tags-modal-notification"]`)
+      .$(`[data-hook="floating-notification-text-button"]`)
+      .exists();
+
+  const clickCloseButton = async () => {
+    await getManageTagsModal().clickCloseButton();
+  };
+
+  const getSearchDriver = () =>
+    SearchUniDriver(body.$('[data-hook="manage-tags-modal-search"]'), body);
+
+  const getAddItem = () =>
+    AddItemUniDriver(body.$(`[data-hook="manage-tags-modal-list-add"]`), body);
+
+  const getFormField = () =>
+    FormFieldUniDriver(
+      body.$(`[data-hook="manage-tags-modal-tag-form-field"]`),
+      body,
+    );
+  const getListItemEditable = () =>
+    ListItemEditableUniDriver(
+      body.$(`[data-hook="manage-tags-modal-tag-editable"]`),
+      body,
+    );
+
+  const getMessageModalLayout = () =>
+    MessageModalLayoutUniDriver(
+      body.$(`[data-hook="manage-tags-modal-confirm-delete-modal"]`),
+      body,
+    );
+
+  return {
+    ...baseUniDriverFactory(base),
+    exists,
+    getTagsCount,
+    getTagByIdx,
+    getTagById,
+    getModalTitle,
+    getCreateBtnDriver,
+    getNotificationDriver,
+    getNotificationButtonExists,
+    clickCloseButton,
+    getSearchDriver,
+    getAddItem,
+    getFormField,
+    getListItemEditable,
+    clickTagRenameButtonByIdx,
+    clickTagDeleteButtonByIdx,
+    getTagRows,
+    getMessageModalLayout,
+  };
+}

package/src/components/Tags/ManageTags/ManageTagsModal/ManageTagsNotification.tsx

@@ -0,0 +1,80 @@
+import React, { useMemo } from 'react';
+import { ToastConfig, ToastType } from '@wix/bex-core';
+import {
+  FloatingNotification,
+  FloatingNotificationType,
+  IconElement,
+} from '@wix/design-system';
+import { InfoCircle, StatusComplete } from '@wix/wix-ui-icons-common';
+
+interface ManageTagsNotificationProps {
+  toastConfig: ToastConfig;
+  onClose: (toastConfig: ToastConfig) => unknown;
+  dataHook?: string;
+}
+
+const toastTypeToNotificationType: {
+  [key in ToastType]?: FloatingNotificationType;
+} = {
+  SUCCESS: 'success',
+  ERROR: 'destructive',
+};
+
+const convertToastConfigToButtonProps = ({
+  toastConfig,
+  onClose,
+}: {
+  toastConfig: ToastConfig;
+  onClose: (toastConfig: ToastConfig) => unknown;
+}) => {
+  return {
+    label: toastConfig.action?.text,
+    onClick: () => {
+      toastConfig.action?.onClick?.();
+
+      if (toastConfig.action?.removeToastOnClick) {
+        onClose(toastConfig);
+      }
+    },
+  };
+};
+
+const toastTypeToIcon: {
+  [key in ToastType]?: IconElement;
+} = {
+  SUCCESS: <StatusComplete />,
+  ERROR: <InfoCircle />,
+};
+
+export const ManageTagsNotification = ({
+  toastConfig,
+  onClose,
+  dataHook,
+}: ManageTagsNotificationProps) => {
+  const notificationProps = useMemo(() => {
+    let type;
+    let prefixIcon;
+    if (toastConfig.type) {
+      type = toastTypeToNotificationType[toastConfig.type];
+      prefixIcon = toastTypeToIcon[toastConfig.type];
+    }
+
+    const buttonProps = convertToastConfigToButtonProps({
+      toastConfig,
+      onClose,
+    });
+
+    return {
+      type,
+      prefixIcon,
+      text: toastConfig.message,
+      buttonProps:
+        toastConfig.action?.uiType === 'BUTTON' ? buttonProps : undefined,
+      textButtonProps:
+        toastConfig.action?.uiType === 'LINK' ? buttonProps : undefined,
+      onClose: () => onClose(toastConfig),
+    };
+  }, [toastConfig, onClose]);
+
+  return <FloatingNotification dataHook={dataHook} {...notificationProps} />;
+};

package/src/components/Tags/ManageTags/ManageTagsModal/NewTagItemEditable.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+
+import { TagItemEditable } from './TagItemEditable';
+import { TagsModalState } from '../../../../state/TagsModalState';
+import { observer } from 'mobx-react-lite';
+import { TAG_MAX_LENGTH } from '@wix/bex-core';
+
+export interface NewTagItemEditableProps {
+  state: TagsModalState;
+}
+
+const _NewTagItemEditable = ({ state }: NewTagItemEditableProps) => {
+  const handleApprove = (name: string) => {
+    state.createTagFromList(name);
+  };
+  const handleCancel = () => {
+    state.handleCancelEditCtaClick();
+  };
+
+  return (
+    <TagItemEditable
+      isLastTag
+      errorMessage={state.editedTagErrorMessage}
+      onApprove={handleApprove}
+      onCancel={handleCancel}
+      maxLength={TAG_MAX_LENGTH}
+    />
+  );
+};
+
+export const NewTagItemEditable = observer(_NewTagItemEditable);

package/src/components/Tags/ManageTags/ManageTagsModal/TagItemEditable.tsx

@@ -0,0 +1,81 @@
+import React, { useState } from 'react';
+import {
+  TableListItem,
+  ListItemEditable,
+  ListItemEditableSize,
+  ListItemEditableMargins,
+  ListItemEditableProps,
+  FormField,
+  Input,
+} from '@wix/design-system';
+import { useWixPatternsContainer } from '@wix/bex-core/react';
+
+export interface TagItemEditableProps extends Partial<ListItemEditableProps> {
+  tagName?: string;
+  isLastTag: boolean;
+  errorMessage: string | null;
+  onApprove: (value: string) => void;
+  onCancel: () => void;
+  maxLength: number;
+}
+
+export const TagItemEditable = ({
+  tagName,
+  isLastTag,
+  errorMessage,
+  onApprove,
+  onCancel,
+  maxLength,
+}: TagItemEditableProps) => {
+  const { translate: t } = useWixPatternsContainer();
+  const [currentValueLength, setCurrentValueLength] = useState(
+    tagName?.length ?? 0,
+  );
+
+  return (
+    <TableListItem
+      options={[
+        {
+          value: (
+            <FormField
+              dataHook="manage-tags-modal-tag-form-field"
+              status={errorMessage ? 'error' : undefined}
+              statusMessage={errorMessage}
+            >
+              <ListItemEditable
+                dataHook="manage-tags-modal-tag-editable"
+                value={tagName ?? ''}
+                onEnterPressed={(e: React.KeyboardEvent<HTMLInputElement>) => {
+                  onApprove(e.currentTarget.value);
+                }}
+                onChange={(e) => setCurrentValueLength(e.target.value.length)}
+                onApprove={onApprove}
+                onCancel={onCancel}
+                placeholder={t(
+                  'cairo.tags.manageTags.modal.list.input.placeholder',
+                )}
+                cancelButtonTooltipContent={t(
+                  'cairo.tags.manageTags.modal.list.input.cancel.CTA',
+                )}
+                approveButtonTooltipContent={t(
+                  'cairo.tags.manageTags.modal.list.input.save.CTA',
+                )}
+                approveButtonDisabledOnEmpty={false}
+                autoFocus
+                size={'small' as ListItemEditableSize}
+                margins={'none' as ListItemEditableMargins}
+                suffix={
+                  <Input.Affix>
+                    {`${currentValueLength} / ${maxLength}`}
+                  </Input.Affix>
+                }
+              />
+            </FormField>
+          ),
+        },
+      ]}
+      verticalPadding="tiny"
+      showDivider={!isLastTag}
+    />
+  );
+};

package/src/components/Tags/ManageTags/ManageTagsModal/index.ts

@@ -0,0 +1,2 @@
+export * from '../../Tags';
+export * from './ManageTagsModal';

package/src/components/Tags/ManageTags/index.ts

@@ -0,0 +1 @@
+export * from './ManageTagsModal';

package/src/components/Tags/Tags.tsx

@@ -0,0 +1,66 @@
+import { ReactElement, useState } from 'react';
+import { useToolbarCollectionContext } from '../ToolbarCollectionContext';
+import { TagsCollectionState } from '../../state/TagsCollectionState';
+import { TagsAssignButtonConfig, TagsColumnConfig } from './types';
+import { FiltersMap, Tags as TagsType } from '@wix/bex-core';
+import { BulkUpdateTagsParams } from '../../state/TagsBulkAssignPopoverState';
+import { AsyncBulkUpdateTagsParams } from '../../state/TagsBulkAssignAsyncState';
+import { manageTagsPageAction } from './manageTagsPageAction';
+
+export interface TagsProps<T, F extends FiltersMap> {
+  /**
+   * A string that represents the name of the entity type(for example "Orders"), will be shown on the title of the manage tags modal
+   */
+  entityTypeName: string;
+  /**
+   * Optional config for the column
+   * @param hideable When set to false, will make the column always being checked and shown
+   * @param defaultHidden  Unchecks the column by default for the first visit (not relevant when hideable=false)
+   */
+  columnConfig?: TagsColumnConfig<T>;
+  /**
+   * A callback function that gets a list of assigned and a list of unassigned tags for the selected entities in the bulk and updates the entities according to it
+   * @param assignTags The assign tags objects that need to be update in the entities
+   * @param unassignTags The unassign tags objects that need to be update in the entities
+   * @param entityIds The entities IDs that need to be updated
+   */
+  bulkUpdateTags: (params: BulkUpdateTagsParams) => Promise<unknown>;
+  /**
+   * A callback function that takes the user's current entity selection as a parameter and starts an asynchronous bulk update of the tags using asyncJobInfra
+   */
+  asyncBulkUpdateTags?: (
+    params: AsyncBulkUpdateTagsParams<T, F>,
+  ) => Promise<{ jobId: string }>;
+  getTags?: (item: T) => TagsType;
+  assignButtonConfig?: TagsAssignButtonConfig;
+  /**
+   * When set to true, will disable "Manage tags" action in the page actions menu.
+   */
+  disableDefaultPageAction?: boolean;
+}
+
+export const Tags = <T, F extends FiltersMap>(props: TagsProps<T, F>) => {
+  const toolbarCollectionState = useToolbarCollectionContext<T, F>();
+
+  useState(() => {
+    toolbarCollectionState.tagsCollectionState ??= new TagsCollectionState<
+      T,
+      F
+    >({
+      toolbar: toolbarCollectionState,
+      props,
+      Tags,
+      ...props,
+    });
+    return toolbarCollectionState.tagsCollectionState;
+  });
+
+  return null;
+};
+
+Tags.manageTagsPageAction = manageTagsPageAction;
+
+export type TagsElement<T, F extends FiltersMap> = ReactElement<
+  TagsProps<T, F>,
+  typeof Tags
+>;

package/src/components/Tags/TagsBulkAssignUtils.ts

@@ -0,0 +1,59 @@
+import { ToolbarCollectionState } from '../../state';
+import { FiltersMap } from '@wix/bex-core';
+
+export function getBulkAssignStatus<T, F extends FiltersMap>({
+  state,
+}: {
+  state: ToolbarCollectionState<T, F>;
+}) {
+  const canUseBulkSync =
+    state.tagsCollectionState?.tagsBulkAssignPopoverState.bulkAssignSyncState
+      .canUseBulkSync;
+  const canBulkAssignAsync =
+    state.tagsCollectionState?.tagsBulkAssignPopoverState.bulkAssignAsyncState
+      .canBulkAssignAsync;
+  const hasReachedMaxSelectedItems = !canUseBulkSync && !canBulkAssignAsync;
+
+  const isDuringApplyChanges =
+    state.tagsCollectionState?.tagsBulkAssignPopoverState.bulkAssignAsyncState
+      .isDuringApplyChanges;
+
+  return { hasReachedMaxSelectedItems, isDuringApplyChanges };
+}
+
+export function getDisabledTooltipContent<T, F extends FiltersMap>({
+  state,
+  hasSelectedFolders,
+}: {
+  state: ToolbarCollectionState<T, F>;
+  hasSelectedFolders?: boolean;
+}) {
+  const { hasReachedMaxSelectedItems, isDuringApplyChanges } =
+    getBulkAssignStatus({ state });
+
+  const assignButtonConfig =
+    state?.tagsCollectionState?.tagsBulkAssignPopoverState.assignButtonConfig;
+
+  const assignButtomTooltip = assignButtonConfig?.isDisabled
+    ? assignButtonConfig.tooltipContent
+    : null;
+
+  switch (true) {
+    case isDuringApplyChanges:
+      return state.container.translate(
+        'cairo.tags.popover.bulkItemUpdate.tooltip',
+      );
+    case hasSelectedFolders:
+      return state.container.translate(
+        'cairo.tags.popover.assignFolder.tooltip',
+      );
+    case hasReachedMaxSelectedItems:
+      return state.container.translate(
+        'cairo.tags.popover.bulkItemLimit.tooltip',
+      );
+    case assignButtonConfig?.isDisabled:
+      return assignButtomTooltip;
+    default:
+      return null;
+  }
+}

package/src/components/Tags/TagsFolders.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import { FiltersMap } from '@wix/bex-core';
+import { Tags, TagsProps } from './Tags';
+
+export interface TagsFoldersProps<T, F extends FiltersMap>
+  extends TagsProps<T, F> {}
+
+export const TagsFolders = <T, F extends FiltersMap>(
+  props: TagsFoldersProps<T, F>,
+) => {
+  return <Tags {...props} />;
+};

package/src/components/Tags/index.ts

@@ -0,0 +1,3 @@
+export * from './Tags';
+export * from './ManageTags';
+export * from './TagsFolders';