@licklist/design 0.44.550-dev.4 → 0.44.550-dev.6

package/src/iframe/payment/payment-status-page/PaymentStatusPage.tsx

@@ -1,7 +1,5 @@
-// eslint-disable-next-line max-len
 import React, { ReactNode } from "react";
 import { useTranslation } from "react-i18next";
-
 import { PaymentStatusBody } from "./component";
 import { LoaderIndicator } from "../../../static/loader/LoaderIndicator";
 import { Page, PageBody } from "../../page";
@@ -16,7 +14,7 @@ export const ORDER_STATUS_FAILED = "failed";
 export const ORDER_STATUS_SUCCESS = "success";
 export const ORDER_STATUS_PENDING = "pending";
 
-export type OrderStatusPrefix =
+export type OrderStatus =
   | typeof ORDER_STATUS_SUCCESS
   | typeof ORDER_STATUS_FAILED
   | typeof ORDER_STATUS_PENDING;
@@ -26,7 +24,7 @@ interface PaymentStatusComponentProps {
   onBack?: () => void;
   onTryAgain?: () => void;
   isLoading?: boolean;
-  status: OrderStatusPrefix;
+  status: OrderStatus;
   isAppUsingInIframe?: boolean;
   bookingSummaryProps?: BookingSummaryProps;
   EventCardComponent?: ReactNode;
@@ -36,6 +34,12 @@ interface PaymentStatusComponentProps {
   paymentMetadata?: PaymentMetadata;
 }
 
+const titles: Record<OrderStatus, string> = {
+  [ORDER_STATUS_SUCCESS]: "purchaseSuccessful",
+  [ORDER_STATUS_PENDING]: "pendingPayment",
+  [ORDER_STATUS_FAILED]: "purchaseFailed",
+};
+
 // @TODO In future think, how to reuse this component in Iframe Pending, Success and Failed Pages
 export const PaymentStatusPage = ({
   onCloseWindow,
@@ -53,27 +57,10 @@ export const PaymentStatusPage = ({
 }: PaymentStatusComponentProps) => {
   const { t } = useTranslation("Design");
 
-  const getTitle = () => {
-    switch (status) {
-      case ORDER_STATUS_SUCCESS:
-        return t("purchaseSuccessful");
-      case ORDER_STATUS_PENDING:
-        return t("pendingPayment");
-      default:
-        return t("purchaseFailed");
-    }
-  };
-
-  const title = getTitle();
-
-  if (isLoading) {
-    return <LoaderIndicator isLoaded={false} />;
-  }
+  if (isLoading) return <LoaderIndicator isLoaded={false} />;
 
   const orderTotalAmounByFormValues = cartSumByOrderProducts(
-    bookingSummaryProps && bookingSummaryProps?.formValues
-      ? Object.values(bookingSummaryProps?.formValues)
-      : undefined
+    Object.values(bookingSummaryProps?.formValues ?? {})
   );
 
   // User can fill promocode only in iframe appcliation.
@@ -88,6 +75,7 @@ export const PaymentStatusPage = ({
   return (
     <Page
       className="payment-status-page"
+      isAppUsingInIframe={isAppUsingInIframe}
       headerBlock={
         <PaymentStatusHeader
           success={status !== ORDER_STATUS_FAILED}
@@ -98,11 +86,10 @@ export const PaymentStatusPage = ({
           }
         />
       }
-      isAppUsingInIframe={isAppUsingInIframe}
     >
       <PageBody
         leftBlock={
-          <PageBody.LeftBlock title={title}>
+          <PageBody.LeftBlock title={t(titles[status])}>
             <div>
               {EventCardComponent}
               <PaymentStatusBody
@@ -168,7 +155,7 @@ export const PaymentStatusPage = ({
             {bookingSummaryProps ? (
               <BookingSummary {...bookingSummaryProps} />
             ) : (
-              <h6>{title}</h6>
+              <h6>{t(titles[status])}</h6>
             )}
           </PageBody.RightBlock>
         }

package/src/iframe/payment/payment-status-page/component/PaymentStatusBody.tsx

@@ -3,12 +3,12 @@ import { useTranslation } from "react-i18next";
 import {
   ORDER_STATUS_PENDING,
   ORDER_STATUS_SUCCESS,
-  OrderStatusPrefix,
+  OrderStatus,
 } from "../PaymentStatusPage";
 import { StatusBody } from "../../status-body/StatusBody";
 
 interface PaymentStatusBodyProps {
-  status: OrderStatusPrefix;
+  status: OrderStatus;
   onBack: () => void;
   onTryAgain?: () => void;
   email?: string;

package/src/product-set/control/DateAndRecurrenceInput.tsx

@@ -126,7 +126,8 @@ export const DateAndRecurrenceInput = ({
       }
     }
 
-    const availableTime = availableTimesFormRef?.current?.getValues()?.availableTimes || null;
+    const availableTime =
+      availableTimesFormRef?.current?.getValues()?.availableTimes || null;
 
     const values = {
       rrule: next.rrule,

package/src/sales/manual-booking/number-input-horizontal/NumberInputHorizontal.stories.tsx

@@ -0,0 +1,48 @@
+import React, { useRef, useState } from "react";
+import { Meta, Story } from "@storybook/react";
+import { NumberInputHorizontal } from "./NumberInputHorizontal";
+
+export default {
+  title: "Manual Booking/NumberInputHorizontal",
+} as Meta;
+
+export const Default: Story<any> = (args) => {
+  const ref = useRef(null);
+  const [value, setValue] = useState(0);
+  const [isDisabled, setDisabled] = useState(true);
+
+  const onPriceClick = (e) => {
+    if (!isDisabled) {
+      return;
+    }
+    console.log("click");
+    setDisabled(false);
+  };
+
+  return (
+    <div
+      role="button"
+      tabIndex={0}
+      onClick={onPriceClick}
+      onKeyDown={onPriceClick}
+      style={{ height: "250px", width: "370px" }}
+    >
+      <NumberInputHorizontal
+        ref={ref}
+        hasCurrency
+        onSelect={onPriceClick}
+        onChange={(val) => {
+          setValue(val);
+        }}
+        onMinusClick={() => {
+          setValue(value - 1 || 0);
+        }}
+        onPlusClick={() => {
+          setValue((value ?? 0) + 1);
+        }}
+        value={value}
+        disabled={isDisabled}
+      />
+    </div>
+  );
+};

package/src/sales/manual-booking/number-input-horizontal/NumberInputHorizontal.tsx

@@ -1,5 +1,5 @@
 import clsx from "clsx";
-import React, { forwardRef } from "react";
+import React, { SyntheticEvent, forwardRef } from "react";
 import { FormControl } from "react-bootstrap";
 import { useTranslation } from "react-i18next";
 import { Icon } from "../../../static";
@@ -13,6 +13,7 @@ interface NumberInputHorizontalProps {
   onChange: (value: number) => void;
   onPlusClick: (value: number) => void;
   onMinusClick: (value: number) => void;
+  onSelect?: (e: SyntheticEvent) => void;
   min?: number;
   max?: number;
   size?: Sizes;
@@ -35,6 +36,7 @@ export const NumberInputHorizontal = forwardRef<
       onChange,
       onPlusClick,
       onMinusClick,
+      onSelect,
       min,
       max,
       defaultValue,
@@ -54,7 +56,12 @@ export const NumberInputHorizontal = forwardRef<
       }
     };
 
-    const onClick = (e) => e.target.select();
+    const onClick = (e) => {
+      if (onSelect) {
+        onSelect(e);
+      }
+      e.target.select();
+    };
 
     const handleArrowDownClick = () => {
       if (min !== undefined && value > min) {
@@ -98,13 +105,16 @@ export const NumberInputHorizontal = forwardRef<
             ref={ref}
             onClick={onClick}
             type={disabled && hasBigSize ? "text" : "number"}
-            className={hasBigSize ? "big-sizes-input" : "small-sizes-input"}
+            className={clsx(
+              hasBigSize ? "big-sizes-input" : "small-sizes-input",
+              disabled && "border-0"
+            )}
             onChange={(e) => onChange(Number(e.target.value))}
             value={disabled && hasBigSize && !isLoading ? soldOut : value}
             min={min}
             max={max}
             defaultValue={defaultValue}
-            disabled={disabled}
+            disabled={disabled && !onSelect}
           />
         </div>
         <button

package/src/styles/iframe-order-process/IframeOrderProcess.scss

@@ -131,6 +131,12 @@
         font-weight: 500;
       }
 
+      .categories {
+        &:not(:last-child) {
+          border-bottom: 2px solid $separator-color;
+        }
+      }
+
       .products {
         margin-top: 0.5rem;
 
@@ -144,10 +150,6 @@
               margin-bottom: 0.5rem;
             }
           }
-
-          &:not(:last-child) {
-            border-bottom: 2px solid $separator-color;
-          }
         }
 
         &:not(:last-child) {

package/src/types/iframe.ts

@@ -1,61 +1,5 @@
-import { Product as CoreProduct } from "@licklist/core/dist/DataMapper/Product/ProductDataMapper";
-import { Zone } from "@licklist/core/dist/DataMapper/Provider/ZoneDataMapper";
-
-export interface Product {
-  id: number;
-  name: string;
-  description: string;
-  deposit: number;
-  price: number;
-  minSub?: number;
-  minAmount?: number;
-  maxAmount?: number;
-  minSpend?: number | null;
-  isSoldOut?: boolean;
-  isRequired?: boolean;
-  isUnlimited?: boolean;
-  images: CoreProduct["images"];
-  capacity?: number | null;
-  uuid: string;
-}
-
-export interface ProductCategory {
-  id: number;
-  name: string;
-  allowDeposits?: boolean;
-  remainderExpireAfter?: number | null;
-  minSubItems: number | null;
-  maxSubItems: number | null;
-  products?: Product[];
-  zone?: Zone | null;
-}
-
-export interface MenuStep {
-  id: number;
-  name: string;
-  productCategories?: ProductCategory[];
-}
-
-export interface Menu {
-  id: number;
-  menuSteps: MenuStep[];
-}
-
-// TODO similar type exists in iframe app
-// remove this when components are moved to iframe
-export interface Order {
-  id: number;
-  quantity: number;
-  price: number;
-  name: string;
-  productsCategoryId: number;
-  deposit?: number | null;
-}
+import { OrderItems } from "@licklist/plugins/dist/types/context/Iframe/orderItems";
 
 export type SetOrderFn = (
-  val:
-    | Record<number, Order>
-    | ((prevVar: Record<number, Order>) => Record<number, Order>)
+  val: OrderItems | ((prevVar: OrderItems) => OrderItems)
 ) => void;
-
-export type WizardFormValues = { [key: string]: any };