@licklist/design 0.44.486-dev.83 → 0.44.486

package/src/sales/manual-booking/controll/ManualBookingStepsControll.tsx

@@ -0,0 +1,121 @@
+import React, { useEffect, useState } from "react";
+import { Accordion } from "react-bootstrap";
+import { useFormContext } from "react-hook-form";
+import { useTranslation } from "react-i18next";
+import { ProductQuantityCheckResponse } from "@licklist/plugins/dist/types/Api/verifyStock";
+import { OrderProduct } from "@licklist/core/dist/DataMapper/Order/OrderProductDataMapper";
+import { ErrorModal } from "../../../iframe/order-process/components/CalendarStepsForm/components/ErrorModal";
+import { MenuStep } from "../../../types";
+import { CollapsibleInputGroup } from "../../../collapsible-input-group";
+import { CategoryProducts } from "../category-products/CategoryProducts";
+
+export interface ManualBookingStepsControllProps {
+  step: MenuStep;
+  stepIndex: number;
+  productsWithErrors?: ProductQuantityCheckResponse["products"];
+  isLoading?: boolean;
+  isEditMode?: boolean;
+  isProductSetAvailable?: boolean;
+  orderProducts?: OrderProduct[];
+}
+
+export const ManualBookingStepsControll = ({
+  step,
+  stepIndex,
+  productsWithErrors,
+  isLoading = false,
+  isEditMode = false,
+  isProductSetAvailable = false,
+  orderProducts,
+}: ManualBookingStepsControllProps) => {
+  const {
+    formState: { errors },
+  } = useFormContext();
+  const { t } = useTranslation(["Design"]);
+  const stepError =
+    errors && errors?.steps ? errors?.steps[stepIndex] : undefined;
+
+  const [showProductQuatityError, setShowProductQuantityError] =
+    useState(false);
+
+  useEffect(() => {
+    if (!productsWithErrors) {
+      return;
+    }
+    setShowProductQuantityError(true);
+  }, [productsWithErrors]);
+
+  return (
+    <Accordion key={step.id} defaultActiveKey="step">
+      <ErrorModal
+        isOpen={showProductQuatityError}
+        onClose={() => setShowProductQuantityError(false)}
+        messageKey="pleaseCheckSelectedProducts"
+      />
+      <CollapsibleInputGroup
+        alwaysOpen
+        description=""
+        eventKey="step"
+        label={
+          <>
+            <div className="step-title">{step?.name}</div>
+            {stepError && (
+              <div className="d-flex mt-3 w-100">
+                <p className="iframe-event__message-error mb-0">
+                  {t("notValidStep")}
+                </p>
+              </div>
+            )}
+          </>
+        }
+      >
+        {step.productCategories.map((productCategory, categoryIndex) => {
+          const categoryError =
+            stepError && stepError?.productCategories
+              ? stepError?.productCategories[categoryIndex]
+              : undefined;
+
+          return (
+            <Accordion
+              key={productCategory.id}
+              defaultActiveKey={
+                step.productCategories.length === 1 ? "categories" : undefined
+              }
+            >
+              <CollapsibleInputGroup
+                description=""
+                eventKey="categories"
+                alwaysOpen={step.productCategories.length === 1}
+                label={
+                  <>
+                    <div className="category-title">
+                      {productCategory?.name}
+                    </div>
+                    {categoryError && (
+                      <div className="d-flex mt-3 w-100">
+                        <p className="iframe-event__message-error mb-0">
+                          {t("notValidCategory")}
+                        </p>
+                      </div>
+                    )}
+                  </>
+                }
+              >
+                <CategoryProducts
+                  products={productCategory?.products}
+                  stepIndex={stepIndex}
+                  categoryIndex={categoryIndex}
+                  productsWithErrors={productsWithErrors}
+                  isLoading={isLoading}
+                  isEditMode={isEditMode}
+                  isProductSetAvailable={isProductSetAvailable}
+                  orderProducts={orderProducts}
+                />
+              </CollapsibleInputGroup>
+            </Accordion>
+          );
+        })}
+      </CollapsibleInputGroup>
+    </Accordion>
+  );
+};

package/src/sales/manual-booking/controll/index.ts

@@ -0,0 +1 @@
+export * from "./ManualBookingStepsControll";

package/src/sales/manual-booking/create-user/CreateUser.stories.tsx

@@ -0,0 +1,27 @@
+import React from "react";
+import { Meta } from "@storybook/react";
+import { useForm, FormProvider } from "react-hook-form";
+import { Form } from "react-bootstrap";
+import { CreateUser } from "./CreateUser";
+
+export default {
+  title: "Sales/ManualBooking/CreateUser",
+} as Meta;
+
+export const Default = (args) => {
+  const form = useForm({ mode: "onChange" });
+
+  return (
+    <FormProvider {...form}>
+      <Form>
+        <div style={{ height: "550px" }}>
+          <CreateUser {...args} />
+        </div>
+      </Form>
+    </FormProvider>
+  );
+};
+
+Default.args = {
+  goToSearchUsers: () => {},
+};

package/src/sales/manual-booking/create-user/CreateUser.tsx

@@ -0,0 +1,224 @@
+import React, { useEffect } from "react";
+import { useFormContext } from "react-hook-form";
+import lettersRule from "@licklist/plugins/dist/validation/Rules/lettersRule";
+import { useTranslation } from "react-i18next";
+import { Button, Form } from "react-bootstrap";
+import {
+  HookFormService,
+  checkIsValidBirthday,
+  emailRule,
+  phoneRule,
+  useDashboardUserApi,
+} from "@licklist/plugins/dist";
+import clsx from "clsx";
+import useNotification from "@licklist/plugins/dist/context/app/hooks/useNotification";
+import {
+  DEFAULT_USER_LAST_NAME,
+  DEFAULT_USER_EMAIL,
+} from "@licklist/core/dist/Config/DefaultUser";
+import { dateToSqlDate } from "../../../static/manual-date-picker/utils";
+import { ManualDatePicker } from "../../../static/manual-date-picker";
+import { useManualDatePicker } from "../../../static/manual-date-picker/hooks/useManualDatePicker";
+import { Icon } from "../../../static";
+
+export const CreateUser = ({
+  goToSearchUsers,
+  providerId,
+}: {
+  goToSearchUsers: () => void;
+  providerId: number;
+}) => {
+  const { t } = useTranslation(["Sale", "Design", "App", "Validation"]);
+  const notification = useNotification();
+  const { create } = useDashboardUserApi(providerId);
+
+  const {
+    formState: { errors, isSubmitted },
+    register,
+    setValue,
+    watch,
+    getValues,
+  } = useFormContext();
+  const birthday = watch("birthdate");
+  const firstname = watch("firstName");
+  const [manualDatePickerProps, { isChoosedDateValid, fieldErrors }] =
+    useManualDatePicker({
+      isRequired: false,
+      isSubmitted,
+      fieldName: "birthdate",
+      value: birthday,
+      fieldErrors: HookFormService.getErrors("birthdate" as const, errors),
+    });
+  const { day, year, month } = manualDatePickerProps;
+
+  useEffect(() => {
+    if (!day || !month || !year || !isChoosedDateValid()) {
+      return;
+    }
+
+    setValue("birthdate" as const, dateToSqlDate(day, month, year), {
+      shouldValidate: true,
+    });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [day, month, year]);
+
+  const onAddUser = async () => {
+    const values = getValues();
+    const user = await create.execute({
+      first_name: values.firstName,
+      last_name: values.lastName,
+      email: values.email,
+      user_detail: {
+        phone: values.phone,
+        birthday: values.birthdate,
+      },
+    });
+
+    if (!user) {
+      return;
+    }
+
+    const userInfo = {
+      userId: String(user.id),
+      firstName: user.firstName,
+      lastName: user.lastName === DEFAULT_USER_LAST_NAME ? null : user.lastName,
+      email: user.email === DEFAULT_USER_EMAIL ? null : user.email,
+      phone:
+        user?.userDetail && user?.userDetail?.phone
+          ? String(user?.userDetail?.phone)
+          : undefined,
+      birthdate:
+        user?.userDetail && user.userDetail?.birthday
+          ? user.userDetail?.birthday
+          : undefined,
+    };
+    Object.entries(userInfo).forEach(([field, value]) => {
+      setValue(field as keyof typeof userInfo, value);
+    });
+    notification.success({
+      title: t("App:success"),
+      message: t("Notification:customerAddedSuccessfully"),
+    });
+  };
+
+  return (
+    <>
+      <Button
+        as="button"
+        type="button"
+        onClick={goToSearchUsers}
+        variant="primary"
+        className="mb-4 mt-4 align-items-center d-flex"
+      >
+        {t("Design:search")}
+        <Icon type="search" height="1.4rem" width="1.4rem" className="ml-3" />
+      </Button>
+      <div className="input-label">
+        {t("Design:firstName")}
+        <span className="text-danger">*</span>
+      </div>
+      <Form.Control
+        type="text"
+        isInvalid={!!errors?.firstName}
+        {...register("firstName", {
+          pattern: lettersRule,
+          maxLength: 255,
+          required: true,
+        })}
+      />
+      <Form.Control.Feedback type="invalid">
+        {HookFormService.hasError(errors?.firstName, "required") &&
+          t("Validation:fieldRequired", {
+            attribute: t("Design:firstName"),
+          })}
+        {HookFormService.hasError(errors?.firstName, "pattern") &&
+          t("Sale:fieldIsNotValid", {
+            attribute: t("Design:firstName"),
+          })}
+      </Form.Control.Feedback>
+      <div className="input-label">{t("Design:lastName")}</div>
+      <Form.Control
+        type="text"
+        isInvalid={!!errors?.lastName}
+        {...register("lastName", {
+          pattern: lettersRule,
+          maxLength: 255,
+        })}
+      />
+      <Form.Control.Feedback type="invalid">
+        {errors?.lastName &&
+          t("Sale:fieldIsNotValid", { attribute: t("Design:lastName") })}
+      </Form.Control.Feedback>
+      <div className="input-label">{t("Design:email")}</div>
+      <Form.Control
+        type="text"
+        isInvalid={HookFormService.isInvalid(`email` as const, errors)}
+        {...register("email", { pattern: emailRule, maxLength: 255 })}
+      />
+      <Form.Control.Feedback type="invalid">
+        {errors?.email &&
+          t("Sale:fieldIsNotValid", { attribute: t("Design:email") })}
+      </Form.Control.Feedback>
+      <div className="input-label">{t("Design:phone")}</div>
+      <Form.Control
+        type="number"
+        {...register("phone", { pattern: phoneRule, maxLength: 255 })}
+        isInvalid={!!errors?.phone}
+      />
+      <Form.Control.Feedback type="invalid">
+        {errors?.phone &&
+          t("Sale:fieldIsNotValid", {
+            attribute: "phone number",
+          })}
+      </Form.Control.Feedback>
+      <div className="input-label">{t("Design:dayOfBirthShort")}</div>
+      <Form.Control
+        type="hidden"
+        {...register("birthdate", {
+          validate: (value) => {
+            if (!value) {
+              return true;
+            }
+
+            if (!checkIsValidBirthday(value)) {
+              return `${t("Sale:fieldIsNotValid", {
+                attribute: t("App:birthday"),
+              })}`;
+            }
+
+            return true;
+          },
+        })}
+        isInvalid={!!errors.birthdate}
+        className={clsx(
+          "datetime-form-picker",
+          birthday && "date-input-with-value"
+        )}
+      />
+      <div className="d-flex">
+        <ManualDatePicker {...manualDatePickerProps} isRequred={false} />
+      </div>
+      <Form.Control.Feedback type="invalid">
+        {errors?.birthdate?.message || fieldErrors()}
+      </Form.Control.Feedback>
+      <Button
+        as="button"
+        type="button"
+        onClick={onAddUser}
+        variant="primary"
+        className="mb-4"
+        disabled={
+          !firstname ||
+          errors?.firstName ||
+          errors?.lastName ||
+          errors?.email ||
+          errors?.phone ||
+          errors?.birthday ||
+          create.isLoading
+        }
+      >
+        {t("Sale:addCustomer")}
+      </Button>
+    </>
+  );
+};

package/src/sales/manual-booking/create-user/index.ts

@@ -0,0 +1 @@
+export * from "./CreateUser";

package/src/sales/manual-booking/customer-info/CustomerInfo.tsx

@@ -0,0 +1,128 @@
+import React, { FC, useEffect, useMemo, useState } from "react";
+import { Accordion } from "react-bootstrap";
+import { useTranslation } from "react-i18next";
+import { useFormContext } from "react-hook-form";
+import HookFormService from "@licklist/plugins/dist/services/Form/HookFormService";
+import { CreateUser } from "../create-user/CreateUser";
+import { CollapsibleInputGroup } from "../../../collapsible-input-group";
+import { SearchUser } from "../search-user";
+
+type CustomerInfoProps = { providerId: number | undefined };
+
+const userFields = [
+  "firstName",
+  "lastName",
+  "userId",
+  "birthday",
+  "phone",
+  "email",
+] as const;
+
+export const CustomerInfo: FC<CustomerInfoProps> = ({ providerId }) => {
+  const { t } = useTranslation(["Sale", "Design", "Validation"]);
+  const {
+    formState: { errors },
+    watch,
+    clearErrors,
+    setValue,
+    register,
+  } = useFormContext();
+  const firstName = watch("firstName");
+  const firstNameRequired = useMemo(
+    () => HookFormService.hasError(errors?.firstName, "required"),
+    [errors?.firstName]
+  );
+
+  const errorMessage = firstNameRequired
+    ? t("Validation:fieldRequired", {
+        attribute: t("Sale:Customer first name"),
+      })
+    : t("Sale:customerInfoError");
+
+  useEffect(() => {
+    if (!firstNameRequired || !firstName || !firstName.length) {
+      return;
+    }
+
+    clearErrors("firstName");
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [errors?.firstName, firstName]);
+
+  const customerInfoError = useMemo(
+    () =>
+      !!errors?.firstName ||
+      !!errors?.lastName ||
+      !!errors?.email ||
+      !!errors?.phone ||
+      !!errors?.birthdate,
+    [
+      errors.firstName,
+      errors?.lastName,
+      errors?.email,
+      errors?.phone,
+      errors?.birthdate,
+    ]
+  );
+
+  const [isCreatingUser, setCreatingUser] = useState(false);
+
+  const resetFields = (fieldForSave?: string) => {
+    userFields.forEach((field) => {
+      if (fieldForSave && field === fieldForSave) {
+        return;
+      }
+      setValue(field, undefined);
+    });
+  };
+
+  const handleNoFoundUsers = (isSearchName?: boolean) => {
+    setCreatingUser(true);
+    resetFields(isSearchName ? "firstName" : "email");
+  };
+
+  const goToSearchUsers = () => {
+    setCreatingUser(false);
+    resetFields();
+  };
+
+  register("firstName", { required: true });
+
+  return (
+    <Accordion className="medium-accordition accordition-customer-info">
+      <CollapsibleInputGroup
+        description=""
+        eventKey="medium-accordition"
+        label={
+          <>
+            <div className="medium-accordition-header">
+              <div className="product-title">{t("Sale:customerInfo")}</div>
+            </div>
+            {customerInfoError && (
+              <div className="d-flex mt-3 w-100">
+                <p className="iframe-event__message-error mb-0">
+                  {errorMessage}
+                </p>
+              </div>
+            )}
+          </>
+        }
+      >
+        <div className="customer-info">
+          {isCreatingUser ? (
+            <>
+              <CreateUser
+                goToSearchUsers={goToSearchUsers}
+                providerId={providerId}
+              />
+            </>
+          ) : (
+            <SearchUser
+              providerId={providerId}
+              handleNoFoundUsers={handleNoFoundUsers}
+            />
+          )}
+        </div>
+      </CollapsibleInputGroup>
+    </Accordion>
+  );
+};

package/src/sales/manual-booking/customer-info/index.ts

@@ -0,0 +1 @@
+export * from "./CustomerInfo";

package/src/sales/manual-booking/final-step/FinalStep.tsx

@@ -0,0 +1,38 @@
+import React, { FC } from "react";
+import { useTranslation } from "react-i18next";
+import { Controller, useFormContext } from "react-hook-form";
+import { CustomerInfo } from "../customer-info/CustomerInfo";
+
+type FinalStepProps = { providerId: number | undefined };
+
+export const FinalStep: FC<FinalStepProps> = ({ providerId }) => {
+  const { t } = useTranslation("Sale");
+  const { control } = useFormContext();
+  return (
+    <>
+      <div className="manual-booking-header mt-6 mt-5 border-bottom">
+        <div className="manual-booking-title">{t("Sale:finalSteps")}</div>
+      </div>
+      <CustomerInfo providerId={providerId} />
+      <Controller
+        control={control}
+        name={`specialNotes` as const}
+        render={({ field: { onChange, value, ref } }) => (
+          <div className="special-notes-container">
+            <div className="margin-top-2-rem input-label ">
+              {t("specialNotes")}
+            </div>
+
+            <textarea
+              rows={3}
+              onChange={onChange}
+              ref={ref}
+              value={value}
+              className="special-notes"
+            />
+          </div>
+        )}
+      />
+    </>
+  );
+};

package/src/sales/manual-booking/final-step/index.ts

@@ -0,0 +1 @@
+export * from "./FinalStep";

package/src/sales/manual-booking/index.ts

@@ -1,6 +1,10 @@
 export * from "./select-event";
 export * from "./number-input-horizontal";
+export * from "./category-products";
+export * from "./controll/ManualBookingStepsControll";
+export * from "./category-product";
+export * from "./final-step";
+export * from "./customer-info";
 export * from "./summary";
-export * from "./search-user";
 export * from "./select-date-type-control";
 export * from "./select-menu";

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

@@ -17,7 +17,6 @@ interface NumberInputHorizontalProps {
   max?: number;
   size?: Sizes;
   defaultValue?: number;
-  hasCurrency?: boolean;
   isLoading?: boolean;
 }
 
@@ -31,7 +30,6 @@ export const NumberInputHorizontal = forwardRef<
       className = "",
       value,
       size = "small",
-      hasCurrency,
       onChange,
       onPlusClick,
       onMinusClick,
@@ -92,7 +90,7 @@ export const NumberInputHorizontal = forwardRef<
             disabled && hasBigSize && "w-100",
           ].join(" ")}
         >
-          {hasCurrency && <div className="currency">£</div>}
+          {size === "small" && <div className="currency">£</div>}
 
           <FormControl
             ref={ref}

package/src/sales/manual-booking/select-date-type-control/SelectDateTypeControl.stories.tsx

@@ -21,7 +21,7 @@ export const Default: Story<any> = (args) => {
         orderableType={orderableType}
         setOrderableType={setOrderableType}
         orderDate={orderDate}
-        onChangeDate={setOrderDate}
+        setOrderDate={setOrderDate}
         showTypeSelect={showTypeSelect}
       />
     </div>

package/src/sales/manual-booking/select-date-type-control/SelectDateTypeControl.tsx

@@ -9,14 +9,14 @@ import HTMLInputDateElement from "../../../types/static/HTMLInputDateElement";
 
 type SelectDateTypeControlProps = {
   orderDate: string;
-  onChangeDate: (date: string) => void;
+  setOrderDate: (date: string) => void;
   showTypeSelect?: boolean;
   orderableType?: OrderableType;
   setOrderableType: (value?: OrderableType) => void;
 };
 
 export const SelectDateTypeControl = ({
-  onChangeDate,
+  setOrderDate,
   orderDate,
   showTypeSelect,
   orderableType,
@@ -29,11 +29,11 @@ export const SelectDateTypeControl = ({
 
   const changeFromDate = useCallback(
     ({ target: { value } }: ChangeEvent<HTMLInputElement>) => {
-      if (!onChangeDate) return;
+      if (!setOrderDate) return;
 
-      onChangeDate(value);
+      setOrderDate(value);
     },
-    [onChangeDate]
+    [setOrderDate]
   );
 
   const onChangeOrderableType = useCallback(

package/src/sales/manual-booking/select-event/SelectEvent.tsx

@@ -4,14 +4,14 @@ import { Card, Form } from "react-bootstrap";
 import MediaService from "@licklist/plugins/dist/services/Media/MediaService";
 import { rrulestr } from "rrule";
 import { DateTime } from "luxon";
-import { ManualBookingEvent } from "@licklist/plugins/dist/types/context/sale/menuSteps";
+import { TransformedEvent } from "@licklist/plugins/dist/types/context/sale/menuSteps";
 import { formatToDays, formatToHours } from "../formatDays";
 import { BlockLoader } from "../../../static/loader";
 
 interface SelectEventProps {
-  selectEvent: (event: ManualBookingEvent) => void;
+  selectEvent: (event: TransformedEvent) => void;
   isLoading: boolean;
-  events?: ManualBookingEvent[] | null;
+  events?: TransformedEvent[] | null;
 }
 
 export const SelectEvent = ({