@licklist/design 0.44.486-dev.9 → 0.44.486

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 = ({

package/src/sales/manual-booking/select-menu/SelectMenu.tsx

@@ -1,22 +1,20 @@
 import React from "react";
 import { useTranslation } from "react-i18next";
 import { Form } from "react-bootstrap";
-import { ManualBookingMenu } from "@licklist/plugins/dist/types/context/sale/menuSteps";
+import { TransformedMenu } from "@licklist/plugins/dist/types/context/sale/menuSteps";
 import { BlockLoader } from "../../../static/loader";
 import { MenuButton } from "./components/MenuButton";
 
 export type SelectMenuProps = {
   isLoading?: boolean;
-  menus?: ManualBookingMenu[] | null;
-  onSelectMenu?: (menu: ManualBookingMenu) => void;
-  noMenusMessage?: string;
+  menus?: TransformedMenu[];
+  onSelectMenu?: (menu: TransformedMenu) => void;
 };
 
 export const SelectMenu = ({
   isLoading = false,
   menus,
   onSelectMenu,
-  noMenusMessage,
 }: SelectMenuProps) => {
   const { t } = useTranslation(["App", "Sale"]);
 
@@ -35,15 +33,13 @@ export const SelectMenu = ({
       {(!menus || !menus.length) && !isLoading ? (
         <div className="no-results-content">
           <span className="no-results-found">
-            {noMenusMessage ?? t("App:noResultsFoundForSelectedDate")}
+            {t("App:noResultsFoundForSelectedDate")}
           </span>
         </div>
       ) : (
         <>
           {!isLoading && (
-            <Form.Label className="bold-text">
-              {t("Design:productSets")}
-            </Form.Label>
+            <Form.Label className="bold-text">{t("App:menus")}</Form.Label>
           )}
 
           <div className="menu-list-manual-booking">

package/src/sales/manual-booking/select-menu/components/MenuButton.tsx

@@ -1,9 +1,9 @@
 import React from "react";
-import { ManualBookingMenu } from "@licklist/plugins/dist/types/context/sale/menuSteps";
+import { TransformedMenu } from "@licklist/plugins/dist/types/context/sale/menuSteps";
 
 export type MenuButtonProps = {
-  menu: ManualBookingMenu;
-  onSelectMenu?: (menu: ManualBookingMenu) => void;
+  menu: TransformedMenu;
+  onSelectMenu?: (menu: TransformedMenu) => void;
 };
 
 export const MenuButton = ({ menu, onSelectMenu }: MenuButtonProps) => {

package/src/sales/notes/NotesTableRow.tsx

@@ -7,8 +7,8 @@ import { Note } from "@licklist/core/dist/DataMapper/Order/NoteDataMapper";
 import { capitalize } from "lodash";
 import { DateTime } from "luxon";
 import {
-  DATE_TIME_FORMAT,
   DATE_TIME_FULL_FORMAT,
+  DATE_TIME_FORMAT,
 } from "@licklist/core/dist/Config";
 import { getClientTimeZone } from "@licklist/core/dist/Services";
 import { ConfirmModal } from "../../modals";

package/src/setting/dashboard/index.ts

@@ -1,5 +1,7 @@
 export * from "./DashboardSettingForm";
+export * from "./snippets/form";
 export * from "./snippets/card";
 export * from "./snippet-templates/card";
 export * from "./payments/payments-form/PaymentsForm";
 export * from "./payments/payments-modal/PaymentsModal";
+export * from "./snippets/modal";