@wix/patterns 1.366.0 → 1.370.0

package/dist/docs/ExportTo.md

@@ -0,0 +1,894 @@
+# ExportTo
+
+**Category:** Features/Export
+
+## Design
+
+### ExportTo
+
+The ExportTo is a platformised solution for exporting lists of data.
+
+This feature allows users to choose which data they want to export, whether it’s all the data in their table, filtered items, or items they’ve selected manually.
+
+It consists of two parts: Client - responsible for the button and modal, and Server - that holds the logic and data.
+
+
+### Server Implementation
+
+To work with this feature, you need to implement the API on the server side. All server-related information can be found in the [Export Service documentation](https://dev.wix.com/docs/rest/business-management/export/export-async-job-v1/integration).
+
+```tsx
+import { ExportButton } from '@wix/patterns';
+```
+
+---
+
+### Variations
+
+### Export all table
+
+```tsx
+import { Avatar, Page } from '@wix/design-system';
+import React from 'react';
+import {
+  CollectionToolbarFilters,
+  ExportButton,
+  Filter,
+  Table,
+  PageWrapper,
+  MultiSelectCheckboxFilter,
+  OffsetQuery,
+  stringsArrayFilter,
+  useTableCollection,
+  useExportConfig,
+  useStaticListFilterCollection,
+  ToolbarTitle,
+} from '@wix/patterns';
+import { queryContacts } from '@wix/ambassador-contacts-v4-contact/http';
+import { Contact } from '@wix/ambassador-contacts-v4-contact/types';
+import { useHttpClient } from '@wix/yoshi-flow-bm';
+
+type ContactsFilters = {
+  level: Filter<string[]>;
+};
+
+function ExportAllTable() {
+  const httpClient = useHttpClient();
+
+  const state = useTableCollection<Contact, ContactsFilters>({
+    queryName: 'ExportAllTable',
+    fetchData: (query: OffsetQuery<ContactsFilters>) => {
+      const { limit, offset, search, filters } = query;
+      return httpClient
+        .request(
+          queryContacts({
+            query: { paging: { limit, offset }, filter: filters },
+            search,
+          }),
+        )
+        .then(({ data: { contacts = [], pagingMetadata } }) => ({
+          items: contacts,
+          total: pagingMetadata?.total,
+        }));
+    },
+    itemKey: (item) => item.id as string,
+    itemName: (item) => item.name as string,
+    fetchErrorMessage: () => 'Error fetching contacts',
+    filters: {
+      level: stringsArrayFilter(),
+    },
+  });
+
+  const exportConfig = useExportConfig<Contact, ContactsFilters>({
+    transformPlatformizedQuery: ({
+      platformizedQuery,
+      wixPatternsQuery,
+      selectedItems,
+    }) => {
+      // TODO: add logic here
+      return {
+        ...platformizedQuery,
+        paging: {
+          limit: 20,
+        },
+      };
+    },
+    methodMetadata: {
+      artifact: 'com.wixpress.fedinfra.exportservice.export-service',
+      service: 'ExportService',
+      method: 'QueryProductsExportSpi',
+    },
+    fields: [
+      { id: 'contact.id', header: 'id' },
+      { id: 'contact.info.name.first', header: 'First Name' },
+      { id: 'contact.info.name.last', header: 'Last Name' },
+      { id: 'contact.primary_info.email', header: 'Email' },
+    ],
+  });
+  const collection = state.collection;
+  const levelsCollection = useStaticListFilterCollection(
+    collection.filters.level,
+    [
+      'Beginner',
+      'Amateur',
+      'Semi-Pro',
+      'Professional',
+      'World Class',
+      'Legendary',
+      'Ultimate',
+    ],
+  );
+
+  return (
+    <PageWrapper>
+      <Page height="400px">
+        <Page.Header title="Contacts" />
+        <Page.Content>
+          <Table
+            state={state}
+            title={<ToolbarTitle title="Contacts" showTotal />}
+            columns={[
+              {
+                title: '',
+                width: '50px',
+                render: (contact) => (
+                  <Avatar
+                    name={contact.name}
+                    imgProps={{ src: contact.image }}
+                  />
+                ),
+              },
+              {
+                title: 'Name',
+                width: '250px',
+                render: (contact) => contact.name,
+              },
+              {
+                title: 'Level',
+                render: (contact) => contact.level,
+              },
+              {
+                title: 'Last Seen',
+                render: (contact) => contact.lastSeen?.toLocaleString(),
+              },
+            ]}
+            filters={
+              <CollectionToolbarFilters
+                inline={1}
+                panelTitle="Filter your contacts"
+              >
+                <MultiSelectCheckboxFilter
+                  popoverProps={{ appendTo: 'window' }}
+                  filter={collection.filters.level}
+                  collection={levelsCollection}
+                  renderItem={(level) => ({ title: level })}
+                />
+              </CollectionToolbarFilters>
+            }
+            exportButton={<ExportButton {...exportConfig} />}
+          />
+        </Page.Content>
+      </Page>
+    </PageWrapper>
+  );
+}
+```
+
+### Export filtered table
+
+Export the table with the filters applied
+
+```tsx
+import { Avatar, Page } from '@wix/design-system';
+import React from 'react';
+import {
+  CollectionToolbarFilters,
+  ExportButton,
+  Filter,
+  Table,
+  PageWrapper,
+  MultiSelectCheckboxFilter,
+  OffsetQuery,
+  stringsArrayFilter,
+  useTableCollection,
+  useExportConfig,
+  useStaticListFilterCollection,
+  ToolbarTitle,
+} from '@wix/patterns';
+import { queryContacts } from '@wix/ambassador-contacts-v4-contact/http';
+import { Contact } from '@wix/ambassador-contacts-v4-contact/types';
+import { useHttpClient } from '@wix/yoshi-flow-bm';
+
+type ContactsFilters = {
+  level: Filter<string[]>;
+};
+
+function ExportFlilteredTable() {
+  const httpClient = useHttpClient();
+
+  const state = useTableCollection<Contact, ContactsFilters>({
+    queryName: 'contacts-BulkActions',
+    fetchData: (query: OffsetQuery<ContactsFilters>) => {
+      const { limit, offset, search, filters } = query;
+      return httpClient
+        .request(
+          queryContacts({
+            query: { paging: { limit, offset }, filter: filters },
+            search,
+          }),
+        )
+        .then(({ data: { contacts = [], pagingMetadata } }) => ({
+          items: contacts,
+          total: pagingMetadata?.total,
+        }));
+    },
+    itemKey: (item) => item.id as string,
+    itemName: (item) => item.name as string,
+    fetchErrorMessage: () => 'Error fetching contacts',
+    filters: {
+      level: stringsArrayFilter({
+        initialValue: ['Beginner'],
+      }),
+    },
+  });
+
+  const exportConfig = useExportConfig<Contact, ContactsFilters>({
+    saveAs: ({ wixPatternsQuery }) =>
+      `Contacts [${wixPatternsQuery.filters.level?.join(', ')}]`,
+    transformPlatformizedQuery: ({
+      platformizedQuery,
+      wixPatternsQuery,
+      selectedItems,
+    }) => {
+      // TODO: add logic here
+      return {
+        ...platformizedQuery,
+        paging: {
+          limit: 20,
+        },
+      };
+    },
+    methodMetadata: {
+      artifact: 'com.wixpress.fedinfra.exportservice.export-service',
+      service: 'ExportService',
+      method: 'QueryProductsExportSpi',
+    },
+    fields: [
+      { id: 'contact.id', header: 'id' },
+      { id: 'contact.info.name.first', header: 'First Name' },
+      { id: 'contact.info.name.last', header: 'Last Name' },
+      { id: 'contact.primary_info.email', header: 'Email' },
+    ],
+  });
+  const collection = state.collection;
+  const levelsCollection = useStaticListFilterCollection(
+    collection.filters.level,
+    [
+      'Beginner',
+      'Amateur',
+      'Semi-Pro',
+      'Professional',
+      'World Class',
+      'Legendary',
+      'Ultimate',
+    ],
+  );
+
+  return (
+    <PageWrapper>
+      <Page height="400px">
+        <Page.Header title="Contacts" />
+        <Page.Content>
+          <Table
+            state={state}
+            title={<ToolbarTitle title="Contacts" showTotal />}
+            columns={[
+              {
+                title: '',
+                width: '50px',
+                render: (contact) => (
+                  <Avatar
+                    name={contact.name}
+                    imgProps={{ src: contact.image }}
+                  />
+                ),
+              },
+              {
+                title: 'Name',
+                width: '250px',
+                render: (contact) => contact.name,
+              },
+              {
+                title: 'Level',
+                render: (contact) => contact.level,
+              },
+              {
+                title: 'Last Seen',
+                render: (contact) => contact.lastSeen?.toLocaleString(),
+              },
+            ]}
+            filters={
+              <CollectionToolbarFilters
+                inline={1}
+                panelTitle="Filter your contacts"
+              >
+                <MultiSelectCheckboxFilter
+                  popoverProps={{ appendTo: 'window' }}
+                  filter={collection.filters.level}
+                  collection={levelsCollection}
+                  renderItem={(level) => ({ title: level })}
+                />
+              </CollectionToolbarFilters>
+            }
+            exportButton={<ExportButton {...exportConfig} />}
+          />
+        </Page.Content>
+      </Page>
+    </PageWrapper>
+  );
+}
+```
+
+### Export table with selection / bulk selection
+
+Export only the selected items from the table
+
+```tsx
+import {
+  Avatar,
+  Card,
+  CustomModalLayout,
+  Modal,
+  Page,
+  Text,
+} from '@wix/design-system';
+import React from 'react';
+import {
+  ExportButton,
+  Filter,
+  Table,
+  PageWrapper,
+  MultiBulkActionToolbar,
+  OffsetQuery,
+  stringsArrayFilter,
+  useTableCollection,
+  useExportConfig,
+  ToolbarTitle,
+} from '@wix/patterns';
+import { Block, ChangeOrder, Download, Edit } from '@wix/wix-ui-icons-common';
+import { queryContacts } from '@wix/ambassador-contacts-v4-contact/http';
+import { Contact } from '@wix/ambassador-contacts-v4-contact/types';
+import { useHttpClient } from '@wix/yoshi-flow-bm';
+
+type ContactsFilters = {
+  level: Filter<string[]>;
+};
+
+function ExportToBulkSelectExample() {
+  const httpClient = useHttpClient();
+
+  const state = useTableCollection<Contact, ContactsFilters>({
+    queryName: 'contacts-BulkActions',
+    fetchData: (query: OffsetQuery<ContactsFilters>) => {
+      const { limit, offset, search, filters } = query;
+      return httpClient
+        .request(
+          queryContacts({
+            query: { paging: { limit, offset }, filter: filters },
+            search,
+          }),
+        )
+        .then(({ data: { contacts = [], pagingMetadata } }) => ({
+          items: contacts,
+          total: pagingMetadata?.total,
+        }));
+    },
+    itemKey: (item) => item.id as string,
+    itemName: (item) => item.name as string,
+    fetchErrorMessage: () => 'Error fetching contacts',
+    filters: {
+      level: stringsArrayFilter({
+        initialValue: ['Beginner'],
+      }),
+    },
+  });
+
+  const exportConfig = useExportConfig<Contact, ContactsFilters>({
+    transformPlatformizedQuery: ({
+      platformizedQuery,
+      wixPatternsQuery,
+      selectedItems,
+    }) => {
+      // TODO: add logic here
+      return {
+        ...platformizedQuery,
+        paging: {
+          limit: 20,
+        },
+      };
+    },
+    methodMetadata: {
+      artifact: 'com.wixpress.fedinfra.exportservice.export-service',
+      service: 'ExportService',
+      method: 'QueryProductsExportSpi',
+    },
+    fields: [
+      { id: 'contact.id', header: 'id' },
+      { id: 'contact.info.name.first', header: 'First Name' },
+      { id: 'contact.info.name.last', header: 'Last Name' },
+      { id: 'contact.primary_info.email', header: 'Email' },
+    ],
+  });
+  const collection = state.collection;
+  React.useEffect(() => {
+    collection.bulkSelect.selectAll();
+  }, []);
+
+  return (
+    <PageWrapper>
+      <Page height="400px">
+        <Page.Header title="Contacts" />
+        <Page.Content>
+          <Table
+            state={state}
+            title={<ToolbarTitle title="Contacts" showTotal />}
+            columns={[
+              {
+                title: '',
+                width: '50px',
+                render: (contact) => (
+                  <Avatar
+                    name={contact.name}
+                    imgProps={{ src: contact.image }}
+                  />
+                ),
+              },
+              {
+                title: 'Name',
+                width: '250px',
+                render: (contact) => contact.name,
+              },
+              {
+                title: 'Level',
+                render: (contact) => contact.level,
+              },
+              {
+                title: 'Last Seen',
+                render: (contact) => contact.lastSeen?.toLocaleString(),
+              },
+            ]}
+            bulkActionModal={({
+              isModalOpen,
+              selectedValues,
+              closeModal,
+              query,
+            }) => (
+              <Modal isOpen={isModalOpen}>
+                <CustomModalLayout
+                  height={300}
+                  dataHook="bulk-action-custom-modal-layout"
+                  title="Edit Contacts"
+                  primaryButtonOnClick={closeModal}
+                  primaryButtonText="save"
+                  secondaryButtonOnClick={closeModal}
+                  secondaryButtonText="cancle"
+                >
+                  {selectedValues.map((value, index) => (
+                    <Card>
+                      <Text
+                        key={value.id}
+                        dataHook={`selected-value-text-${index}`}
+                      >
+                        Page: {query.page}; Name: {value.name}
+                      </Text>
+                    </Card>
+                  ))}
+                </CustomModalLayout>
+              </Modal>
+            )}
+            bulkActionToolbar={({ selectedValues, openModal }) => {
+              const disabled = selectedValues.length > 4;
+              return (
+                <MultiBulkActionToolbar
+                  primaryActionItems={[
+                    {
+                      dataHook: 'edit-button',
+                      onClick: openModal,
+                      label: 'Edit',
+                      prefixIcon: <Edit />,
+                      biName: 'edit',
+                    },
+                    {
+                      dataHook: 'download-button',
+                      onClick: openModal,
+                      label: 'Download',
+                      prefixIcon: <Download />,
+                      tooltip: disabled
+                        ? 'Downloading is supported for up to 10 items'
+                        : undefined,
+                      disabled,
+                      biName: 'download',
+                    },
+                  ]}
+                  secondaryActionItems={[
+                    {
+                      dataHook: 'block-button',
+                      onClick: openModal,
+                      label: 'Block',
+                      prefixIcon: <Block />,
+                      biName: 'block',
+                    },
+                    {
+                      dataHook: 'change-button',
+                      onClick: openModal,
+                      label: 'Change',
+                      disabled,
+                      prefixIcon: <ChangeOrder />,
+                      biName: 'change',
+                    },
+                  ]}
+                />
+              );
+            }}
+            exportButton={<ExportButton {...exportConfig} />}
+          />
+        </Page.Content>
+      </Page>
+    </PageWrapper>
+  );
+}
+```
+
+### CTA is out of the table
+
+The export button is out of the table
+
+```tsx
+import { Avatar, Page, Button } from '@wix/design-system';
+import React from 'react';
+import {
+  CollectionToolbarFilters,
+  ExportModal,
+  Filter,
+  Table,
+  PageWrapper,
+  MultiSelectCheckboxFilter,
+  OffsetQuery,
+  stringsArrayFilter,
+  useTableCollection,
+  useExportConfig,
+  useStaticListFilterCollection,
+  ToolbarTitle,
+} from '@wix/patterns';
+import { queryContacts } from '@wix/ambassador-contacts-v4-contact/http';
+import { Contact } from '@wix/ambassador-contacts-v4-contact/types';
+import { useHttpClient } from '@wix/yoshi-flow-bm';
+
+type ContactsFilters = {
+  level: Filter<string[]>;
+};
+
+function ExportToCTAOutOfTheTable() {
+  const httpClient = useHttpClient();
+
+  const state = useTableCollection<Contact, ContactsFilters>({
+    queryName: 'contacts-ExportToCTAOutOfTheTable',
+    paginationMode: 'offset',
+    itemKey: (item) => item.id as string,
+    itemName: (item) => item.name as string,
+    fetchData: (query: OffsetQuery<ContactsFilters>) => {
+      const { limit, offset, search, filters } = query;
+      return httpClient
+        .request(
+          queryContacts({
+            query: { paging: { limit, offset }, filter: filters },
+            search,
+          }),
+        )
+        .then(({ data: { contacts = [], pagingMetadata } }) => ({
+          items: contacts,
+          total: pagingMetadata?.total,
+        }));
+    },
+    fetchErrorMessage: () => 'Error fetching contacts',
+    filters: {
+      level: stringsArrayFilter({
+        initialValue: ['Beginner'],
+      }),
+    },
+    limit: 50,
+  });
+
+  const { table } = state;
+  const { collection } = table;
+
+  const exportConfig = useExportConfig<Contact, ContactsFilters>({
+    saveAs: ({ wixPatternsQuery }) =>
+      `Contacts [${wixPatternsQuery.filters.level?.join(', ')}]`,
+    transformPlatformizedQuery: ({
+      platformizedQuery,
+      wixPatternsQuery,
+      selectedItems,
+    }) => {
+      // TODO: add logic here
+      return {
+        ...platformizedQuery,
+        paging: {
+          limit: 20,
+        },
+      };
+    },
+    methodMetadata: {
+      artifact: 'com.wixpress.fedinfra.exportservice.export-service',
+      service: 'ExportService',
+      method: 'QueryProductsExportSpi',
+    },
+    fields: [
+      { id: 'contact.id', header: 'id' },
+      { id: 'contact.info.name.first', header: 'First Name' },
+      { id: 'contact.info.name.last', header: 'Last Name' },
+      { id: 'contact.primary_info.email', header: 'Email' },
+    ],
+  });
+
+  const levelsCollection = useStaticListFilterCollection(
+    collection.filters.level,
+    [
+      'Beginner',
+      'Amateur',
+      'Semi-Pro',
+      'Professional',
+      'World Class',
+      'Legendary',
+      'Ultimate',
+    ],
+  );
+
+  return (
+    <PageWrapper>
+      <Page height="400px">
+        <Page.Header
+          actionsBar={
+            <Button onClick={() => table.exportState?.open()}>Export</Button>
+          }
+        />
+        <Page.Content>
+          <Table
+            state={state}
+            title={<ToolbarTitle title="title" showTotal />}
+            columns={[
+              {
+                title: '',
+                width: '50px',
+                render: (contact) => (
+                  <Avatar
+                    name={contact.name}
+                    imgProps={{ src: contact.image }}
+                  />
+                ),
+              },
+              {
+                title: 'Name',
+                width: '250px',
+                render: (contact) => contact.name,
+              },
+              {
+                title: 'Level',
+                render: (contact) => contact.level,
+              },
+              {
+                title: 'Last Seen',
+                render: (contact) => contact.lastSeen?.toLocaleString(),
+              },
+            ]}
+            filters={
+              <CollectionToolbarFilters
+                inline={1}
+                panelTitle="Filter your contacts"
+              >
+                <MultiSelectCheckboxFilter
+                  popoverProps={{ appendTo: 'window' }}
+                  filter={collection.filters.level}
+                  collection={levelsCollection}
+                  renderItem={(level) => ({ title: level })}
+                />
+              </CollectionToolbarFilters>
+            }
+            exportModal={<ExportModal {...exportConfig} />}
+          />
+        </Page.Content>
+      </Page>
+    </PageWrapper>
+  );
+}
+```
+
+## API
+
+### API
+
+The `ExportTo` is a platformised solution for exporting lists of data.
+
+It consists of two parts:
+
+- **Client**: Configure the `exportButton` prop or the `exportModal` prop. `exportModal` provides you with the functionality to open an export modal using a custom CTA, and `exportButton` is a built-in CTA that opens an export modal.
+- **Server**: All server related docs can be found [here](https://dev.wix.com/docs/rest/business-management/export/export-async-job-v1/integration)
+
+#### Client `exportButton`
+
+Add an `exportButton` prop to your `Table`, and pass an `ExportButton` component:
+
+```jsx
+//...
+import { useExportConfig, Table } from '@wix/patterns';
+
+const exportConfig = useExportConfig({
+  /* ... */
+});
+
+export default () => {
+  return (
+    } />
+  );
+};
+```
+
+#### Client `exportModal`
+
+Add an `exportModal` prop to your `Table`, and pass an `ExportModal` component.
+To open the modal use `table` from `useTableCollection` hook as `table.exportState.open()`
+
+```jsx
+//...
+import React from 'react';
+import { useExportConfig, useTableCollection, Table } from '@wix/patterns';
+import { Button } from '@wix/design-system';
+
+const state = useTableCollection({ /* ... */ });
+const exportConfig = useExportConfig({
+  /* ... */
+});
+
+export default () => {
+  return (
+      <>
+         state.table.exportState.open()}>
+        } />
+      
+  );
+};
+```
+
+See example and API tab for more details.
+
+
+### transformPlatformizedQuery
+
+The `transformPlatformizedQuery` is used for mapping between the `wixPatternsQuery` to `QueryV2`, which is the standard way to fetch data from the API/SPI server.
+
+For example, in case of stores' `Product`:
+
+```ts
+const exportStateQueryProductsExportSpi = useExport({
+  transformPlatformizedQuery: ({
+    platformizedQuery,
+    wixPatternsQuery,
+    selectedItems,
+  }) => {
+    const {
+      filters: { collections, stockStatus: [stockStatus = undefined] = [] },
+    } = wixPatternsQuery;
+    // In case the user chose to export selected items
+    if (selectedIds && selectedIds.length) {
+      // Filter by selectedIds
+      platformizedQuery.filter = {
+        includeHidden: true,
+        value: JSON.stringify({
+          id: { $hasSome: selectedIds },
+        }),
+      };
+    } else {
+      // In case the user chose to export filters
+      platformizedQuery.filter = {
+        includeHidden: true,
+        value: JSON.stringify({
+          // filter by collection IDs
+          ...(collections
+            ? {
+                'collections.id': { $hasSome: collections.map((c) => c.id) },
+              }
+            : {}),
+          // filter by stockStatus
+          ...(stockStatus
+            ? {
+                inventoryStatus: stockStatus.id,
+              }
+            : {}),
+        }),
+      };
+    }
+
+    return {
+      ...platformizedQuery,
+      paging: {
+        limit: 20,
+      },
+    };
+  },
+});
+```
+
+
+### Props
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `transformPlatformizedQuery` | `TransformQuery<T, F>` | No | - | 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 |
+| `differentQueryEndpointThanCollection` | `boolean` | No | - | When set to `true`, the export progress will not show total / out of items. |
+| `customTotal` | `CustomTotalFn<T, F>` | No | - | 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. |
+| `methodMetadata` | `MethodMetadata` | Yes | - | 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` |
+| `arrayFieldDelimiter` | `"SEMICOLON" \| "SEMICOLON_AND_SPACE"` | No | `SEMICOLON` | The delimiter to use for array fields |
+| `methodSpec` | `{ requestQueryFieldNumber?: "DEFAULT" \| "FIELD_2" \| "FIELD_3" \| "FIELD_4" \| "FIELD_5" \| "FIELD_6" \| "FIELD_7" \| "FIELD_8" \| "FIELD_9"; responsePagingMetadataFieldName?: string \| ... 1 more ...; responseRepeatedFieldName?: string \| ... 1 more ... \| undefined; } \| undefined` | No | - | 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) |
+| `fields` | `FieldDescriptor[]` | Yes | - | 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). |
+| `saveAs` | `SaveAsFn<T, F>` | No | - | Optional function to configure the download file name: - `platformizedQuery`: QueryV2 - `wixPatternsQuery`: ComputedQueryFull<F> - `selectedItems?`: string[] - `uncheckedValues?`: T[] The function should return a string |
+| `exportModalFooter` | `{ text: string; }` | No | - | Optional footer for export modal `text`: string |
+| `exportModalTitle` | `string` | No | - | Optional custom title for the items to export |
+| `onProgressModalTitle` | `string` | No | - | Optional custom title during the export process |
+| `exportToCSVMessage` | `string` | No | - | Optional custom message for the items that will be exported to CSV |
+
+## BI
+
+### Export To Events
+
+ Event   |   Description   |
+--------- | --------------- |
+[144:125](https://bo.wix.com/data-tools/bi-catalog-app/event/144:125) | Sent when a user clicks the "Export" CTA in a Wix Patterns component
+[144:126](https://bo.wix.com/data-tools/bi-catalog-app/event/144:126) | Sent when user changes selection in the Wix Patterns export modal
+[144:127](https://bo.wix.com/data-tools/bi-catalog-app/event/144:127) | Sent when the user clicks any CTA in the export modal
+[144:128](https://bo.wix.com/data-tools/bi-catalog-app/event/144:128) | Sent when the export process begins
+[144:129](https://bo.wix.com/data-tools/bi-catalog-app/event/144:129) | Sent when the user tries to cancel the export process AFTER it has begun
+[144:130](https://bo.wix.com/data-tools/bi-catalog-app/event/144:130) | Sent when the user clicks any of the CTAs in the "Cancel the export?" modal
+[144:131](https://bo.wix.com/data-tools/bi-catalog-app/event/144:131) | Sent when the export process ends, either successfully or not (failed/stopped by user)
+[144:132](https://bo.wix.com/data-tools/bi-catalog-app/event/144:132) | Sent when the export ends successfully and the user is prompted that the file is being downloaded
+[144:133](https://bo.wix.com/data-tools/bi-catalog-app/event/144:133) | Sent when the toast that tells the user that the export is done and the file is being downloaded is dismissed (by user or automatically)
+[144:134](https://bo.wix.com/data-tools/bi-catalog-app/event/144:134) | Sent when the user clicks the "Download Manually" button in the toast that is displayed after the export process is complete
+[144:135](https://bo.wix.com/data-tools/bi-catalog-app/event/144:135) | Sent when the user clicks a CTA in the "Export Failed" modal
+
+
+
+### Component load events
+Event   |   Description   |
+--------- | --------------- |
+[144:110](https://bo.wix.com/data-tools/bi-catalog-app/event/144:110) | Sent when a Wix Patterns component starts loading
+[144:111](https://bo.wix.com/data-tools/bi-catalog-app/event/144:111) | Sent when a Wix Patterns component is done loading
+
+
+#### 🐪 Couldn't find what you need?
+* Check our [BI Catalog](https://bo.wix.com/data-tools/bi-catalog-app?viewId=all-items-view&selectedColumns=src%2Cevid%2Cname%2Cowner%2Cproduct%2CuserType+false%2CdateUpdated%2CdateCreated+false%2CcreatedBy+false%2Cstatus&source=%5B%7B%22id%22%3A%22144%22%2C%22name%22%3A%22144+-+Cairo%22%7D%5D)
+* Contact us on [#cairo-bi](https://wix.slack.com/archives/C03N53KURH9)
+
+
+## Testkit
+
+### Usage
+
+`getExportButton` API is exposed from the `` [testkit](./?path=/story/components-collection--table&activeTab=Testkit)
+
+### Export `HttpClient` Mocks
+
+#### BM Flow
+
+When using `Flow BM` testkit, use the [wixPatternsTestProviderPropsOverrides](./?path=/story/testing-component-tests--component-tests#TableTestDriver.ts) Wix Patterns helper for injecting all relevant mocks.
+
+#### Manually
+
+For manually adding mocks:
+
+```ts
+import { exportServiceMocks } from '@wix/patterns/testkit';
+import { HttpClientMock, whenRequest } from '@wix/http-client-testkit';
+
+const httpClient = new HttpClientMock([...exportServiceMocks(whenRequest)]);
+```
+
+