@wix/patterns 1.458.0 → 1.460.0

package/dist/docs/useOptimisticActions/items-orders.tsx

@@ -0,0 +1,165 @@
+import { Avatar } from '@wix/design-system';
+import React from 'react';
+import { CollectionPage } from '@wix/patterns/page';
+import {
+  Table,
+  OffsetQuery,
+  PrimaryActionButton,
+  useTableCollection,
+  useOptimisticActions,
+} from '@wix/patterns';
+import { Delete } from '@wix/wix-ui-icons-common';
+import { contacts } from '@wix/crm';
+
+function UndoAfterSuccess() {
+  const state = useTableCollection<contacts.Contact>({
+    queryName: 'contacts-UndoAfterSuccess',
+    itemName: (item) => `${item.info?.name?.first} ${item.info?.name?.last}`,
+    fetchData: (query: OffsetQuery) => {
+      const { limit, offset, search, sort, filters } = query;
+
+      let queryBuilder = contacts.queryContacts().limit(limit).skip(offset);
+
+      if (search) {
+        queryBuilder = queryBuilder.startsWith('info.name.first', search);
+      }
+
+      queryBuilder = queryBuilder.ascending('info.name.first');
+
+      return queryBuilder.find().then(({ items = [], totalCount: total }) => ({
+        items,
+        total,
+      }));
+    },
+    fetchErrorMessage: () => 'Error fetching contacts',
+  });
+
+  const collection = state.collection;
+
+  const optimisticActions = useOptimisticActions(collection, {
+    orderBy: ({ sort }) => [
+      ...(sort || []),
+      {
+        fieldName: (item) => item.info?.name?.first || '',
+        order: 'asc',
+      },
+    ],
+  });
+
+  const _createContact = () => {
+    const newContact = {
+      id: new window.Date().toString(),
+      info: {
+        name: {
+          first: 'Aaa',
+          last: 'Contact',
+        },
+      },
+    };
+
+    optimisticActions.createOne(newContact, {
+      submit: async (_contacts) => {
+        const response = (await Promise.all(
+          _contacts.map((contact) =>
+            contacts.createContact(contact.info as contacts.ContactInfo),
+          ),
+        )) as contacts.CreateContactResponse[];
+
+        return response.map(({ contact }) => contact as contacts.Contact);
+      },
+    });
+  };
+
+  const _updateContact = (contact: contacts.Contact) => {
+    const updatedContact = {
+      ...contact,
+      info: {
+        ...contact.info,
+        jobTitle: 'Ultimate',
+      },
+    };
+
+    optimisticActions.updateOne(updatedContact, {
+      submit: async (_contacts) => {
+        const response = (await Promise.all(
+          _contacts.map((contact) =>
+            contacts.updateContact(
+              contact._id as string,
+              contact.info as contacts.ContactInfo,
+              contact.revision as number,
+            ),
+          ),
+        )) as contacts.UpdateContactResponse[];
+
+        return response.map(({ contact }) => contact as contacts.Contact);
+      },
+    });
+  };
+
+  const _deleteContact = (contact: contacts.Contact) => {
+    optimisticActions.deleteOne(contact, {
+      submit: async (_contacts) =>
+        Promise.all(
+          _contacts.map((contact) =>
+            contacts.deleteContact(contact._id as string),
+          ),
+        ),
+    });
+  };
+
+  return (
+    <CollectionPage height="400px">
+      <CollectionPage.Header title={{ text: 'Contacts' }} />
+      <CollectionPage.Content>
+        <Table
+          state={collection}
+          primaryActionButton={<PrimaryActionButton onClick={_createContact} />}
+          columns={[
+            {
+              title: '',
+              width: '50px',
+              render: (contact) => (
+                <Avatar
+                  name={`${contact.info?.name?.first} ${contact.info?.name?.last}`}
+                  imgProps={{ src: contact.info?.picture?.image }}
+                />
+              ),
+            },
+            {
+              title: 'Name',
+              width: '250px',
+              render: (contact) =>
+                `${contact.info?.name?.first} ${contact.info?.name?.last}`,
+            },
+            {
+              title: 'Level',
+              render: (contact) => contact.info?.jobTitle,
+            },
+            {
+              title: 'Last Activity',
+              render: (contact) =>
+                contact.lastActivity?.activityDate?.toLocaleString(),
+            },
+          ]}
+          actionCell={(contact) => ({
+            primaryAction: {
+              text: 'Update',
+              onClick: () => {
+                _updateContact(contact);
+              },
+            },
+            secondaryActions: [
+              {
+                icon: <Delete />,
+                text: 'Delete',
+                onClick: () => {
+                  _deleteContact(contact);
+                },
+              },
+            ],
+          })}
+        />
+      </CollectionPage.Content>
+    </CollectionPage>
+  );
+}

package/dist/docs/useOptimisticActions/revision-handling.tsx

@@ -0,0 +1,109 @@
+import { Avatar } from '@wix/design-system';
+import React from 'react';
+import { CollectionPage } from '@wix/patterns/page';
+import {
+  Table,
+  OffsetQuery,
+  useTableCollection,
+  useOptimisticActions,
+} from '@wix/patterns';
+import { contacts } from '@wix/crm';
+
+function RevisionHandling() {
+  const state = useTableCollection<contacts.Contact>({
+    queryName: 'contacts-RevisionHandling',
+    itemName: (item) => `${item.info?.name?.first} ${item.info?.name?.last}`,
+    fetchData: (query: OffsetQuery) => {
+      const { limit, offset, search, filters } = query;
+
+      let queryBuilder = contacts.queryContacts().limit(limit).skip(offset);
+
+      if (search) {
+        queryBuilder = queryBuilder.startsWith('info.name.first', search);
+      }
+
+      return queryBuilder.find().then(({ items = [], totalCount: total }) => ({
+        items,
+        total,
+      }));
+    },
+    fetchErrorMessage: () => 'Error fetching contacts',
+  });
+
+  const collection = state.collection;
+
+  const optimisticActions = useOptimisticActions(collection);
+
+  const _updateContact = (contact: contacts.Contact) => {
+    const updatedContact = {
+      ...contact,
+      info: {
+        ...contact.info,
+        jobTitle: 'Ultimate',
+      },
+      revision: +contact.revision! + 1,
+    } as Partial<contacts.Contact>;
+
+    optimisticActions.updateOne(updatedContact, {
+      submit: async (_contacts) => {
+        const response = (await Promise.all(
+          _contacts.map((contact) =>
+            contacts.updateContact(
+              contact._id as string,
+              contact.info as contacts.ContactInfo,
+              contact.revision as number,
+            ),
+          ),
+        )) as contacts.UpdateContactResponse[];
+
+        return response.map(({ contact }) => contact as contacts.Contact);
+      },
+    });
+  };
+
+  return (
+    <CollectionPage height="400px">
+      <CollectionPage.Header title={{ text: 'Contacts' }} />
+      <CollectionPage.Content>
+        <Table
+          state={collection}
+          columns={[
+            {
+              title: '',
+              width: '50px',
+              render: (contact) => (
+                <Avatar
+                  name={`${contact.info?.name?.first} ${contact.info?.name?.last}`}
+                  imgProps={{ src: contact.info?.picture?.image }}
+                />
+              ),
+            },
+            {
+              title: 'Name',
+              width: '250px',
+              render: (contact) =>
+                `${contact.info?.name?.first} ${contact.info?.name?.last}`,
+            },
+            {
+              title: 'Level',
+              render: (contact) => contact.info?.jobTitle,
+            },
+            {
+              title: 'Last Activity',
+              render: (contact) =>
+                contact.lastActivity?.activityDate?.toLocaleString(),
+            },
+          ]}
+          actionCell={(contact) => ({
+            primaryAction: {
+              text: 'Update',
+              onClick: () => {
+                _updateContact(contact);
+              },
+            },
+          })}
+        />
+      </CollectionPage.Content>
+    </CollectionPage>
+  );
+}

package/dist/docs/useOptimisticActions/success-toast-with-undo.tsx

@@ -0,0 +1,164 @@
+import { Avatar } from '@wix/design-system';
+import React from 'react';
+import { CollectionPage } from '@wix/patterns/page';
+import {
+  Table,
+  OffsetQuery,
+  PrimaryActionButton,
+  useTableCollection,
+  useOptimisticActions,
+} from '@wix/patterns';
+import { Delete } from '@wix/wix-ui-icons-common';
+import { contacts } from '@wix/crm';
+
+function UndoBeforeSending() {
+  const state = useTableCollection<contacts.Contact>({
+    queryName: 'contacts-UndoBeforeSending',
+    itemName: (item) => `${item.info?.name?.first} ${item.info?.name?.last}`,
+    fetchData: (query: OffsetQuery) => {
+      const { limit, offset, search, filters } = query;
+
+      let queryBuilder = contacts.queryContacts().limit(limit).skip(offset);
+
+      if (search) {
+        queryBuilder = queryBuilder.startsWith('info.name.first', search);
+      }
+
+      return queryBuilder.find().then(({ items = [], totalCount: total }) => ({
+        items,
+        total,
+      }));
+    },
+    fetchErrorMessage: () => 'Error fetching contacts',
+  });
+
+  const collection = state.collection;
+
+  const optimisticActions = useOptimisticActions(collection);
+
+  const _createContact = () => {
+    const newContact = {
+      id: new window.Date().toString(),
+      info: {
+        name: {
+          first: 'New',
+          last: 'Contact',
+        },
+      },
+    };
+
+    optimisticActions.createOne(newContact, {
+      showUndoToast: true,
+      showUndoSuccessToast: true,
+      successToast: 'New contact is created',
+      submit: async (_contacts) => {
+        const response = (await Promise.all(
+          _contacts.map((contact) =>
+            contacts.createContact(contact.info as contacts.ContactInfo),
+          ),
+        )) as contacts.CreateContactResponse[];
+
+        return response.map(({ contact }) => contact as contacts.Contact);
+      },
+    });
+  };
+
+  const _updateContact = (contact: contacts.Contact) => {
+    const updatedContact = {
+      ...contact,
+      info: {
+        ...contact.info,
+        jobTitle: 'Ultimate',
+      },
+    };
+
+    optimisticActions.updateOne(updatedContact, {
+      showUndoToast: true,
+      showUndoSuccessToast: true,
+      successToast: 'A contact has been updated',
+      submit: async (_contacts) => {
+        const response = (await Promise.all(
+          _contacts.map((contact) =>
+            contacts.updateContact(
+              contact._id as string,
+              contact.info as contacts.ContactInfo,
+              contact.revision as number,
+            ),
+          ),
+        )) as contacts.UpdateContactResponse[];
+
+        return response.map(({ contact }) => contact as contacts.Contact);
+      },
+    });
+  };
+
+  const _deleteContact = (contact: contacts.Contact) => {
+    optimisticActions.deleteOne(contact, {
+      showUndoToast: true,
+      showUndoSuccessToast: true,
+      successToast: 'A contact was deleted',
+      submit: async (_contacts) =>
+        Promise.all(
+          _contacts.map((contact) =>
+            contacts.deleteContact(contact._id as string),
+          ),
+        ),
+    });
+  };
+
+  return (
+    <CollectionPage height="400px">
+      <CollectionPage.Header title={{ text: 'Contacts' }} />
+      <CollectionPage.Content>
+        <Table
+          state={collection}
+          primaryActionButton={<PrimaryActionButton onClick={_createContact} />}
+          columns={[
+            {
+              title: '',
+              width: '50px',
+              render: (contact) => (
+                <Avatar
+                  name={`${contact.info?.name?.first} ${contact.info?.name?.last}`}
+                  imgProps={{ src: contact.info?.picture?.image }}
+                />
+              ),
+            },
+            {
+              title: 'Name',
+              width: '250px',
+              render: (contact) =>
+                `${contact.info?.name?.first} ${contact.info?.name?.last}`,
+            },
+            {
+              title: 'Level',
+              render: (contact) => contact.info?.jobTitle,
+            },
+            {
+              title: 'Last Activity',
+              render: (contact) =>
+                contact.lastActivity?.activityDate?.toLocaleString(),
+            },
+          ]}
+          actionCell={(contact) => ({
+            primaryAction: {
+              text: 'Update',
+              onClick: () => {
+                _updateContact(contact);
+              },
+            },
+            secondaryActions: [
+              {
+                icon: <Delete />,
+                text: 'Delete',
+                onClick: () => {
+                  _deleteContact(contact);
+                },
+              },
+            ],
+          })}
+        />
+      </CollectionPage.Content>
+    </CollectionPage>
+  );
+}

package/dist/docs/useOptimisticActions/update-with-query.tsx

@@ -0,0 +1,195 @@
+import { Avatar } from '@wix/design-system';
+import React from 'react';
+import { CollectionPage } from '@wix/patterns/page';
+import {
+  BulkActionButton,
+  BulkActionToolbar,
+  CollectionToolbarFilters,
+  Filter,
+  Table,
+  MultiSelectCheckboxFilter,
+  OffsetQuery,
+  stringsArrayFilter,
+  useTableCollection,
+  useOptimisticActions,
+  useStaticListFilterCollection,
+} from '@wix/patterns';
+import {
+  bulkUpdateContacts,
+  queryContacts,
+  updateContact,
+} from '@wix/ambassador-contacts-v4-contact/http';
+import {
+  Contact,
+  ContactInfo,
+  UpdateContactRequest,
+} from '@wix/ambassador-contacts-v4-contact/types';
+import { useHttpClient } from '@wix/yoshi-flow-bm';
+
+type ContactsFilters = {
+  level: Filter<string[]>;
+};
+
+function OrderBy() {
+  const httpClient = useHttpClient();
+
+  const state = useTableCollection<Contact, ContactsFilters>({
+    queryName: 'contacts-OrderBy',
+    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 collection = state.collection;
+
+  const optimisticActions = useOptimisticActions(collection, {
+    predicate: ({ filters }) => {
+      const { level } = filters;
+      return (item) => {
+        if (level && !level.some((level) => level === String(item.level))) {
+          return false;
+        }
+        return true;
+      };
+    },
+    orderBy: ({ sort }) => [
+      ...(sort || []),
+      {
+        fieldName: (item) => item.createdDate || new Date(0),
+        order: 'desc',
+      },
+    ],
+  });
+
+  const _updateContacts = (
+    contacts: Contact[],
+    { allSelected, total }: { allSelected: boolean; total: number },
+  ) => {
+    if (allSelected) {
+      const newNameContact = { name: 'new name' } as Partial<Contact>;
+
+      optimisticActions.updateAll(newNameContact, {
+        successToast: `${total} contacts changed`,
+        submit: () =>
+          httpClient.request(
+            bulkUpdateContacts({
+              filter: {
+                level: collection.filters.level.value,
+              },
+              info: newNameContact as ContactInfo,
+            }),
+          ),
+      });
+    } else {
+      const updatedContacts = contacts.map((c) => ({ ...c, name: 'new name' }));
+
+      optimisticActions.updateMany(updatedContacts, {
+        successToast: `${contacts.length} contacts changed`,
+        submit: (contacts) =>
+          Promise.all(
+            contacts.map((contact) =>
+              httpClient.request(
+                updateContact(contact as UpdateContactRequest),
+              ),
+            ),
+          ),
+      });
+    }
+  };
+
+  const levelsCollection = useStaticListFilterCollection(
+    collection.filters.level,
+    [
+      'Beginner',
+      'Amateur',
+      'Semi-Pro',
+      'Professional',
+      'World Class',
+      'Legendary',
+      'Ultimate',
+    ],
+  );
+
+  return (
+    <CollectionPage height="400px">
+      <CollectionPage.Header title={{ text: 'Contacts' }} />
+      <CollectionPage.Content>
+        <Table
+          state={collection}
+          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>
+              <MultiSelectCheckboxFilter
+                accordionItemProps={{ label: 'Level' }}
+                popoverProps={{ appendTo: 'window' }}
+                filter={collection.filters.level!}
+                collection={levelsCollection}
+                renderItem={(level) => ({ title: level })}
+              />
+            </CollectionToolbarFilters>
+          }
+          showSelection
+          bulkActionToolbar={({
+            selectedValues,
+            clearSelection,
+            allSelected,
+            total,
+          }) => (
+            <BulkActionToolbar
+              actionButton={
+                <BulkActionButton
+                  onClick={() => {
+                    _updateContacts(selectedValues, { allSelected, total });
+                    clearSelection();
+                  }}
+                >
+                  Update Contacts' Names
+                </BulkActionButton>
+              }
+            />
+          )}
+        />
+      </CollectionPage.Content>
+    </CollectionPage>
+  );
+}