@licklist/design 0.45.0-dev.0 → 0.46.0

package/src/iframe/order-process/components/CategoryProduct/components/NumberInput/NumberInput.stories.tsx

@@ -0,0 +1,23 @@
+import React, { useState } from "react";
+import { Meta } from "@storybook/react";
+import { NumberInput } from "./NumberInput";
+
+export default {
+  title: "Iframe/Order-Process/NumberInput",
+  component: NumberInput,
+} as Meta;
+
+export function Default() {
+  const [value, setValue] = useState(0);
+
+  return (
+    <div className="payment-process">
+      <NumberInput
+        value={value}
+        onChange={setValue}
+        onArrowDown={setValue}
+        onArrowUp={setValue}
+      />
+    </div>
+  );
+}

package/src/iframe/order-process/components/CategoryProduct/components/NumberInput/NumberInput.tsx

@@ -0,0 +1,89 @@
+import React, { forwardRef } from "react";
+import clsx from "clsx";
+import { FormControl } from "react-bootstrap";
+
+interface NumberInputProps {
+  className?: string;
+  value: number;
+  onChange: (value: number) => void;
+  onArrowUp?: (value: number) => void;
+  onArrowDown?: (value: number) => void;
+  min?: number;
+  max?: number;
+  placeholder?: string;
+  defaultValue?: number;
+  disabled?: boolean;
+}
+
+export const NumberInput = forwardRef<HTMLInputElement, NumberInputProps>(
+  (
+    {
+      className = "",
+      value,
+      onChange,
+      onArrowDown,
+      onArrowUp,
+      min,
+      max,
+      placeholder,
+      defaultValue,
+      disabled,
+    },
+    ref
+  ) => {
+    const handleArrowUpClick = () => {
+      if (max !== undefined && value < max) {
+        onArrowUp(value + 1);
+      }
+      if (max === undefined) {
+        onArrowUp(value + 1);
+      }
+    };
+
+    const handleArrowDownClick = () => {
+      if (min !== undefined && value > min) {
+        onArrowDown(value - 1);
+      }
+      if (min === undefined) {
+        onArrowUp(value - 1);
+      }
+    };
+
+    const inputWrapperClasses = clsx("payment-number-input", className);
+
+    return (
+      <div className={inputWrapperClasses}>
+        <button
+          type="button"
+          onClick={handleArrowDownClick}
+          className="payment-number-input__btn-down"
+          disabled={disabled}
+        >
+          &minus;
+        </button>
+        <FormControl
+          type="number"
+          onChange={(e) => onChange(Number(e.target.value))}
+          value={value}
+          min={min}
+          max={max}
+          defaultValue={defaultValue}
+          placeholder={placeholder}
+          height="5rem"
+          disabled={disabled}
+          ref={ref}
+        />
+        <button
+          type="button"
+          onClick={handleArrowUpClick}
+          className="payment-number-input__btn-up"
+          disabled={disabled}
+        >
+          &#43;
+        </button>
+      </div>
+    );
+  }
+);
+
+NumberInput.displayName = "NumberInput";

package/src/iframe/order-process/components/CategoryProduct/components/NumberInput/index.ts

@@ -0,0 +1 @@
+export { NumberInput } from "./NumberInput";

package/src/iframe/order-process/components/CategoryProduct/components/ProductQuantityInput/ProductQuantityInput.tsx

@@ -0,0 +1,108 @@
+import React from "react";
+import clsx from "clsx";
+import { Button } from "react-bootstrap";
+import { useTranslation } from "react-i18next";
+import { FieldValues, RefCallBack, UseFormClearErrors } from "react-hook-form";
+import { Zone } from "@licklist/core/dist/DataMapper/Provider/ZoneDataMapper";
+import {
+  Product,
+  ProductCategory,
+} from "@licklist/plugins/dist/types/context/sale/menuSteps";
+import { NumberInput } from "../NumberInput";
+
+interface FormOrderItem {
+  id: number;
+  name: string;
+  price: number;
+  productsCategoryId: number;
+  zoneId?: Zone["id"];
+  deposit?: number | null;
+  quantity: number;
+  capacity?: number | null;
+}
+
+interface ProductQuantityInputProps {
+  product: Product;
+  category: ProductCategory;
+  clearErrors: UseFormClearErrors<FieldValues>;
+  onChange: (value: FormOrderItem) => void;
+  deposit?: number;
+  refCallback: RefCallBack;
+  invalid: boolean;
+  productInfo: FormOrderItem;
+}
+
+export const ProductQuantityInput = ({
+  product,
+  category,
+  onChange: _onChange,
+  clearErrors,
+  refCallback,
+  productInfo,
+  invalid,
+  deposit,
+}: ProductQuantityInputProps) => {
+  const { t } = useTranslation("Design");
+
+  const onChange = (quantity: number | null) => {
+    _onChange({
+      id: product.id,
+      name: product.name,
+      deposit,
+      price: product.price,
+      productsCategoryId: category.id,
+      zoneId: category.zone?.id,
+      quantity,
+      capacity: product?.capacity,
+    });
+  };
+
+  if (product.isSoldOut) {
+    return (
+      <div className="iframe-event__sold-out-wrapper">
+        {t("Design:soldOut")}
+      </div>
+    );
+  }
+
+  if (product?.maxAmount === 1) {
+    return (
+      <Button
+        ref={refCallback}
+        disabled={product.isSoldOut}
+        className={clsx(
+          `iframe-event__${
+            productInfo?.quantity ? "unselect-product" : "select-product"
+          }`,
+          invalid && "error"
+        )}
+        onClick={() => onChange(productInfo?.quantity ? 0 : 1)}
+      >
+        {t(`Design:${productInfo?.quantity ? "unselect" : "select"}`)}
+      </Button>
+    );
+  }
+
+  return (
+    <NumberInput
+      ref={refCallback}
+      onChange={(val) => {
+        onChange(val || null);
+        clearErrors(`${product.id}` as const);
+      }}
+      onArrowDown={() => {
+        onChange(productInfo?.quantity - 1 || 0);
+        clearErrors(`${product.id}` as const);
+      }}
+      onArrowUp={() => {
+        onChange((productInfo?.quantity ?? 0) + 1);
+        clearErrors(`${product.id}` as const);
+      }}
+      min={0}
+      placeholder="0"
+      disabled={product.isSoldOut}
+      value={productInfo?.quantity}
+      className={clsx(invalid && "error")}
+    />
+  );
+};

package/src/iframe/order-process/components/CategoryProduct/components/ProductQuantityInput/index.ts

@@ -0,0 +1 @@
+export { ProductQuantityInput } from "./ProductQuantityInput";

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

@@ -0,0 +1 @@
+export { CategoryProduct } from "./CategoryProduct";

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

@@ -0,0 +1,66 @@
+import React from "react";
+import { Button } from "react-bootstrap";
+import { useTranslation, Trans } from "react-i18next";
+import ModalHeader from "react-bootstrap/ModalHeader";
+import ModalTitle from "react-bootstrap/ModalTitle";
+import ModalBody from "react-bootstrap/ModalBody";
+import Modal from "react-bootstrap/Modal";
+import Icon from "../../../../static/Icon";
+
+export interface ErrorModalProps {
+  isOpen: boolean;
+  onClose?: () => void;
+  message?: string;
+  messageKey?: string;
+}
+
+export const ErrorModal = ({
+  isOpen = false,
+  onClose,
+  message,
+  messageKey,
+}: ErrorModalProps) => {
+  const { t } = useTranslation("Design");
+
+  const handleClose = () => {
+    if (!onClose) return;
+
+    onClose();
+  };
+
+  return (
+    <Modal
+      show={isOpen}
+      onHide={handleClose}
+      animation={false}
+      centered
+      contentClassName="rounded"
+    >
+      <ModalHeader className="align-items-center border-0">
+        <ModalTitle as="h6">{t("formHasErrors")}</ModalTitle>
+
+        <Button
+          variant="danger"
+          className="btn-sm rounded"
+          onClick={handleClose}
+        >
+          <Icon type="times" height="1rem" />
+        </Button>
+      </ModalHeader>
+      <ModalBody className="confirmation-modal-body">
+        <div className="d-flex m-5 justify-content-center manual-form-error">
+          {message ||
+            (messageKey ? (
+              t(messageKey)
+            ) : (
+              <Trans
+                t={t}
+                i18nKey="pleaseSelectAtLeastFrom"
+                values={{ min: 1, type: "item", from: "those categories" }}
+              />
+            ))}
+        </div>
+      </ModalBody>
+    </Modal>
+  );
+};

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

@@ -0,0 +1 @@
+export { ErrorModal } from "./ErrorModal";

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

@@ -0,0 +1,44 @@
+import React, { ReactNode } from "react";
+import { useTranslation } from "react-i18next";
+import Button from "react-bootstrap/Button";
+import Icon from "../../../../static/Icon";
+
+interface NavigationFooterProps {
+  onPrevStep: () => void;
+  onNextStep?: () => void;
+  isButtonDisabled?: boolean;
+  nextButtonLabel?: string | ReactNode;
+}
+
+export const NavigationFooter = ({
+  onPrevStep,
+  isButtonDisabled = false,
+  onNextStep,
+  nextButtonLabel,
+}: NavigationFooterProps) => {
+  const { t } = useTranslation("Design");
+
+  const buttonProps = onNextStep ? { onClick: onNextStep } : { type: "submit" };
+
+  const onPrevButtonClick = () => {
+    if (onPrevStep) {
+      onPrevStep();
+    }
+  };
+
+  return (
+    <div className="iframe-event__footer">
+      <Button
+        className="event-fixed-footer__prev-btn m-0"
+        onClick={onPrevButtonClick}
+      >
+        <Icon type="arrow-left" width="1rem" />
+      </Button>
+
+      <Button className="m-0" disabled={isButtonDisabled} {...buttonProps}>
+        {nextButtonLabel ?? t("continue")}
+        <Icon type="arrow-right" width="1rem" className="ml-2" />
+      </Button>
+    </div>
+  );
+};

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

@@ -0,0 +1 @@
+export { NavigationFooter } from "./NavigationFooter";

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

@@ -0,0 +1,45 @@
+import React from "react";
+import { Meta } from "@storybook/react";
+import { boolean } from "@storybook/addon-knobs";
+import { NavigationSteps } from "./NavigationSteps";
+
+export default {
+  title: "Iframe/Order-Process/NavigationSteps",
+  component: NavigationSteps,
+} as Meta;
+
+export function Default() {
+  const isLoading = boolean("isLoading", false);
+
+  return (
+    <div className="payment-process">
+      <NavigationSteps
+        steps={[
+          {
+            name: "Attraction",
+            key: "step1",
+            pathname: "step1",
+          },
+          { name: "Service Service Service", key: "step2", pathname: "step2" },
+          { name: "Profile Profile Profile", key: "step3", pathname: "step3" },
+          {
+            name: "Additional Additional Additional",
+            key: "step4",
+            pathname: "step4",
+          },
+          { name: "step5 step5 step5", key: "step5", pathname: "step5" },
+          { name: "step6 step6 step6", key: "step6", pathname: "step6" },
+          { name: "step7 step7 step7", key: "step7", pathname: "step7" },
+          { name: "step8 step8 step8", key: "step8", pathname: "step8" },
+          { name: "step9 step9 step9", key: "step9", pathname: "step9" },
+          {
+            name: "Payments Payments Payments",
+            key: "step10",
+            pathname: "step10",
+          },
+        ]}
+        isLoading={isLoading}
+      />
+    </div>
+  );
+}

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

@@ -0,0 +1,143 @@
+import React, {
+  useRef,
+  useMemo,
+  useEffect,
+  useState,
+  useCallback,
+} from "react";
+import { useLocation, useHistory } from "react-router-dom";
+import clsx from "clsx";
+import { useTranslation } from "react-i18next";
+import { SnippetLoader } from "../../../../static";
+
+export type NavigationStep = {
+  pathname: string;
+  key: string;
+  name: string;
+  queryParams?: Record<string, string>;
+};
+
+type NavigationStepsProps = {
+  steps: NavigationStep[];
+  isLoading?: boolean;
+};
+
+export const NavigationSteps = ({
+  steps,
+  isLoading = false,
+}: NavigationStepsProps) => {
+  const { t } = useTranslation("Design");
+  const location = useLocation();
+  const history = useHistory();
+
+  const containerRef = useRef<HTMLDivElement>(null);
+  const containerWrapperRef = useRef<HTMLDivElement>(null);
+  const firstStepRef = useRef<HTMLDivElement>(null);
+  const lastStepRef = useRef<HTMLDivElement>(null);
+
+  const [containerStyle, setContainerStyle] = useState<{
+    overflowX: "scroll" | "hidden";
+  }>({ overflowX: "scroll" });
+
+  const refsByIndex = useMemo(() => {
+    return {
+      0: firstStepRef,
+      [steps.length - 1]: lastStepRef,
+    };
+  }, [steps]);
+
+  const onStepClick = (
+    pathname: string,
+    queryParams?: Record<string, string>
+  ) => {
+    history.push({
+      pathname,
+      search: new URLSearchParams(queryParams).toString(),
+    });
+  };
+
+  const recalculateContainerStyles = useCallback(() => {
+    if (!containerRef.current || !containerWrapperRef.current) {
+      return;
+    }
+
+    const isContainerWidthMoreThanEqualSteps =
+      containerWrapperRef.current.scrollWidth >=
+      containerRef.current.scrollWidth;
+
+    setContainerStyle({
+      overflowX: isContainerWidthMoreThanEqualSteps ? "hidden" : "scroll",
+    });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [containerRef, containerWrapperRef, isLoading, setContainerStyle]);
+
+  useEffect(() => {
+    const stepElement = document.getElementById(location.pathname);
+
+    if (stepElement) {
+      stepElement.scrollIntoView({ block: "end", inline: "end" });
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [location.pathname, isLoading]);
+
+  useEffect(() => {
+    window.addEventListener("resize", recalculateContainerStyles);
+
+    return () => {
+      window.removeEventListener("resize", recalculateContainerStyles);
+    };
+  }, [recalculateContainerStyles]);
+
+  const activeStepIndex = steps.findIndex(
+    (step) => step.pathname === location.pathname
+  );
+
+  if (isLoading) return <SnippetLoader />;
+
+  return (
+    <div ref={containerWrapperRef} className="steps-wrapper">
+      <div
+        className="payment-navigation-steps"
+        ref={containerRef}
+        style={containerStyle}
+      >
+        {steps.map(({ pathname, queryParams }, index) => {
+          const stepParams =
+            index < activeStepIndex
+              ? {
+                  onKeyPress: () => onStepClick(pathname, queryParams),
+                  onClick: () => onStepClick(pathname, queryParams),
+                  role: "button",
+                  tabIndex: index,
+                }
+              : {};
+
+          return (
+            <div
+              className={clsx(
+                "step",
+                !!Object.keys(stepParams).length && "link"
+              )}
+              key={pathname}
+              ref={refsByIndex[index]}
+              id={pathname}
+              {...stepParams}
+            >
+              <div
+                className={clsx(
+                  "number",
+                  location.pathname === pathname ? "active" : ""
+                )}
+              />
+            </div>
+          );
+        })}
+      </div>
+      <div className="d-flex step-numbers">
+        <p className="m-0 active-step">{activeStepIndex + 1}</p>
+        <p className="m-0">&nbsp;{t("of")}&nbsp;</p>
+        <p className="m-0">{steps.length}</p>
+      </div>
+    </div>
+  );
+};

package/src/iframe/order-process/components/NavigationSteps/hooks/useContainerElementWidth.ts

@@ -0,0 +1,36 @@
+import { useState, useEffect, MutableRefObject } from "react";
+
+export const useContainerElementWidth = <T extends Element = HTMLElement>({
+  ref,
+  initialValue = "100%",
+  isLoading,
+}: {
+  ref: MutableRefObject<T>;
+  initialValue?: string;
+  isLoading: boolean;
+}) => {
+  const [containerWidth, setContainerWidth] = useState(initialValue);
+
+  const resizeObserver = new ResizeObserver(() => {
+    if (!ref.current) return;
+
+    setContainerWidth(`${ref.current.scrollWidth}px`);
+  });
+
+  useEffect(() => {
+    const containerElement = ref.current;
+    if (!containerElement) return undefined;
+
+    setContainerWidth(`${containerElement.scrollWidth}px`);
+    resizeObserver.observe(containerElement);
+
+    return () => {
+      if (!containerElement) return;
+
+      resizeObserver.unobserve(containerElement);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [ref?.current, isLoading]);
+
+  return containerWidth;
+};

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

@@ -0,0 +1 @@
+export { NavigationSteps, NavigationStep } from "./NavigationSteps";