@wix/patterns 1.254.0 → 1.256.0

package/src/state/EntityPage/EntityPageStateBIReporter.ts

@@ -0,0 +1,138 @@
+import { addEventListener, ReportBI, withoutDefaults } from '@wix/bex-core'; // withoutDefaults
+import { EntityPageState } from './EntityPageState';
+import { FieldValues } from 'react-hook-form';
+import { action } from 'mobx';
+import {
+  cairoTryAgainClicked,
+  cairoApiRequestDataLoadEnd,
+  cairoPageCtaClicked,
+  cairoPageDiscardChangesBeforeSave,
+  loadStart,
+  loadEnd,
+} from '@wix/bex-core/bi';
+
+export interface EntityPageStateBIReporterParams<
+  T,
+  V extends FieldValues = FieldValues,
+> {
+  reportBI: ReportBI;
+  entityPageState: EntityPageState<T, V>;
+}
+
+export class EntityPageStateBIReporter<T, V extends FieldValues> {
+  readonly entityPageState: EntityPageState<T, V>;
+  readonly reportBI: ReportBI;
+  readonly startTime: number = performance.now();
+  appLoaded?: () => void;
+
+  constructor(params: EntityPageStateBIReporterParams<T, V>) {
+    this.entityPageState = params.entityPageState;
+    this.reportBI = params.reportBI;
+  }
+
+  _getErrorType(e: any) {
+    const isNetworkError = e?.code === 'ERR_NETWORK';
+    return isNetworkError ? 'Network error' : 'Technical issue';
+  }
+
+  init() {
+    const { events } = this.entityPageState;
+    const disposers = [
+      addEventListener(
+        events,
+        'save',
+        action(() => {
+          events.once('saveError', (err) => {
+            this.reportSaveError(err, this.startTime);
+          });
+        }),
+      ),
+      (this.appLoaded = this.reportOnLoadStart(this.startTime)),
+    ];
+
+    return () => {
+      disposers.forEach((disposer) => disposer());
+    };
+  }
+
+  reportButtonClick({
+    ctaName,
+    isValid,
+    additionalInfo,
+  }: {
+    ctaName: string;
+    isValid?: boolean;
+    additionalInfo?: string;
+  }) {
+    this.reportBI(
+      withoutDefaults(cairoPageCtaClicked)({
+        ctaName,
+        ctaType: 'Main',
+        location: 'Entity page header',
+        isValid,
+        additionalInfo,
+      }),
+    );
+  }
+
+  reportSaveTryAgain() {
+    this.reportBI(
+      withoutDefaults(cairoTryAgainClicked)({
+        actionName: 'Saving Entity',
+        loaction: 'toast',
+      }),
+    );
+  }
+
+  reportSaveError(e: any, startTime: number) {
+    this.reportBI(
+      withoutDefaults(cairoApiRequestDataLoadEnd)({
+        errorType: this._getErrorType(e),
+        duration: performance.now() - startTime,
+      }),
+    );
+  }
+
+  reportOnBeforeUnload() {
+    const values = this.entityPageState.form.getValues();
+    const fields = Object.keys(values);
+    this.reportBI(
+      withoutDefaults(cairoPageDiscardChangesBeforeSave)({
+        numOfFields: fields.length,
+        numOfActions: fields.reduce(
+          (prev, key: any) =>
+            prev + +this.entityPageState.form.getFieldState(key)?.isDirty,
+          0,
+        ),
+      }),
+    );
+  }
+
+  reportOnLoadStart(startTime: number) {
+    this.reportBI(
+      withoutDefaults(loadStart)({
+        ...this._commonDynamicBiParams(),
+      }),
+    );
+    return () => {
+      this.reportOnLoadEnd(Math.round(performance.now() - startTime));
+    };
+  }
+
+  reportOnLoadEnd(endTime: number) {
+    this.reportBI(
+      withoutDefaults(loadEnd)({
+        ...this._commonDynamicBiParams(),
+        loadingTime: endTime,
+      }),
+    );
+  }
+
+  _commonDynamicBiParams() {
+    return {
+      url: window.location.href,
+      route: window.location.pathname,
+      routerUsage: this.entityPageState._withinRouter,
+    };
+  }
+}

package/src/state/EntityPage/index.ts

@@ -0,0 +1,3 @@
+export * from './EntityPageState';
+export * from './useEntityPageHeader';
+export * from './useEntityPageContent';

package/src/state/EntityPage/useEntityPageContent.tsx

@@ -0,0 +1,20 @@
+import { EntityPageContentElement } from '../../components/EntityPageContent';
+import { EntityPageAdditionalContent } from '../../components/EntityPageAdditionalContent';
+import { EntityPageMainContent } from '../../components/EntityPageMainContent';
+import { EntityPageActionsBar } from '../../components/EntityPage';
+import { useFormPageContent } from '../FormPage';
+
+export function useEntityPageContent(
+  child: EntityPageContentElement,
+  scrollableRef?: HTMLElement | null,
+) {
+  const pageContent = useFormPageContent(child, {
+    elementName: 'EntityPage',
+    MainContentElement: EntityPageMainContent,
+    AdditionalContentElement: EntityPageAdditionalContent,
+    FooterElement: EntityPageActionsBar,
+    scrollableRef,
+  });
+
+  return pageContent;
+}

package/src/state/EntityPage/useEntityPageHeader.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import { EntityPageHeaderElement } from '../../components/EntityPageHeader';
+import { useEntityPageContext } from '../../providers';
+import { EntityPageActionsBar } from '../../components/EntityPage';
+import { useFormPageHeader } from '../FormPage';
+import { useWixPatternsRouter } from '../../providers/WixPatternsRouterProvider';
+import { useIsMobile } from '../../hooks/useIsMobile';
+import { Breadcrumbs } from '@wix/design-system';
+
+export function useEntityPageHeader(child: EntityPageHeaderElement) {
+  const state = useEntityPageContext();
+  const router = useWixPatternsRouter();
+
+  const actionsBar = (
+    <EntityPageActionsBar moreActions={child.props.moreActions} />
+  );
+
+  const routerEntityData = router?.currentState?._chosenEntity?.entity;
+  const {
+    title = null,
+    subtitle = null,
+    breadcrumbs = null,
+  } = routerEntityData || !state.isFetching ? child.props : {};
+  const isMobile = useIsMobile();
+
+  const header = useFormPageHeader(child, {
+    headerProps: {
+      dataHook: 'entity-page-header',
+      actionsBar,
+      showBackButton: !isMobile,
+      onBackClicked: () => state.navigateToParent(),
+    },
+    overrides: {
+      title,
+      subtitle: isMobile ? undefined : subtitle,
+      breadcrumbs: isMobile ? <Breadcrumbs items={[]} /> : breadcrumbs,
+    },
+  });
+
+  return header;
+}

package/src/state/ExtensionMenuItemsState.ts

@@ -0,0 +1,70 @@
+import { ReactElement, createElement } from 'react';
+import { WixPatternsContainer, HostContainerExtension } from '@wix/bex-core';
+import { computed, makeObservable } from 'mobx';
+import { ExtensionsState } from './ExtensionsState';
+
+export interface ExtensionMenuItemsStateParams {
+  containerId?: string;
+  containerProps?: Record<string, any>;
+  container: WixPatternsContainer;
+}
+
+export interface ExtensionMenuItem {
+  biName?: string;
+  dataHook: string;
+  prefixIcon?: ReactElement;
+  text: string;
+  type: 'TPA';
+  appId?: string;
+  componentId: string;
+  onClick: (params?: Record<string, any>) => void;
+}
+
+export class ExtensionMenuItemsState {
+  readonly _extensionsState: ExtensionsState;
+
+  constructor(params: ExtensionMenuItemsStateParams) {
+    this._extensionsState = new ExtensionsState(params);
+
+    makeObservable(this, {
+      menuItems: computed,
+    });
+  }
+
+  get menuItems(): ExtensionMenuItem[] {
+    return this._extensionsState.items
+      .filter((item): item is Required<HostContainerExtension> => {
+        return Boolean(
+          item.title &&
+            item.menuItem?.IconComponent &&
+            item.menuItem?.structuredAction,
+        );
+      })
+      .map((extension) => {
+        const {
+          componentId,
+          appId,
+          menuItem: { IconComponent, structuredAction },
+        } = extension;
+
+        return {
+          biName: extension.title || `menu-item-extension-${componentId}`, // extension.title was requested explicitly by BI, it's not a mistake
+          dataHook: `menu-item-extension-${componentId}`,
+          prefixIcon: IconComponent && createElement(IconComponent),
+          text: extension.title,
+          onClick: structuredAction,
+          appId,
+          componentId,
+          type: 'TPA',
+        };
+      });
+  }
+
+  get containerProps() {
+    return this._extensionsState._containerProps;
+  }
+
+  init() {
+    return this._extensionsState.init();
+  }
+}

package/src/state/ExtensionsState.ts

@@ -0,0 +1,54 @@
+import {
+  WixPatternsContainer,
+  HostContainerExtension,
+  TaskState,
+} from '@wix/bex-core';
+import { computed, makeObservable } from 'mobx';
+
+export interface ExtensionsStateParams {
+  containerId?: string;
+  containerProps?: Record<string, any>;
+  container: WixPatternsContainer;
+}
+
+export class ExtensionsState {
+  readonly _container: WixPatternsContainer;
+  readonly _containerId?: string;
+  readonly _containerProps?: Record<string, any>;
+
+  readonly initTask = new TaskState<HostContainerExtension[]>();
+
+  constructor(params: ExtensionsStateParams) {
+    this._container = params.container;
+    this._containerId = params.containerId;
+    this._containerProps = params.containerProps;
+
+    makeObservable(this, {
+      items: computed,
+    });
+  }
+
+  get items() {
+    return this.initTask.status.data || [];
+  }
+
+  init() {
+    const { initTask } = this;
+
+    initTask.runOnce(async () => {
+      const {
+        _container: { getHostContainer },
+        _containerId,
+      } = this;
+
+      if (!getHostContainer || !_containerId) {
+        return [];
+      }
+
+      const hostContainer = getHostContainer(_containerId);
+      const items = await hostContainer.getExtensions(); // it's not really async, here for backwards compatibility with old biz types and eventually can be replaced with getContainerMenuItems
+
+      return items;
+    });
+  }
+}

package/src/state/FeaturesAvailabilityBIParams.ts

@@ -0,0 +1,26 @@
+export interface FeaturesAvailabilityBIParams {
+  isUsingDragAndDrop?: boolean | null;
+  isDisablingSearch?: boolean | null;
+  isUsingBulkActionsToolbar?: boolean | null;
+  isUsingFilters?: boolean | null;
+  isUsingHorizontalScroll?: boolean | null;
+  isUsingFolders?: boolean | null;
+  isUsingCounterInHeader?: boolean | null;
+  isUsingTableVirtualization?: boolean | null;
+  isUsingTabs?: boolean | null;
+  isUsingTags?: boolean | null;
+  isUsingSummaryRow?: boolean | null;
+  isUsingSecondaryActions?: boolean | null;
+  isUsingMoreActions?: boolean | null;
+}
+
+export interface AdditionalFeaturesAvailabilityBIParams {
+  isUsingTableSubtitle?: boolean | null;
+  isUsingCounterInHeader?: boolean | null;
+  isUsingSelectAllLimitation?: boolean | null;
+  isUsingErrorMessage?: boolean | null;
+  isUsingAllItemsView?: boolean | null;
+  isUsingCustomEmptyState?: boolean | null;
+  isUsingCustomNoResultsState?: boolean | null;
+  isUsingPrimaryActionCta?: boolean | null;
+}

package/src/state/FilterValueTotalState.ts

@@ -0,0 +1,150 @@
+import {
+  CollectionOptimisticActions,
+  CollectionState,
+  Filter,
+  FiltersMap,
+} from '@wix/bex-core';
+import { addEventListener } from '@wix/bex-core/util';
+import mapValues from 'lodash/mapValues';
+import { action, makeObservable } from 'mobx';
+
+export interface FilterValueTotalStateParams<T, F extends FiltersMap, V> {
+  readonly filter: Filter<V[]>;
+  readonly collection: CollectionState<T, F>;
+  readonly value: V | null | undefined;
+  readonly optimisticActions?: CollectionOptimisticActions<T, F>;
+  readonly ignoreSearch?: boolean;
+  readonly fetchData?: CollectionState<T, F>['fetchData'];
+}
+
+export class FilterValueTotalState<T, F extends FiltersMap, V> {
+  readonly collection;
+
+  readonly totalsCollection;
+  readonly optimisticActions;
+  readonly ignoreSearch;
+
+  tabFilter: Filter<V[]> | null | undefined;
+  value: V | null | undefined;
+
+  constructor(params: FilterValueTotalStateParams<T, F, V>) {
+    this.collection = params.collection;
+    this.optimisticActions = params.optimisticActions;
+    this.ignoreSearch = params.ignoreSearch;
+    this.value = params.value;
+
+    const {
+      errorMonitor,
+      errorHandler,
+      onlineState,
+      history,
+      translate,
+      queryCache,
+      lodash,
+      queryName,
+      itemKey,
+      itemName,
+      paginationMode,
+      selectionConsistencyMode,
+      query: { customFilters, search },
+      fetchData: fetchDataCollection,
+    } = params.collection.result.fetchTotal?._totalsCollection ??
+    params.collection;
+
+    const fetchData = params.fetchData ?? fetchDataCollection;
+
+    const filters = mapValues(customFilters, (filter) => {
+      if (filter === params.filter) {
+        const tabFilter = filter.clone();
+        this.tabFilter = tabFilter;
+        if (params.value != null) {
+          tabFilter.setValue([params.value]);
+        } else {
+          tabFilter.reset();
+        }
+
+        return tabFilter;
+      }
+
+      return filter;
+    }) as F;
+
+    this.totalsCollection = new CollectionState<T, F>({
+      errorMonitor,
+      errorHandler,
+      onlineState,
+      history,
+      translate,
+      queryCache,
+      lodash,
+      queryName,
+      itemKey,
+      itemName,
+      limit: 1,
+      fetchData: async (query) => {
+        // const fetchDataPromise = fetchData(query);
+        //
+        // const collectionUpdateResultPromise = new Promise<void>((resolve) => {
+        //   this.collection.emitter.on('refreshUpdateResult', resolve);
+        // });
+        //
+        // await Promise.all([fetchDataPromise, collectionUpdateResultPromise]);
+
+        return fetchData(query);
+      },
+      paginationMode: paginationMode.id,
+      selectionConsistencyMode,
+      search: params.ignoreSearch ? undefined : search,
+      filters,
+    });
+
+    makeObservable(this, {
+      init: action,
+    });
+  }
+
+  refresh(value: V | null | undefined) {
+    const { tabFilter } = this;
+    this.value = value;
+
+    if (tabFilter) {
+      if (value != null) {
+        tabFilter.refresh([value]);
+      } else {
+        tabFilter.reset();
+      }
+    }
+  }
+
+  init() {
+    const { totalsCollection, optimisticActions, ignoreSearch, collection } =
+      this;
+
+    const disposers = [
+      totalsCollection.init(),
+      addEventListener(collection.emitter, 'search', () => {
+        if (!ignoreSearch) {
+          totalsCollection.clearResultAndMoveToStart();
+        }
+      }),
+      addEventListener(collection.emitter, 'clearSearch', () => {
+        if (!ignoreSearch) {
+          totalsCollection.clearResultAndMoveToStart();
+        }
+      }),
+      addEventListener(collection.emitter, 'refreshAllPages', () => {
+        totalsCollection.refreshAllPages();
+      }),
+      addEventListener(collection.emitter, 'refreshCurrentPage', () => {
+        totalsCollection.refreshCurrentPage();
+      }),
+      ...(optimisticActions
+        ? [optimisticActions.initCollection(totalsCollection)]
+        : []),
+    ];
+
+    return () => {
+      disposers.forEach((d) => d());
+    };
+  }
+}

package/src/state/FoldersAndItemsCollectionsState.ts

@@ -0,0 +1,164 @@
+import {
+  CollectionState,
+  Filter,
+  FiltersMap,
+  syncWithSharedQuery,
+} from '@wix/bex-core';
+import {
+  ToolbarCollectionState,
+  ToolbarCollectionStateParamsInitParams,
+} from './ToolbarCollectionState';
+import { addEventListener } from '@wix/bex-core/util';
+import { computed, makeObservable } from 'mobx';
+
+export type PartialAllFilters<
+  F1 extends FiltersMap,
+  F2 extends FiltersMap,
+> = Partial<F1 & F2>;
+
+const isActiveFilterAndNotInCollection =
+  <T>({ query: { filtersArray } }: CollectionState<T, {}>) =>
+  (f1: Filter<unknown>) =>
+    !f1.isEmpty && !filtersArray.some((f2) => f2 === f1);
+
+export interface FoldersAndItemsCollectionsStateInitParams
+  extends ToolbarCollectionStateParamsInitParams {}
+
+export interface FoldersAndItemsCollectionsStateParams<
+  T1,
+  F1 extends FiltersMap,
+  T2,
+  F2 extends FiltersMap,
+> {
+  readonly items: CollectionState<T1, F1>;
+  readonly folders: CollectionState<T2, F2>;
+  readonly toolbar: ToolbarCollectionState<T1, PartialAllFilters<F1, F2>>;
+}
+
+export class FoldersAndItemsCollectionsState<
+  T1,
+  F1 extends FiltersMap,
+  T2,
+  F2 extends FiltersMap,
+> {
+  readonly toolbar;
+  readonly items;
+  readonly folders;
+
+  constructor(params: FoldersAndItemsCollectionsStateParams<T1, F1, T2, F2>) {
+    this.toolbar = params.toolbar;
+    this.items = params.items;
+    this.folders = params.folders;
+
+    this.toolbar.multi.collections.push(
+      this.folders as CollectionState<unknown, {}>,
+    );
+
+    syncWithSharedQuery(this.folders.query, this.items.query);
+    this.items.bulkSelect.useNewSelectAllLogic = true;
+    this.folders.bulkSelect.useNewSelectAllLogic = true;
+
+    makeObservable(this, {
+      hasItemsOnlyActiveFilters: computed,
+      hasFoldersOnlyActiveFilters: computed,
+      showEmptyState: computed,
+      hasSelectedFolders: computed,
+    });
+  }
+
+  get hasFoldersOnlyActiveFilters() {
+    const { folders, items } = this;
+    return folders.query.filtersArray.some(
+      isActiveFilterAndNotInCollection(items),
+    );
+  }
+
+  get hasItemsOnlyActiveFilters() {
+    const { folders, items } = this;
+    return items.query.filtersArray.some(
+      isActiveFilterAndNotInCollection(folders),
+    );
+  }
+
+  get showEmptyState() {
+    const {
+      toolbar: {
+        multi: { showEmptyState },
+      },
+      items,
+      folders,
+      hasFoldersOnlyActiveFilters,
+      hasItemsOnlyActiveFilters,
+    } = this;
+    return (
+      showEmptyState ||
+      (folders.showEmptyState && hasFoldersOnlyActiveFilters) ||
+      (items.showEmptyState && hasItemsOnlyActiveFilters)
+    );
+  }
+
+  get hasAvailableItems() {
+    const {
+      toolbar: {
+        multi: { hasAvailableItems },
+      },
+      items,
+      folders,
+    } = this;
+    return (
+      hasAvailableItems || folders.hasAvailableItems || items.hasAvailableItems
+    );
+  }
+
+  get resultOriginQuerySearch() {
+    const {
+      toolbar: {
+        multi: { resultOriginQuerySearch },
+      },
+    } = this;
+    return resultOriginQuerySearch;
+  }
+
+  get hasNonPersistentActiveFilters() {
+    const {
+      toolbar: {
+        multi: { hasNonPersistentActiveFilters },
+      },
+    } = this;
+    return hasNonPersistentActiveFilters;
+  }
+
+  get query() {
+    return this.items.query;
+  }
+
+  get hasSelectedFolders() {
+    return !!this.folders.bulkSelect.selectedIds.length;
+  }
+
+  init(initParams: FoldersAndItemsCollectionsStateInitParams) {
+    const { items, folders, toolbar } = this;
+    const disposers = [
+      toolbar.init(initParams),
+      addEventListener(items.emitter, 'search', ({ clearResult }) => {
+        folders._runSearch(clearResult);
+      }),
+      addEventListener(items.emitter, 'clearSearch', () => {
+        folders.clearResultAndMoveToStart();
+      }),
+      addEventListener(items.emitter, 'sort', (params) => {
+        folders._runSort(params);
+      }),
+      addEventListener(items.emitter, 'beforeSortStart', (params) => {
+        folders.emitter.emit('beforeSortStart', params);
+      }),
+      addEventListener(items.emitter, 'sortStart', (params) => {
+        folders.emitter.emit('sortStart', params);
+      }),
+    ];
+
+    return () => {
+      disposers.forEach((d) => d());
+    };
+  }
+}

package/src/state/FormPage/FormFooter.tsx

@@ -0,0 +1,30 @@
+import React, { ComponentType, useEffect, useState } from 'react';
+import { Page } from '@wix/design-system';
+import { useFormPageContext } from '../../providers/FormPageContext';
+import { FormPageActionsBarProps } from '../../components/FormPage';
+
+export function FormFooter({
+  FooterElement,
+  scrollableRef,
+}: {
+  FooterElement: ComponentType<FormPageActionsBarProps>;
+  scrollableRef?: HTMLElement | null;
+}) {
+  const [scrollable, setScrollable] = useState<boolean>();
+  const pageState = useFormPageContext();
+
+  useEffect(() => {
+    const pageStatus = pageState?.initTask?.status;
+    if (!pageStatus.isLoading && !pageStatus.isIdle) {
+      setScrollable(
+        scrollableRef?.scrollHeight! > scrollableRef?.clientHeight!,
+      );
+    }
+  }, [pageState?.initTask?.status]);
+
+  return (
+    <Page.Footer>
+      <Page.Footer.End>{scrollable && <FooterElement />}</Page.Footer.End>
+    </Page.Footer>
+  );
+}