@licklist/design 0.68.0 → 0.68.1-dev.0

package/src/sales/booking/results/BookingResults.stories.tsx

@@ -1,24 +1,24 @@
-import { Meta } from "@storybook/react";
-import { Event } from "@licklist/core/dist/DataMapper/Provider/EventDataMapper";
-import { User } from "@licklist/core/dist/DataMapper/User/UserDataMapper";
-import { Product } from "@licklist/core/dist/DataMapper/Product/ProductDataMapper";
+import { Meta } from '@storybook/react'
+import { Event } from '@licklist/core/dist/DataMapper/Provider/EventDataMapper'
+import { User } from '@licklist/core/dist/DataMapper/User/UserDataMapper'
+import { Product } from '@licklist/core/dist/DataMapper/Product/ProductDataMapper'
 import {
   Order,
   ORDER_SOURCE_IFRAME,
   ORDER_SOURCE_MANUAL,
-} from "@licklist/core/dist/DataMapper/Order/OrderDataMapper";
+} from '@licklist/core/dist/DataMapper/Order/OrderDataMapper'
 
-import { BookingResults } from "./BookingResults";
+import { BookingResults } from './BookingResults'
 
 export default {
-  title: "Sales/Booking/Results",
-} as Meta;
+  title: 'Sales/Booking/Results',
+} as Meta
 
 export const Default = (args) => (
   <div>
     <BookingResults {...args} />
   </div>
-);
+)
 
 Default.args = {
   orders: [
@@ -29,7 +29,7 @@ Default.args = {
       products: [
         {
           id: 1,
-          name: "Apple juice",
+          name: 'Apple juice',
         } as Product,
       ],
       orderProducts: [
@@ -42,23 +42,23 @@ Default.args = {
           quantity: 22,
         },
       ],
-      startDate: "2022-05-15T17:36:00.000+03:00",
+      startDate: '2022-05-15T17:36:00.000+03:00',
       endDate: null,
-      createdAt: "2022-05-20 18:28:56",
-      updatedAt: "2022-05-20 18:28:56",
-      status: "cart",
+      createdAt: '2022-05-20 18:28:56',
+      updatedAt: '2022-05-20 18:28:56',
+      status: 'cart',
       event: {
         id: 1,
-        name: "testEvent1",
-        startAt: "2022-05-15 18:21:00",
+        name: 'testEvent1',
+        startAt: '2022-05-15 18:21:00',
       } as Event,
-      feeChargeType: "company",
+      feeChargeType: 'company',
       user: {
         id: 1,
-        firstName: "test",
-        email: "test@test.test",
+        firstName: 'test',
+        email: 'test@test.test',
         userDetail: {
-          phone: "+38000009123",
+          phone: '+38000009123',
         },
       } as User,
     } as Order,
@@ -69,7 +69,7 @@ Default.args = {
       products: [
         {
           id: 2,
-          name: "Banana juice",
+          name: 'Banana juice',
         } as Product,
       ],
       orderProducts: [
@@ -82,23 +82,23 @@ Default.args = {
           quantity: 2,
         },
       ],
-      startDate: "2022-05-15T17:36:00.000+03:00",
+      startDate: '2022-05-15T17:36:00.000+03:00',
       endDate: null,
-      createdAt: "2022-05-20 18:28:56",
-      updatedAt: "2022-05-20 18:28:56",
-      status: "cart",
+      createdAt: '2022-05-20 18:28:56',
+      updatedAt: '2022-05-20 18:28:56',
+      status: 'cart',
       event: {
         id: 2,
-        name: "testEvent2",
-        startAt: "2022-05-15 18:21:00",
+        name: 'testEvent2',
+        startAt: '2022-05-15 18:21:00',
       } as Event,
-      feeChargeType: "company",
+      feeChargeType: 'company',
       user: {
         id: 2,
-        firstName: "test",
-        email: "test@test2.test",
+        firstName: 'test',
+        email: 'test@test2.test',
         userDetail: {
-          phone: "+380000091233",
+          phone: '+380000091233',
         },
       } as User,
     } as Order,
@@ -111,11 +111,11 @@ Default.args = {
       products: [
         {
           id: 3,
-          name: "Martini drink package for 10 persons",
+          name: 'Martini drink package for 10 persons',
         } as Product,
         {
           id: 4,
-          name: "Jägerbomb 2",
+          name: 'Jägerbomb 2',
         } as Product,
       ],
       orderProducts: [
@@ -136,23 +136,23 @@ Default.args = {
           quantity: 10,
         },
       ],
-      startDate: "2022-05-15T17:36:00.000+03:00",
+      startDate: '2022-05-15T17:36:00.000+03:00',
       endDate: null,
-      createdAt: "2022-05-20 18:28:56",
-      updatedAt: "2022-05-20 18:28:56",
-      status: "cart",
+      createdAt: '2022-05-20 18:28:56',
+      updatedAt: '2022-05-20 18:28:56',
+      status: 'cart',
       event: {
         id: 3,
-        name: "testEvent3",
-        startAt: "2022-05-15 18:21:00",
+        name: 'testEvent3',
+        startAt: '2022-05-15 18:21:00',
       } as Event,
-      feeChargeType: "company",
+      feeChargeType: 'company',
       user: {
         id: 3,
-        firstName: "test",
-        email: "test@test.test",
+        firstName: 'test',
+        email: 'test@test.test',
         userDetail: {
-          phone: "+38000009123",
+          phone: '+38000009123',
         },
       } as User,
     } as Order,
@@ -163,27 +163,27 @@ Default.args = {
       products: [
         {
           id: 3,
-          name: "Tomato juice",
+          name: 'Tomato juice',
         } as Product,
       ],
       orderProducts: [],
-      startDate: "2022-05-15T17:36:00.000+03:00",
+      startDate: '2022-05-15T17:36:00.000+03:00',
       endDate: null,
-      createdAt: "2022-05-20 18:28:56",
-      updatedAt: "2022-05-20 18:28:56",
-      status: "cart",
+      createdAt: '2022-05-20 18:28:56',
+      updatedAt: '2022-05-20 18:28:56',
+      status: 'cart',
       event: {
         id: 3,
-        name: "testEvent3",
-        startAt: "2022-05-15 18:21:00",
+        name: 'testEvent3',
+        startAt: '2022-05-15 18:21:00',
       } as Event,
-      feeChargeType: "company",
+      feeChargeType: 'company',
       user: {
         id: 3,
-        firstName: "test",
-        email: "test@test4.test",
+        firstName: 'test',
+        email: 'test@test4.test',
         userDetail: {
-          phone: "+38000009125",
+          phone: '+38000009125',
         },
       } as User,
     } as Order,
@@ -195,24 +195,24 @@ Default.args = {
       products: [
         {
           id: 3,
-          name: "Tomato juice",
+          name: 'Tomato juice',
         } as Product,
       ],
       orderProducts: [],
-      startDate: "2022-05-15T17:36:00.000+03:00",
+      startDate: '2022-05-15T17:36:00.000+03:00',
       endDate: null,
-      createdAt: "2022-05-20 18:28:56",
-      updatedAt: "2022-05-20 18:28:56",
-      status: "cart",
+      createdAt: '2022-05-20 18:28:56',
+      updatedAt: '2022-05-20 18:28:56',
+      status: 'cart',
       event: {
         id: 3,
-        name: "testEvent3",
-        startAt: "2022-05-15 18:21:00",
+        name: 'testEvent3',
+        startAt: '2022-05-15 18:21:00',
       } as Event,
-      feeChargeType: "company",
+      feeChargeType: 'company',
       user: {
         id: 3,
-        firstName: "test",
+        firstName: 'test',
       } as User,
     } as Order,
 
@@ -223,24 +223,24 @@ Default.args = {
       products: [
         {
           id: 3,
-          name: "Tomato juice",
+          name: 'Tomato juice',
         } as Product,
       ],
       orderProducts: [],
-      startDate: "2022-05-15T17:36:00.000+03:00",
+      startDate: '2022-05-15T17:36:00.000+03:00',
       endDate: null,
-      createdAt: "2022-05-20 18:28:56",
-      updatedAt: "2022-05-20 18:28:56",
-      status: "cart",
+      createdAt: '2022-05-20 18:28:56',
+      updatedAt: '2022-05-20 18:28:56',
+      status: 'cart',
       event: {
         id: 3,
-        name: "testEvent3",
-        startAt: "2022-05-15 18:21:00",
+        name: 'testEvent3',
+        startAt: '2022-05-15 18:21:00',
       } as Event,
-      feeChargeType: "company",
+      feeChargeType: 'company',
       user: {
         id: 3,
-        firstName: "test",
+        firstName: 'test',
       } as User,
     } as Order,
     {
@@ -250,25 +250,25 @@ Default.args = {
       products: [
         {
           id: 3,
-          name: "Tomato juice",
+          name: 'Tomato juice',
         } as Product,
       ],
       orderProducts: [],
-      startDate: "2022-05-15T17:36:00.000+03:00",
+      startDate: '2022-05-15T17:36:00.000+03:00',
       endDate: null,
-      createdAt: "2022-05-20 18:28:56",
-      updatedAt: "2022-05-20 18:28:56",
-      status: "cart",
+      createdAt: '2022-05-20 18:28:56',
+      updatedAt: '2022-05-20 18:28:56',
+      status: 'cart',
       event: {
         id: 3,
-        name: "testEvent3",
-        startAt: "2022-05-15 18:21:00",
+        name: 'testEvent3',
+        startAt: '2022-05-15 18:21:00',
       } as Event,
-      feeChargeType: "company",
+      feeChargeType: 'company',
       user: {
         id: 3,
-        firstName: "test",
+        firstName: 'test',
       } as User,
     } as Order,
   ],
-};
+}

package/src/sales/booking/results/BookingResults.tsx

@@ -1,32 +1,32 @@
-import { useTranslation } from "react-i18next";
-import { Order } from "@licklist/core/dist/DataMapper/Order/OrderDataMapper";
-import { User } from "@licklist/core/dist/DataMapper/User/UserDataMapper";
-import { ResultCard } from "./components/ResultCard";
-import { BACKGROUND_COLOR_CLASSNAMES } from "./constants";
+import { useTranslation } from 'react-i18next'
+import { Order } from '@licklist/core/dist/DataMapper/Order/OrderDataMapper'
+import { User } from '@licklist/core/dist/DataMapper/User/UserDataMapper'
+import { ResultCard } from './components/ResultCard'
+import { BACKGROUND_COLOR_CLASSNAMES } from './constants'
 
 export type BookingResultsProps = {
-  orders?: Order[] | null;
-  onCardClick?: (id: number) => void;
-  staffMembers?: User[] | null;
-};
+  orders?: Order[] | null
+  onCardClick?: (id: number) => void
+  staffMembers?: User[] | null
+}
 
 export const BookingResults = ({
   orders,
   onCardClick,
   staffMembers,
 }: BookingResultsProps) => {
-  const { t } = useTranslation("Design");
+  const { t } = useTranslation('Design')
 
   return (
     <div className="booking-results">
       {orders?.length === 0 ? (
-        <p>{t("noBookingOrdersWereFound")}</p>
+        <p>{t('noBookingOrdersWereFound')}</p>
       ) : (
         <div className="booking-results-wrapper">
           {orders?.map((order, index) => {
             const staffMember = staffMembers?.find(
               (staff) => staff.id === order?.orderMetadata?.createdBy,
-            );
+            )
             return (
               <ResultCard
                 key={order.id}
@@ -39,10 +39,10 @@ export const BookingResults = ({
                 }
                 onCardClick={onCardClick}
               />
-            );
+            )
           })}
         </div>
       )}
     </div>
-  );
-};
+  )
+}

package/src/sales/booking/results/components/ResultCard.tsx

@@ -1,35 +1,33 @@
-import clsx from "clsx";
-import { useTranslation } from "react-i18next";
-import { useIntl } from "react-intl";
+import clsx from 'clsx'
+import { useTranslation } from 'react-i18next'
+import { useIntl } from 'react-intl'
 import {
   Order,
   ORDER_SOURCE_MANUAL,
-} from "@licklist/core/dist/DataMapper/Order/OrderDataMapper";
-import { User } from "@licklist/core/dist/DataMapper/User/UserDataMapper";
-import { TIME_FORMAT } from "@licklist/core/dist/Config";
-import * as Config from "@licklist/core/dist/Config";
-import { formatDateStringForEvent } from "@licklist/plugins/dist/utils/formatDate";
-import { getOrderSourceTitle } from "@licklist/plugins/dist/utils/sourceTitle";
-import { FaUser } from "react-icons/fa";
-import { fromIso } from "@licklist/core/dist/Services";
+} from '@licklist/core/dist/DataMapper/Order/OrderDataMapper'
+import { User } from '@licklist/core/dist/DataMapper/User/UserDataMapper'
+import { TIME_FORMAT } from '@licklist/core/dist/Config'
+import * as Config from '@licklist/core/dist/Config'
+import { formatDateStringForEvent } from '@licklist/plugins/dist/utils/formatDate'
+import { getOrderSourceTitle } from '@licklist/plugins/dist/utils/sourceTitle'
+import { FaUser } from 'react-icons/fa'
+import { fromIso } from '@licklist/core/dist/Services'
 
 export type ResultCardProps = {
-  className: string;
-  order: Order;
-  staffMember?: User;
-  onCardClick?: (id: number) => void;
-};
+  className: string
+  order: Order
+  staffMember?: User
+  onCardClick?: (id: number) => void
+}
 
-// @TODO integrate when API will be available
-// activity and staff keys
 export const ResultCard = ({
   order,
   className,
   staffMember,
   onCardClick,
 }: ResultCardProps) => {
-  const { t } = useTranslation("Design");
-  const { formatNumber } = useIntl();
+  const { t } = useTranslation('Design')
+  const { formatNumber } = useIntl()
 
   const {
     id,
@@ -43,16 +41,16 @@ export const ResultCard = ({
     menu,
     remainingToPay,
     paidAmount,
-  } = order;
+  } = order
 
-  const productList = products.map((product) => product.name)?.join(", ") || "";
-  const activityName = event?.name || menu?.name || "";
+  const productList = products.map((product) => product.name)?.join(', ') || ''
+  const activityName = event?.name || menu?.name || ''
 
-  const onClick = () => onCardClick?.(id);
+  const onClick = () => onCardClick?.(id)
 
   return (
     <div
-      className={clsx("result-card", className)}
+      className={clsx('result-card', className)}
       onClick={onClick}
       onKeyUp={onClick}
       role="button"
@@ -72,46 +70,46 @@ export const ResultCard = ({
           {user.userDetail?.phone && <p>{user.userDetail?.phone}</p>}
           <p>------</p>
           <p>
-            {t("activity")}: {activityName}{" "}
+            {t('activity')}: {activityName}{' '}
           </p>
           {source === ORDER_SOURCE_MANUAL && staffMember && (
             <p>
-              {t("staff")}: {`${staffMember.firstName} ${staffMember.lastName}`}
+              {t('staff')}: {`${staffMember.firstName} ${staffMember.lastName}`}
             </p>
           )}
           <p>
-            {t("status")}: {t(status)}
+            {t('status')}: {t(status)}
           </p>
           <p>
-            {t("date")}: {formatDateStringForEvent(startDate)}
+            {t('date')}: {formatDateStringForEvent(startDate)}
           </p>
           <p>
-            {t("time")}: {fromIso(startDate).toFormat(TIME_FORMAT)}
+            {t('time')}: {fromIso(startDate).toFormat(TIME_FORMAT)}
           </p>
           <p className="products" title={productList}>
-            {t("products")}: {productList}
+            {t('products')}: {productList}
           </p>
           {!!remainingToPay && (
             <p>
-              {t("remainingAmount")}:{" "}
+              {t('remainingAmount')}:{' '}
               {formatNumber(remainingToPay, {
-                style: "currency",
+                style: 'currency',
                 currency: Config.Currency.GBP,
               })}
             </p>
           )}
           <p>
-            {t("paidAmount")}:{" "}
+            {t('paidAmount')}:{' '}
             {formatNumber(paidAmount, {
-              style: "currency",
+              style: 'currency',
               currency: Config.Currency.GBP,
             })}
           </p>
           <p>
-            {t("source")}: {t(getOrderSourceTitle(source))}
+            {t('source')}: {t(getOrderSourceTitle(source))}
           </p>
         </div>
       </div>
     </div>
-  );
-};
+  )
+}

package/src/sales/booking/results/constants.ts

@@ -1,7 +1,7 @@
 export const BACKGROUND_COLOR_CLASSNAMES = [
-  "random-color-blue",
-  "random-color-yellow",
-  "random-color-green",
-  "random-color-pink",
-  "random-color-violet",
-];
+  'random-color-blue',
+  'random-color-yellow',
+  'random-color-green',
+  'random-color-pink',
+  'random-color-violet',
+]

package/src/sales/booking/results/index.ts

@@ -1,3 +1,3 @@
-export { BookingResults } from "./BookingResults";
-export * from "./constants";
-export type { BookingResultsProps } from "./BookingResults";
+export { BookingResults } from './BookingResults'
+export * from './constants'
+export type { BookingResultsProps } from './BookingResults'

package/src/sales/constants.tsx

@@ -8,17 +8,17 @@ import {
   ORDER_PAYMENT_TYPE_VOUCHER,
   ORDER_PAYMENT_TYPE_PAYMENT_LINK,
   OrderPaymentType,
-} from "@licklist/core/dist/DataMapper/Order/OrderPaymentDataMapper";
+} from '@licklist/core/dist/DataMapper/Order/OrderPaymentDataMapper'
 
 export const EXTENDED_PAYMENT_TYPE_TRANSLATION_KEYS: {
-  [key in OrderPaymentType | typeof ORDER_PAYMENT_TYPE_PAYMENT_LINK]: string;
+  [key in OrderPaymentType | typeof ORDER_PAYMENT_TYPE_PAYMENT_LINK]: string
 } = {
-  [ORDER_PAYMENT_TYPE_CARD]: "card",
-  [ORDER_PAYMENT_TYPE_PAYMENT_LINK]: "paymentLink",
-  [ORDER_PAYMENT_TYPE_CASH]: "cash",
-  [ORDER_PAYMENT_TYPE_BANK_TRANSFER]: "bankTransfer",
-  [ORDER_PAYMENT_TYPE_CHEQUE]: "cheque",
-  [ORDER_PAYMENT_TYPE_PROVISIONAL]: "provisional",
-  [ORDER_PAYMENT_TYPE_SYSTEM_TRANSFER]: "systemTransfer",
-  [ORDER_PAYMENT_TYPE_VOUCHER]: "voucher",
-};
+  [ORDER_PAYMENT_TYPE_CARD]: 'card',
+  [ORDER_PAYMENT_TYPE_PAYMENT_LINK]: 'paymentLink',
+  [ORDER_PAYMENT_TYPE_CASH]: 'cash',
+  [ORDER_PAYMENT_TYPE_BANK_TRANSFER]: 'bankTransfer',
+  [ORDER_PAYMENT_TYPE_CHEQUE]: 'cheque',
+  [ORDER_PAYMENT_TYPE_PROVISIONAL]: 'provisional',
+  [ORDER_PAYMENT_TYPE_SYSTEM_TRANSFER]: 'systemTransfer',
+  [ORDER_PAYMENT_TYPE_VOUCHER]: 'voucher',
+}