@wix/patterns 1.459.0 → 1.461.0

package/dist/docs/CollectionOptimisticActions/create-many.tsx

@@ -0,0 +1,110 @@
+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 { contacts } from '@wix/crm';
+
+function CreateMany() {
+  const state = useTableCollection<contacts.Contact>({
+    queryName: 'contacts-CreateMany',
+    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 generateContacts = () =>
+    Array.from({ length: 5 }, (_, index) => ({
+      id: generateKey(index),
+      info: {
+        name: {
+          first: 'Contact',
+          last: generateKey(index),
+        },
+      },
+    }));
+
+  const generateKey = (index: number): string =>
+    new window.Date().toString() + index;
+
+  const _createContacts = () => {
+    const newContacts = generateContacts();
+
+    optimisticActions.createMany(newContacts, {
+      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);
+      },
+    });
+  };
+
+  return (
+    <CollectionPage height="400px">
+      <CollectionPage.Header title={{ text: 'Contacts' }} />
+      <CollectionPage.Content>
+        <Table
+          state={collection}
+          primaryActionButton={
+            <PrimaryActionButton onClick={_createContacts}>
+              Add contacts
+            </PrimaryActionButton>
+          }
+          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(),
+            },
+          ]}
+        />
+      </CollectionPage.Content>
+    </CollectionPage>
+  );
+}

package/dist/docs/CollectionOptimisticActions/create-one.tsx

@@ -0,0 +1,104 @@
+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 { contacts } from '@wix/crm';
+
+function CreateOne() {
+  const state = useTableCollection<contacts.Contact>({
+    queryName: 'contacts-CreateOne',
+    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, {
+      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);
+      },
+    });
+  };
+
+  return (
+    <CollectionPage height="400px">
+      <CollectionPage.Header title={{ text: 'Contacts' }} />
+      <CollectionPage.Content>
+        <Table
+          state={collection}
+          primaryActionButton={
+            <PrimaryActionButton onClick={_createContact}>
+              Add Contact
+            </PrimaryActionButton>
+          }
+          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(),
+            },
+          ]}
+        />
+      </CollectionPage.Content>
+    </CollectionPage>
+  );
+}

package/dist/docs/CollectionOptimisticActions/delete-all.tsx

@@ -0,0 +1,132 @@
+import { Avatar } from '@wix/design-system';
+import React from 'react';
+import { CollectionPage } from '@wix/patterns/page';
+import {
+  BulkActionButton,
+  BulkActionToolbar,
+  Table,
+  OffsetQuery,
+  useTableCollection,
+  useOptimisticActions,
+} from '@wix/patterns';
+import {
+  deleteContact,
+  queryContacts,
+  bulkDeleteContacts,
+} from '@wix/ambassador-contacts-v4-contact/http';
+import { Contact } from '@wix/ambassador-contacts-v4-contact/types';
+import { useHttpClient } from '@wix/yoshi-flow-bm';
+
+function DeleteAll() {
+  const httpClient = useHttpClient();
+
+  const state = useTableCollection<Contact>({
+    queryName: 'contacts-DeleteAll',
+    fetchData: (query: OffsetQuery) => {
+      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',
+  });
+
+  const collection = state.collection;
+
+  const optimisticActions = useOptimisticActions(collection);
+
+  const _deleteContacts = (
+    contacts: Contact[],
+    { allSelected, total }: { allSelected: boolean; total: number },
+  ) => {
+    if (allSelected) {
+      optimisticActions.deleteAll({
+        successToast: `${total} contacts deleted`,
+        submit: () => {
+          try {
+            return httpClient.request(bulkDeleteContacts({} as any));
+          } catch (error) {
+            console.log(error);
+          }
+
+          return Promise.resolve() as any;
+        },
+      });
+    } else {
+      optimisticActions.deleteMany(contacts, {
+        successToast: `${contacts.length} contacts deleted`,
+        submit: (contactsToDelete) =>
+          Promise.all(
+            contactsToDelete.map((contactToDelete) =>
+              deleteContact({
+                contactId: contactToDelete.id as string,
+              }),
+            ),
+          ),
+      });
+    }
+  };
+
+  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(),
+            },
+          ]}
+          showSelection
+          bulkActionToolbar={({
+            selectedValues,
+            clearSelection,
+            allSelected,
+            total,
+          }) => (
+            <BulkActionToolbar
+              actionButton={
+                <BulkActionButton
+                  onClick={() => {
+                    _deleteContacts(selectedValues, { allSelected, total });
+                    clearSelection();
+                  }}
+                >
+                  Delete
+                </BulkActionButton>
+              }
+            />
+          )}
+        />
+      </CollectionPage.Content>
+    </CollectionPage>
+  );
+}

package/dist/docs/CollectionOptimisticActions/delete-many.tsx

@@ -0,0 +1,104 @@
+import { Avatar } from '@wix/design-system';
+import React from 'react';
+import { CollectionPage } from '@wix/patterns/page';
+import {
+  BulkActionButton,
+  BulkActionToolbar,
+  Table,
+  OffsetQuery,
+  useTableCollection,
+  useOptimisticActions,
+} from '@wix/patterns';
+import { contacts } from '@wix/crm';
+
+function DeleteMany() {
+  const state = useTableCollection<contacts.Contact>({
+    queryName: 'contacts-DeleteMany',
+    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 _deleteContacts = (_contacts: contacts.Contact[]) => {
+    optimisticActions.deleteMany<void[]>(_contacts, {
+      successToast: `${_contacts.length} contacts deleted`,
+      submit: async (contactsToDelete) =>
+        Promise.all(
+          contactsToDelete.map((contact) =>
+            contacts.deleteContact(contact._id as string),
+          ),
+        ),
+    });
+  };
+
+  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(),
+            },
+          ]}
+          showSelection
+          maxSelection={2}
+          bulkActionToolbar={({ selectedValues, clearSelection }) => (
+            <BulkActionToolbar
+              actionButton={
+                <BulkActionButton
+                  onClick={() => {
+                    _deleteContacts(selectedValues);
+                    clearSelection();
+                  }}
+                >
+                  Delete
+                </BulkActionButton>
+              }
+            />
+          )}
+        />
+      </CollectionPage.Content>
+    </CollectionPage>
+  );
+}

package/dist/docs/CollectionOptimisticActions/delete-one.tsx

@@ -0,0 +1,94 @@
+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 DeleteOne() {
+  const state = useTableCollection<contacts.Contact>({
+    queryName: 'contacts-DeleteOne',
+    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 _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}
+          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(),
+            },
+          ]}
+          showSelection
+          actionCell={(contact) => ({
+            primaryAction: {
+              text: 'Delete',
+              onClick: () => {
+                _deleteContact(contact);
+              },
+            },
+          })}
+        />
+      </CollectionPage.Content>
+    </CollectionPage>
+  );
+}

package/dist/docs/CollectionOptimisticActions/update-all.tsx

@@ -0,0 +1,142 @@
+import { Avatar } from '@wix/design-system';
+import React from 'react';
+import { CollectionPage } from '@wix/patterns/page';
+import {
+  BulkActionButton,
+  BulkActionToolbar,
+  Table,
+  OffsetQuery,
+  useTableCollection,
+  useOptimisticActions,
+} 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';
+
+function UpdateAll() {
+  const httpClient = useHttpClient();
+
+  const state = useTableCollection<Contact>({
+    queryName: 'contacts-UpdateAll',
+    fetchData: (query: OffsetQuery) => {
+      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',
+  });
+
+  const collection = state.collection;
+
+  const optimisticActions = useOptimisticActions(collection);
+
+  const _updateContacts = (
+    contacts: Contact[],
+    { allSelected, total }: { allSelected: boolean; total: number },
+  ) => {
+    if (allSelected) {
+      const newLevelContact = { level: 'Legendary' } as Partial<Contact>;
+      optimisticActions.updateAll(newLevelContact, {
+        successToast: `${total} contacts changed`,
+        submit: () =>
+          httpClient.request(
+            bulkUpdateContacts({
+              info: newLevelContact as ContactInfo,
+            }),
+          ),
+      });
+    } else {
+      const updatedContacts = contacts.map((c) => ({
+        ...c,
+        level: 'Legendary',
+      }));
+
+      optimisticActions.updateMany(updatedContacts, {
+        successToast: `${contacts.length} contacts updated`,
+        submit: (contacts) =>
+          Promise.all(
+            contacts.map((contact) =>
+              httpClient.request(
+                updateContact(contact as UpdateContactRequest),
+              ),
+            ),
+          ),
+      });
+    }
+  };
+
+  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: 'Created Date',
+              render: (contact) => contact.createdDate?.toDateString(),
+            },
+          ]}
+          showSelection
+          bulkActionToolbar={({
+            selectedValues,
+            clearSelection,
+            allSelected,
+            total,
+          }) => (
+            <BulkActionToolbar
+              actionButton={
+                <BulkActionButton
+                  onClick={() => {
+                    _updateContacts(selectedValues, {
+                      allSelected,
+                      total,
+                    });
+                    clearSelection();
+                  }}
+                >
+                  Update to Legendary
+                </BulkActionButton>
+              }
+            />
+          )}
+        />
+      </CollectionPage.Content>
+    </CollectionPage>
+  );
+}