@licklist/design 0.68.1 → 0.68.2-dev.2

package/src/iframe/order-process/components/PaymentCard/PaymentCard.tsx

@@ -1,19 +1,19 @@
-import { FC, ReactNode } from "react";
-import { useTranslation } from "react-i18next";
-import { useIntl } from "react-intl";
-import * as Config from "@licklist/core/dist/Config";
-import { Order } from "@licklist/core/dist/DataMapper/Order/OrderDataMapper";
-import { PaymentDetail } from "@licklist/core/dist/DataMapper/Order/PaymentDetailDataMapper";
-import { FaCreditCard } from "react-icons/fa";
+import { FC, ReactNode } from 'react'
+import { useTranslation } from 'react-i18next'
+import { useIntl } from 'react-intl'
+import * as Config from '@licklist/core/dist/Config'
+import { Order } from '@licklist/core/dist/DataMapper/Order/OrderDataMapper'
+import { PaymentDetail } from '@licklist/core/dist/DataMapper/Order/PaymentDetailDataMapper'
+import { FaCreditCard } from 'react-icons/fa'
 
 export type PaymentCardProps = {
-  discountBlock?: ReactNode;
-  order?: Order;
-  totalWithDiscount?: number;
-  paymentDetail?: PaymentDetail | null;
-  recalculatedFee?: number;
-  isFreePayment?: boolean;
-};
+  discountBlock?: ReactNode
+  order?: Order
+  totalWithDiscount?: number
+  paymentDetail?: PaymentDetail | null
+  recalculatedFee?: number
+  isFreePayment?: boolean
+}
 
 export const PaymentCard: FC<PaymentCardProps> = ({
   order,
@@ -23,67 +23,65 @@ export const PaymentCard: FC<PaymentCardProps> = ({
   paymentDetail,
   isFreePayment,
 }) => {
-  const { t } = useTranslation(["Design"]);
-  const { formatNumber } = useIntl();
+  const { t } = useTranslation(['Design'])
+  const { formatNumber } = useIntl()
 
   if (!order) {
-    return null;
+    return null
   }
 
-  const fee = isFreePayment ? 0 : recalculatedFee || paymentDetail.fee;
+  const fee = isFreePayment ? 0 : recalculatedFee || paymentDetail.fee
 
   const totalFromProducts = order.orderProducts.reduce(
-    (prevSumValue: number, product) => {
-      return prevSumValue + product.price * product.quantity;
-    },
+    (prevSumValue: number, product) =>
+      prevSumValue + product.price * product.quantity,
     0,
-  );
+  )
 
   const totalAmount = () => {
     if (isFreePayment) {
-      return 0;
+      return 0
     }
-    const total = totalWithDiscount || totalFromProducts;
+    const total = totalWithDiscount || totalFromProducts
 
     if (
       !paymentDetail ||
       (paymentDetail && paymentDetail.totalAmount === paymentDetail.netAmount)
     ) {
-      return total;
+      return total
     }
 
-    return total + fee;
-  };
+    return total + fee
+  }
 
-  const formatCountToCurrency = (count: number) => {
-    return formatNumber(count, {
-      style: "currency",
+  const formatCountToCurrency = (count: number) =>
+    formatNumber(count, {
+      style: 'currency',
       currency: Config.Currency.GBP,
-    });
-  };
+    })
 
-  const totalSummary = formatCountToCurrency(totalAmount());
+  const totalSummary = formatCountToCurrency(totalAmount())
 
   const discountAmount = formatCountToCurrency(
     totalWithDiscount ? totalFromProducts - totalWithDiscount : 0,
-  );
+  )
 
   return (
     <div className="payment-card">
       <div className="title">
         <FaCreditCard />
-        <p className="m-0">{t("Design:payment")}</p>
+        <p className="m-0">{t('Design:payment')}</p>
       </div>
       <div className="payment-summary mb-5">
-        <p>{t("Design:fullAmount")}</p>
+        <p>{t('Design:fullAmount')}</p>
         <p className="total-summary">{totalSummary}</p>
         {paymentDetail &&
           paymentDetail.totalAmount !== paymentDetail.netAmount && (
             <>
               (&nbsp;
-              {t("Design:includingBookingFee", {
+              {t('Design:includingBookingFee', {
                 fee: formatNumber(fee, {
-                  style: "currency",
+                  style: 'currency',
                   currency: Config.Currency.GBP,
                 }),
               })}
@@ -92,18 +90,18 @@ export const PaymentCard: FC<PaymentCardProps> = ({
           )}
         {totalWithDiscount > 0 && (
           <p className="mt-3">
-            {t("Design:youHaveSaved", { amount: discountAmount })}
+            {t('Design:youHaveSaved', { amount: discountAmount })}
           </p>
         )}
       </div>
       <div className="secure-block">
-        {t("Design:securePayment")}
+        {t('Design:securePayment')}
         <div className="pay-today">
-          {t("Design:payToday")}
+          {t('Design:payToday')}
           <p className="m-0 ml-4 total-summary">{totalSummary}</p>
         </div>
       </div>
       {discountBlock}
     </div>
-  );
-};
+  )
+}

package/src/iframe/order-process/components/PaymentCard/index.ts

@@ -1 +1 @@
-export { PaymentCard } from "./PaymentCard";
+export { PaymentCard } from './PaymentCard'

package/src/iframe/order-process/components/Timer/Timer.stories.tsx

@@ -1,10 +1,10 @@
-import { Meta } from "@storybook/react";
-import { Timer } from "./Timer";
+import { Meta } from '@storybook/react'
+import { Timer } from './Timer'
 
 export default {
-  title: "Iframe/Order-Process/Timer",
+  title: 'Iframe/Order-Process/Timer',
   component: Timer,
-} as Meta;
+} as Meta
 
 export function Default() {
   return (
@@ -13,5 +13,5 @@ export function Default() {
         <Timer timer={120000} />
       </div>
     </div>
-  );
+  )
 }

package/src/iframe/order-process/components/Timer/Timer.tsx

@@ -1,13 +1,13 @@
-import { useTranslation } from "react-i18next";
-import { FaStopwatch } from "react-icons/fa";
-import { fancyTimeFormat } from "./utils";
+import { useTranslation } from 'react-i18next'
+import { FaStopwatch } from 'react-icons/fa'
+import { fancyTimeFormat } from './utils'
 
 export type TimerProps = {
-  timer: number;
-};
+  timer: number
+}
 
 export const Timer = ({ timer }: TimerProps) => {
-  const { t } = useTranslation("Design");
+  const { t } = useTranslation('Design')
 
   return (
     <div className="payment-timer-counter">
@@ -19,7 +19,7 @@ export const Timer = ({ timer }: TimerProps) => {
           <div className="time">{fancyTimeFormat(timer)}</div>
         </div>
       </div>
-      <div className="timer-explanation">{t("toCompleteThisBooking")}</div>
+      <div className="timer-explanation">{t('toCompleteThisBooking')}</div>
     </div>
-  );
-};
+  )
+}

package/src/iframe/order-process/components/Timer/index.ts

@@ -1 +1 @@
-export { Timer } from "./Timer";
+export { Timer } from './Timer'

package/src/iframe/order-process/components/Timer/utils/index.ts

@@ -1,7 +1,7 @@
 export const fancyTimeFormat = (milliseconds: number) => {
-  const totalSeconds = Math.floor(milliseconds / 1000);
-  const minutes = Math.floor(totalSeconds / 60);
-  const seconds = totalSeconds % 60;
-  const formattedSecs = seconds < 10 ? `0${seconds}` : `${seconds}`;
-  return `${minutes}:${formattedSecs}`;
-};
+  const totalSeconds = Math.floor(milliseconds / 1000)
+  const minutes = Math.floor(totalSeconds / 60)
+  const seconds = totalSeconds % 60
+  const formattedSecs = seconds < 10 ? `0${seconds}` : `${seconds}`
+  return `${minutes}:${formattedSecs}`
+}

package/src/iframe/order-process/components/utils/useCategoryVerification.ts

@@ -1,86 +1,86 @@
-import { Currency } from "@licklist/core/dist/Config";
-import { useIntl } from "react-intl";
-import { useTranslation } from "react-i18next";
-import { OrderItems } from "@licklist/plugins/dist/types/context/Iframe/orderItems";
-import { ProductCategory } from "@licklist/plugins/dist/types/context/sale/menuSteps";
+import { Currency } from '@licklist/core/dist/Config'
+import { useIntl } from 'react-intl'
+import { useTranslation } from 'react-i18next'
+import { OrderItems } from '@licklist/plugins/dist/types/context/Iframe/orderItems'
+import { ProductCategory } from '@licklist/plugins/dist/types/context/sale/menuSteps'
 
 interface CategoryError {
-  message: string;
-  id?: number;
+  message: string
+  id?: number
 }
 
 // TODO it's temporary solution, please remove it later
 export const useCategoryVerification = () => {
-  const { t } = useTranslation("Validation");
-  const { formatNumber } = useIntl();
+  const { t } = useTranslation('Validation')
+  const { formatNumber } = useIntl()
 
   return (
     orderItems: OrderItems,
     productCategories?: ProductCategory[],
     isLastPage?: boolean,
   ): CategoryError | void => {
-    let errorMessage: { id?: number; message: string } | void;
+    let errorMessage: { id?: number; message: string } | void
 
     const productArray = Object.values(orderItems).filter(
       (product) => product?.quantity > 0,
-    );
+    )
 
     const sumOfMinSpends = productCategories.reduce((acc, productCategory) => {
-      const { products } = productCategory;
+      const { products } = productCategory
       const selectedProducts = products.filter((product) =>
         productArray.map((el) => el.id).includes(product?.id),
-      );
+      )
       const productMinSpendsSum = selectedProducts.reduce((sum, product) => {
         const quantity =
           productArray.find((selected) => selected.id === product.id)
-            ?.quantity || 1;
-        return sum + product.minSpend * quantity;
-      }, 0);
+            ?.quantity || 1
+        return sum + product.minSpend * quantity
+      }, 0)
 
-      return acc + productMinSpendsSum;
-    }, 0);
+      return acc + productMinSpendsSum
+    }, 0)
 
     const totalPrice = productArray.reduce(
       (total, product) => total + product.price * product.quantity,
       0,
-    );
+    )
 
     productCategories.forEach(({ minSubItems, maxSubItems, id, name }) => {
-      if (!minSubItems && !maxSubItems) return;
+      if (!minSubItems && !maxSubItems) return
 
       const categoryProductsQuantity = productArray.filter(
         (product) => product?.productCategoryId === id,
-      ).length;
+      ).length
 
       if (minSubItems && categoryProductsQuantity < minSubItems) {
-        const message = t("Validation:fieldMinNumber", {
+        const message = t('Validation:fieldMinNumber', {
           min: minSubItems,
           attribute: `number of products in the ${name} category`,
-        });
-        errorMessage = { id, message };
+        })
+        errorMessage = { id, message }
 
-        return;
+        return
       }
 
       if (maxSubItems && categoryProductsQuantity > maxSubItems) {
-        const message = t("Validation:fieldMaxNumber", {
+        const message = t('Validation:fieldMaxNumber', {
           max: maxSubItems,
           attribute: `number of products in the ${name} category`,
-        });
-        errorMessage = { id, message };
+        })
+        errorMessage = { id, message }
       }
-    });
+    })
 
     if (totalPrice < sumOfMinSpends && !errorMessage && isLastPage) {
-      const message = t("Design:minimumSpendSumValidation", {
+      const message = t('Design:minimumSpendSumValidation', {
         minSpend: formatNumber(sumOfMinSpends, {
-          style: "currency",
+          style: 'currency',
           currency: Currency.GBP,
         }),
-      }) as string;
-      errorMessage = { message };
+      }) as string
+      errorMessage = { message }
     }
 
-    return errorMessage;
-  };
-};
+    return errorMessage
+  }
+}

package/src/iframe/order-process/constants.ts

@@ -1,2 +1,2 @@
-export const STEP_FORM_ID = "STEP_FORM";
-export const MIN_SPEND_ERROR = "MIN_SPEND_ERROR";
+export const STEP_FORM_ID = 'STEP_FORM'
+export const MIN_SPEND_ERROR = 'MIN_SPEND_ERROR'

package/src/iframe/order-process/index.ts

@@ -1,12 +1,12 @@
-export { BookingSummary } from "./components/BookingSummary";
-export { NavigationSteps } from "./components/NavigationSteps";
-export type { NavigationStep } from "./components/NavigationSteps";
-export { Timer } from "./components/Timer";
-export { NavigationFooter } from "./components/NavigationFooter";
-export { PaymentCard } from "./components/PaymentCard";
-export { BookingSummaryFooter } from "./components/BookingSummaryFooter";
-export type { BookingSummaryFooterProps } from "./components/BookingSummaryFooter";
-export { CalendarStepsForm } from "./components/CalendarStepsForm";
-export type { CalendarStepsFormProps } from "./components/CalendarStepsForm";
-export { useCategoryVerification } from "./components/utils/useCategoryVerification";
-export { ErrorModal } from "./components/ErrorModal";
+export { BookingSummary } from './components/BookingSummary'
+export { NavigationSteps } from './components/NavigationSteps'
+export type { NavigationStep } from './components/NavigationSteps'
+export { Timer } from './components/Timer'
+export { NavigationFooter } from './components/NavigationFooter'
+export { PaymentCard } from './components/PaymentCard'
+export { BookingSummaryFooter } from './components/BookingSummaryFooter'
+export type { BookingSummaryFooterProps } from './components/BookingSummaryFooter'
+export { CalendarStepsForm } from './components/CalendarStepsForm'
+export type { CalendarStepsFormProps } from './components/CalendarStepsForm'
+export { useCategoryVerification } from './components/utils/useCategoryVerification'
+export { ErrorModal } from './components/ErrorModal'