@licklist/design 0.44.526 → 0.44.528

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

@@ -1,224 +0,0 @@
-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

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

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

@@ -1,128 +0,0 @@
-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

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

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

@@ -1,38 +0,0 @@
-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

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

package/src/setting/dashboard/snippets/control/SnippetControl.tsx

@@ -1,237 +0,0 @@
-import React, { useEffect, useState } from "react";
-import { Col, Row, Form } from "react-bootstrap";
-import { useFormContext, Controller } from "react-hook-form";
-import { useTranslation } from "react-i18next";
-import { useId } from "@react-aria/utils";
-import HookFormService from "@licklist/plugins/dist/services/Form/HookFormService";
-import { SNIPPET_TYPES } from "@licklist/core/dist/DataMapper/Provider/SnippetDataMapper";
-import { Switch } from "../../../../static";
-import { ShortSnippetTemplate, SnippetFormValues } from "../form/SnippetForm";
-
-export interface SnippetControlProps {
-  isLoading: boolean;
-  templates: Array<ShortSnippetTemplate>;
-  providerHasMap?: boolean | null;
-}
-
-export function SnippetControl({
-  isLoading,
-  templates,
-  providerHasMap,
-}: SnippetControlProps) {
-  const { t } = useTranslation(["Design", "Validation", "User"]);
-  const [isValid, setIsValid] = useState(true);
-  const nameId = useId();
-  const displayDescriptionId = useId();
-  const displayCostId = useId();
-  const displayTypeId = useId();
-
-  const {
-    register,
-    watch,
-    control,
-    formState: { errors },
-    setValue,
-  } = useFormContext<SnippetFormValues>();
-  const type = watch("type");
-  const isEvent = type === "event";
-
-  const { displayCost, displayDescription, displayType } =
-    watch("snippetSetting");
-  const templateId = watch("templateId") || "";
-
-  useEffect(() => {
-    if (isEvent) {
-      setIsValid(displayDescription || displayCost || displayType);
-    }
-  }, [isEvent, displayDescription, displayCost, displayType]);
-
-  useEffect(() => {
-    if (!templateId) return;
-
-    const selectedTemplate = templates.find(
-      (template) =>
-        template.type === type && String(templateId) === String(template.id)
-    );
-
-    if (selectedTemplate) return;
-
-    setValue("templateId" as const, "");
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [templateId, type, templates]);
-
-  return (
-    <>
-      <Row>
-        <Form.Group
-          as={Col}
-          controlId={nameId}
-          xs
-          sm={12}
-          md={8}
-          lg={10}
-          xl={12}
-        >
-          <Form.Label>{t("name")}</Form.Label>
-          <Form.Control
-            {...register("name", {
-              maxLength: 255,
-              required: t("Validation:fieldRequired", {
-                attribute: t("name"),
-              }) as string,
-            })}
-            placeholder={t("Design:snippetName")}
-            isInvalid={Boolean(errors.name)}
-          />
-          <Form.Control.Feedback type="invalid">
-            {errors.name?.message}
-          </Form.Control.Feedback>
-        </Form.Group>
-      </Row>
-      {providerHasMap && (
-        <Row>
-          <Controller
-            control={control}
-            name="type"
-            render={({ field: { name, value, onChange } }) => (
-              <Form.Group as={Col}>
-                <Form.Label>{t("type")}</Form.Label>
-                <Switch
-                  name={name}
-                  options={SNIPPET_TYPES.map((type) => ({
-                    id: type,
-                    value: t(type),
-                  }))}
-                  value={value}
-                  onChange={onChange}
-                  disabled={isLoading}
-                />
-              </Form.Group>
-            )}
-          />
-        </Row>
-      )}
-
-      <Row>
-        {isEvent && (
-          <Form.Group
-            as={Col}
-            className="mt-4"
-            xs
-            sm={12}
-            md={8}
-            lg={10}
-            xl={12}
-          >
-            <Form.Label className="mb-3">{t("Options")}</Form.Label>
-            <Form.Check
-              {...register("snippetSetting.displayDescription")}
-              id={displayDescriptionId}
-              isInvalid={!isValid}
-              name="snippetSetting.displayDescription"
-              label={t("Design:shouldShowDesc")}
-              custom
-              className="mb-3"
-              disabled={isLoading}
-            />
-            <Form.Check
-              {...register("snippetSetting.displayCost")}
-              id={displayCostId}
-              isInvalid={!isValid}
-              name="snippetSetting.displayCost"
-              label={t("Design:shouldShowCost")}
-              custom
-              className="mb-3"
-              disabled={isLoading}
-            />
-            <Form.Check
-              {...register("snippetSetting.displayType")}
-              id={displayTypeId}
-              isInvalid={!isValid}
-              name="snippetSetting.displayType"
-              label={t("Design:shouldShowType")}
-              custom
-              disabled={isLoading}
-            />
-            {!isValid && (
-              <div className="d-block invalid-feedback">
-                {t("Validation:fieldAtLeastSelected", {
-                  number: t("Design:one"),
-                  filedType: t("Design:checkbox"),
-                })}
-              </div>
-            )}
-          </Form.Group>
-        )}
-      </Row>
-      {isEvent && (
-        <Row>
-          <Form.Group as={Col} xs sm={12} md={8} lg={10} xl={12}>
-            <Form.Label>{t("eventsView")}</Form.Label>
-            <Form.Control
-              as="select"
-              {...register("viewType", {
-                required: t("Validation:fieldRequired", {
-                  attribute: t("viewType"),
-                }) as string,
-              })}
-              placeholder={t("Design:eventsView")}
-              disabled={isLoading}
-            >
-              <option value="grid">{t("Design:grid")}</option>
-              <option value="list">{t("Design:list")}</option>
-            </Form.Control>
-          </Form.Group>
-        </Row>
-      )}
-      <Row>
-        <Form.Group as={Col} xs sm={12} md={8} lg={10} xl={12}>
-          <Controller
-            control={control}
-            name="templateId"
-            rules={{ required: true }}
-            render={({
-              field: { value, onChange },
-              fieldState: { invalid, error },
-            }) => {
-              const fieldSetValue = value ? String(value) : "";
-              return (
-                <>
-                  <Form.Label className="mt-5">
-                    {t("snippetTemplate")}
-                  </Form.Label>
-                  <Form.Control
-                    as="select"
-                    disabled={isLoading}
-                    onChange={onChange}
-                    isInvalid={invalid}
-                    value={fieldSetValue}
-                  >
-                    <option value="">{t("Design:pleaseChooseOne")}</option>
-                    {templates?.map((template) => {
-                      if (template.type !== type) {
-                        return null;
-                      }
-
-                      return (
-                        <option value={template.id} key={template.id}>
-                          {template.name}
-                        </option>
-                      );
-                    })}
-                  </Form.Control>
-                  <Form.Control.Feedback type="invalid">
-                    {HookFormService.hasError(error, "required") &&
-                      t("Validation:fieldRequired", {
-                        attribute: t("Design:snippetTemplate"),
-                      })}
-                  </Form.Control.Feedback>
-                </>
-              );
-            }}
-          />
-        </Form.Group>
-      </Row>
-    </>
-  );
-}

package/src/setting/dashboard/snippets/control/index.ts

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