@licklist/design 0.45.0-dev.0 → 0.46.0

package/src/product-set/step/StepControl.tsx

@@ -0,0 +1,137 @@
+import React, { useContext } from "react";
+import { Form, Col, Row } from "react-bootstrap";
+import { Controller, useFormContext } from "react-hook-form";
+import { useTranslation } from "react-i18next";
+import HookFormService from "@licklist/plugins/dist/services/Form/HookFormService";
+import { FormValues } from "@licklist/plugins/dist/types/services/Form/hook-form-service";
+import { useId } from "@react-aria/utils";
+import { PointProduct } from "@licklist/core/dist/DataMapper/Product/PointProductDataMapper";
+import { ProductSetFormValues } from "../form/ProductSetForm";
+import { IsDeletableEvent, ProductCategory } from "../types";
+import { ProductSetLoadingContext } from "../form/context";
+import { BooleanSwitch } from "../../static/switch/BooleanSwitch";
+
+export interface StepControlValues extends FormValues {
+  name: string;
+  weight?: number;
+  termsAndConditions?: string;
+  productCategories?: ProductCategory[];
+  hasMap: boolean;
+  venueMapSetId: null | number;
+  pointProducts?: Partial<PointProduct>[];
+}
+
+export interface StepControlProps extends IsDeletableEvent {
+  isLoading: boolean;
+  stepIndex: number;
+  stepName: string;
+  onStepNameChange: (args: any) => void;
+}
+
+export function StepControl({
+  isLoading,
+  stepIndex,
+  stepName,
+  onStepNameChange,
+}: StepControlProps) {
+  const { providerHasMap } = useContext(ProductSetLoadingContext);
+  const {
+    control,
+    formState: { errors },
+    clearErrors,
+    watch,
+  } = useFormContext<ProductSetFormValues>();
+  const { t } = useTranslation("Design");
+
+  const fieldName = `steps.${stepIndex}.name` as const;
+  const productCategoriesFieldName =
+    `steps.${stepIndex}.productCategories` as const;
+
+  const productCategoriesErrors = errors?.steps?.[stepIndex]?.productCategories;
+  const hasMap = watch(`steps.${stepIndex}.hasMap` as const) || false;
+
+  const nameId = useId();
+  const hasMapId = useId();
+
+  return (
+    <>
+      <Row>
+        <Col xs sm={6} md lg>
+          <Form.Group controlId={nameId}>
+            <Form.Label>{t("name")}</Form.Label>
+            <Controller
+              render={({ field: { name, ref } }) => (
+                <Form.Control
+                  ref={ref}
+                  value={stepName}
+                  onChange={onStepNameChange}
+                  name={name}
+                  placeholder={t("name")}
+                  isInvalid={HookFormService.isInvalid<ProductSetFormValues>(
+                    fieldName,
+                    errors
+                  )}
+                  disabled={isLoading}
+                />
+              )}
+              control={control}
+              name={fieldName}
+              rules={{
+                required: t("Validation:fieldRequired", {
+                  attribute: t("name"),
+                }) as string,
+                validate: () => {
+                  if (
+                    productCategoriesErrors?.type ===
+                    HookFormService.manualErrorType
+                  ) {
+                    clearErrors(productCategoriesFieldName);
+                  }
+
+                  return true;
+                },
+              }}
+            />
+            <Form.Control.Feedback type="invalid">
+              {HookFormService.getErrors<ProductSetFormValues>(
+                fieldName,
+                errors
+              )}
+            </Form.Control.Feedback>
+            {providerHasMap && (
+              <div className="mt-5 pt-5">
+                <hr />
+                <Form.Group
+                  controlId={hasMapId}
+                  className="d-flex mb-3 align-items-center"
+                >
+                  <Form.Label className="mr-5 m-0">{t("hasAMap")}</Form.Label>
+
+                  <div>
+                    <Controller
+                      render={({ field: { name, value, onChange } }) => (
+                        <BooleanSwitch
+                          name={name}
+                          value={Boolean(value)}
+                          onChange={onChange}
+                          disabled={isLoading}
+                        />
+                      )}
+                      control={control}
+                      name={`steps.${stepIndex}.hasMap` as const}
+                    />
+                  </div>
+                </Form.Group>
+                {hasMap && (
+                  <p className="mt-5 info">
+                    {t("toUseAMapPleaseAddProductsFirst")}
+                  </p>
+                )}
+              </div>
+            )}
+          </Form.Group>
+        </Col>
+      </Row>
+    </>
+  );
+}

package/src/product-set/step/index.ts

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

package/src/product-set/tabs/ProductSetTab.tsx

@@ -0,0 +1,23 @@
+/* eslint-disable react/function-component-definition */
+import { useId } from "@react-aria/utils";
+import React, { FunctionComponent } from "react";
+import { Tab } from "react-bootstrap";
+
+export type ProductSetTabProps = {
+  eventKey?: string;
+  title?: string;
+};
+
+export const ProductSetTab: FunctionComponent<ProductSetTabProps> = ({
+  eventKey,
+  title,
+  children,
+}) => {
+  const tabId = useId();
+
+  return (
+    <Tab key={tabId} id={tabId} eventKey={eventKey} title={title}>
+      {children}
+    </Tab>
+  );
+};

package/src/product-set/tabs/ProductSetTabs.stories.tsx

@@ -0,0 +1,37 @@
+import React from "react";
+import { Meta } from "@storybook/react";
+import { ProductSetTabs } from "./ProductSetTabs";
+
+export default {
+  title: "Product Set/Tabs",
+  component: ProductSetTabs,
+} as Meta;
+
+const mockChildren = (
+  <>
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+    consequat.
+  </>
+);
+
+export function Default(args) {
+  return (
+    <ProductSetTabs {...args}>
+      <ProductSetTabs.Tab eventKey="first" title="Tab #1">
+        {mockChildren}
+      </ProductSetTabs.Tab>
+      <ProductSetTabs.Tab eventKey="second" title="Tab #2">
+        {mockChildren}
+      </ProductSetTabs.Tab>
+      <ProductSetTabs.Tab eventKey="third" title="Tab #3">
+        {mockChildren}
+      </ProductSetTabs.Tab>
+    </ProductSetTabs>
+  );
+}
+
+Default.args = {
+  defaultActiveKey: "first",
+};

package/src/product-set/tabs/ProductSetTabs.tsx

@@ -0,0 +1,27 @@
+import { useId } from "@react-aria/utils";
+import React, { PropsWithChildren } from "react";
+import { Tabs } from "react-bootstrap";
+import { ProductSetTab } from "./ProductSetTab";
+
+export type ProductSetTabsProps = {
+  defaultActiveKey?: string;
+};
+
+export function ProductSetTabs({
+  defaultActiveKey,
+  children,
+}: PropsWithChildren<ProductSetTabsProps>) {
+  const tabsId = useId();
+
+  return (
+    <Tabs
+      defaultActiveKey={defaultActiveKey}
+      id={tabsId}
+      className="product-set-tabs"
+    >
+      {children}
+    </Tabs>
+  );
+}
+
+ProductSetTabs.Tab = ProductSetTab;

package/src/product-set/tabs/index.ts

@@ -0,0 +1,2 @@
+export * from "./ProductSetTabs";
+export * from "./ProductSetTab";

package/src/product-set/types/index.ts

@@ -0,0 +1,20 @@
+import { WithId } from "../form";
+import { ProductControlValues } from "../product";
+import { ProductCategoryControlValues } from "../product-category";
+import { StepControlValues } from "../step";
+
+export type SubProduct = WithId & ProductControlValues;
+
+export type Product = WithId &
+  ProductControlValues & { subProducts?: SubProduct[]; _id?: number };
+
+export type ProductCategory = WithId &
+  ProductCategoryControlValues & { products?: Product[]; _id?: number };
+
+export type Step = WithId &
+  StepControlValues & { productCategories?: ProductCategory[]; _id?: number };
+
+// Elements
+export type IsDeletableEvent = {
+  onDelete?: () => void;
+};

package/src/product-set/utils/index.ts

@@ -0,0 +1,82 @@
+import { EmailTemplate } from "@licklist/core/dist/DataMapper/Notification/EmailTemplateDataMapper";
+import { SmsTemplate } from "@licklist/core/dist/DataMapper/Notification/SmsTemplateDataMapper";
+import { TFunction } from "i18next";
+import { UseFormSetError } from "react-hook-form";
+import { TemplateItem } from "../control/ProductSetControl";
+import { ProductSetFormValues } from "../form/ProductSetForm";
+
+interface CheckAvailableTimesErrors {
+  values: ProductSetFormValues;
+  setError: UseFormSetError<ProductSetFormValues>;
+  t: TFunction;
+}
+
+export const moveArrayElements = <T>(
+  array: T[],
+  prevIndex: number,
+  nextIndex: number
+) => {
+  const nextArray = [...array];
+  // We move there elements in array
+  // by set and change indexes
+  nextArray.splice(nextIndex, 0, nextArray.splice(prevIndex, 1)[0]);
+
+  return nextArray;
+};
+
+export const sortArrayByIndex = <T>(array: T[]) => {
+  return array.map((element: T, index) => ({ ...element, sort: index }));
+};
+
+export const getFilteredTemplates = (
+  templates?: EmailTemplate[] | SmsTemplate[],
+  formTemplates?: TemplateItem[]
+): TemplateItem[] | undefined => {
+  if (!templates) {
+    return undefined;
+  }
+
+  return templates
+    ?.filter(
+      (template) =>
+        template.notification.isActive &&
+        !formTemplates?.find(
+          (formTemplate) =>
+            formTemplate.value.notification.type === template.notification.type
+        )
+    )
+    ?.map((template) => ({
+      id: template?.id,
+      value: template,
+      label: template?.notification?.name,
+    }));
+};
+
+export const checkAvailableTimesErrors = ({
+  values,
+  setError,
+  t,
+}: CheckAvailableTimesErrors) => {
+  let hasError = false;
+
+  const hasCategoryWithZone = values?.steps?.some(
+    (step) => !!step?.productCategories.some((category) => !!category?.zoneId)
+  );
+  if (!hasCategoryWithZone) {
+    return hasError;
+  }
+
+  values?.menuRecurrences?.forEach((recurrence, index: number) => {
+    if (!recurrence?.availableTimes?.length) {
+      hasError = true;
+      setError(`menuRecurrences.${index}.availableTimes` as const, {
+        type: "validate",
+        message: t("Validation:fieldMinNumber", {
+          attribute: t("startTimes"),
+          min: 1,
+        }),
+      });
+    }
+  });
+  return hasError;
+};

package/src/provider/categories-input/CategoriesInput.stories.tsx

@@ -0,0 +1,49 @@
+import { Meta, Story } from "@storybook/react";
+import React from "react";
+import { FormProvider, useForm } from "react-hook-form";
+import { CategoriesInputValues } from ".";
+import { CategoriesInput, CategoriesInputProps } from "./CategoriesInput";
+import { CategoriesInputDescription } from "./CategoriesInputDescription";
+
+const categories = Array.from({ length: 6 }, (_, i) => ({
+  id: `${i}`,
+  name: `Category group ${i}`,
+  categories: Array.from({ length: 12 }, (_, j) => {
+    const id = `${i * 12 + j}`;
+    return { id, name: `Category name ${id}` };
+  }),
+}));
+
+const defaultValues: CategoriesInputValues = {
+  categories: ["1", "2", "3", "5", "8", "13", "21", "34", "55"],
+};
+
+export default {
+  title: "Provider/CategoriesInput",
+  component: CategoriesInput,
+  subcomponents: { CategoriesInputDescription },
+} as Meta;
+
+export const Default: Story<CategoriesInputProps> = (args) => {
+  const form = useForm<CategoriesInputValues>({ defaultValues });
+  return (
+    <FormProvider {...form}>
+      <CategoriesInput {...args} />
+    </FormProvider>
+  );
+};
+Default.args = {
+  categories,
+};
+
+export const Description: Story<CategoriesInputProps> = (args) => {
+  const form = useForm<CategoriesInputValues>({ defaultValues });
+  return (
+    <FormProvider {...form}>
+      <CategoriesInputDescription {...args} />
+    </FormProvider>
+  );
+};
+Description.args = {
+  categories,
+};

package/src/provider/categories-input/CategoriesInput.tsx

@@ -0,0 +1,52 @@
+import { useId } from "@react-aria/utils";
+import React from "react";
+import { Col, Form, Row } from "react-bootstrap";
+import { useFormContext } from "react-hook-form";
+import { CategoriesInputValues } from ".";
+import { Category, CategoryGroup } from "../../types/categories";
+
+export type CategoriesInputProps = {
+  categories: CategoryGroup[];
+};
+
+// This component is extracted just for `useId`
+function CategoryView(category: Category) {
+  const { register } = useFormContext<CategoriesInputValues>();
+  const id = useId();
+  return (
+    <Form.Check
+      {...register("categories")}
+      id={id}
+      name="categories"
+      value={category.id}
+      label={category.name}
+      custom
+    />
+  );
+}
+
+export function CategoriesInput({ categories: groups }: CategoriesInputProps) {
+  return (
+    <div className="my-n4">
+      {groups.map((group) => (
+        <Row key={group.id} className="my-4">
+          <Col xs="12" className="h6">
+            {group.name}
+          </Col>
+          {group.categories.map((category) => (
+            <Col
+              key={category.id}
+              xs="12"
+              sm="6"
+              md="4"
+              lg="3"
+              className="py-1"
+            >
+              <CategoryView {...category} />
+            </Col>
+          ))}
+        </Row>
+      ))}
+    </div>
+  );
+}

package/src/provider/categories-input/CategoriesInputDescription.tsx

@@ -0,0 +1,46 @@
+import React from "react";
+import { Badge, Col, Row } from "react-bootstrap";
+import { useWatch } from "react-hook-form";
+import { CategoryGroup } from "../../types/categories";
+import { CategoriesInputValues } from ".";
+
+export type CategoriesInputDescriptionProps = {
+  categories: CategoryGroup[];
+};
+
+export function CategoriesInputDescription({
+  categories: groups,
+}: CategoriesInputDescriptionProps) {
+  const values = useWatch<CategoriesInputValues>({
+    name: "categories",
+    defaultValue: [],
+  });
+  return (
+    <div>
+      {values &&
+        groups?.map((group) => {
+          const selectedCategories = group?.categories?.filter((category) =>
+            values?.includes(`${category.id}`)
+          );
+          if (selectedCategories?.length) return <></>;
+          return (
+            <Row key={group?.id} noGutters className="mx-n1 align-items-center">
+              <Col xs="auto" className="m-1">
+                {group?.name}:
+              </Col>
+              {selectedCategories?.map((category) => (
+                <Badge
+                  pill
+                  variant="secondary"
+                  key={category?.id}
+                  className="m-1"
+                >
+                  {category?.name}
+                </Badge>
+              ))}
+            </Row>
+          );
+        })}
+    </div>
+  );
+}

package/src/provider/categories-input/index.ts

@@ -0,0 +1,6 @@
+export * from "./CategoriesInput";
+export * from "./CategoriesInputDescription";
+
+export type CategoriesInputValues = {
+  categories: string[];
+};

package/src/provider/company/index.ts

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

package/src/provider/company/user-form/UserForm.stories.tsx

@@ -0,0 +1,19 @@
+import React from "react";
+import { Meta, Story } from "@storybook/react";
+import { UserForm, UserFormProps } from "./UserForm";
+
+export default {
+  title: "Provider/Company/User form",
+  component: UserForm,
+} as Meta;
+
+export const Default: Story<UserFormProps> = (args) => {
+  return <UserForm {...args} />;
+};
+
+Default.args = {
+  onSubmit: (values) => console.log(values),
+  isLoading: false,
+  defaultValues: {},
+  hasPermission: true,
+};

package/src/provider/company/user-form/UserForm.tsx

@@ -0,0 +1,155 @@
+import React from "react";
+import { Button, Col, Form, Row } from "react-bootstrap";
+import { useForm, Controller } from "react-hook-form";
+import { useTranslation } from "react-i18next";
+import clsx from "clsx";
+import { User } from "@licklist/core/dist/DataMapper/User/UserDataMapper";
+import {
+  VIEWER_ROLE,
+  MANAGER_ROLE,
+  SUBMANAGER_ROLE,
+} from "@licklist/core/dist/DataMapper/User/UserRoleDataMapper";
+import emailRule from "@licklist/plugins/dist/validation/Rules/emailRule";
+import HookFormService from "@licklist/plugins/dist/services/Form/HookFormService";
+import Logo from "../../../logo/Logo";
+import { ReactComponent as ManagerRoleImg } from "../../../assets/dashboard/managerRole.svg";
+import { ReactComponent as SubManagerRoleImg } from "../../../assets/dashboard/subManagerRole.svg";
+import { ReactComponent as ViewerRoleImg } from "../../../assets/dashboard/viewerRole.svg";
+
+export type UserFormValues = {
+  email?: User["email"];
+  role?: typeof VIEWER_ROLE | typeof MANAGER_ROLE | typeof SUBMANAGER_ROLE;
+};
+
+export type UserFormProps = {
+  defaultValues?: UserFormValues;
+  onSubmit: (values: {
+    email: User["email"];
+    role: typeof VIEWER_ROLE | typeof MANAGER_ROLE | typeof SUBMANAGER_ROLE;
+  }) => void;
+  isLoading?: boolean;
+  hasPermission: boolean;
+};
+
+export const UserForm = ({
+  defaultValues = {},
+  onSubmit,
+  isLoading = false,
+  hasPermission,
+}: UserFormProps) => {
+  const { t } = useTranslation(["Design", "User", "Validation"]);
+  const {
+    control,
+    register,
+    handleSubmit,
+    formState: { errors },
+  } = useForm<UserFormValues>({
+    defaultValues,
+  });
+
+  const rolesOptions = [
+    {
+      value: MANAGER_ROLE,
+      label: t("Design:manager"),
+      description: t("Design:managerAccessMessage"),
+      component: <ManagerRoleImg />,
+    },
+    {
+      value: SUBMANAGER_ROLE,
+      label: t("Design:subManager"),
+      description: t("Design:subManagerAccessMessage"),
+      component: <SubManagerRoleImg />,
+    },
+    {
+      value: VIEWER_ROLE,
+      label: t("Design:viewer"),
+      description: t("Design:viewerAccessMessage"),
+      component: <ViewerRoleImg />,
+    },
+  ];
+
+  return (
+    <Form className="company-user-form" onSubmit={handleSubmit(onSubmit)}>
+      <Row>
+        <Col xl={6} lg={6} sm={12}>
+          <Form.Group>
+            <Form.Label>{t("User:email")}*</Form.Label>
+            <Form.Control
+              isInvalid={!!errors.email}
+              {...register("email", {
+                pattern: emailRule,
+                required: true,
+              })}
+              disabled={isLoading || Boolean(defaultValues.email)}
+            />
+
+            <Form.Control.Feedback type="invalid">
+              {HookFormService.hasError(errors.email, "required") &&
+                t("Validation:fieldRequired", {
+                  attribute: t("User:email"),
+                })}
+              {HookFormService.hasError(errors.email, "pattern") &&
+                t("Validation:fieldValidEmail", {
+                  attribute: t("User:email"),
+                })}
+            </Form.Control.Feedback>
+          </Form.Group>
+        </Col>
+      </Row>
+
+      <Row>
+        <Col>
+          <Controller
+            render={({
+              field: { onChange, value: fieldValue },
+              fieldState: { error },
+            }) => {
+              return (
+                <Form.Group
+                  className={clsx("roles-form-group", !!error && "is-invalid")}
+                >
+                  <Form.Label>{t("User:role")}*</Form.Label>
+                  <div className="roles-wrapper">
+                    {rolesOptions.map(
+                      ({ value, label, description, component }) => {
+                        return (
+                          <button
+                            key={value}
+                            onClick={() => onChange(value)}
+                            className={clsx("role", {
+                              active: fieldValue === value,
+                            })}
+                            type="button"
+                          >
+                            <Logo logo={component} />
+                            <p className="label">{label}</p>
+                            <p className="description">{description}</p>
+                          </button>
+                        );
+                      }
+                    )}
+                  </div>
+                  <Form.Control.Feedback type="invalid">
+                    {error?.message}
+                  </Form.Control.Feedback>
+                </Form.Group>
+              );
+            }}
+            control={control}
+            name="role"
+            rules={{
+              required: t("Validation:fieldRequired", {
+                fieldName: t("User:role"),
+              }) as string,
+            }}
+          />
+        </Col>
+      </Row>
+      {hasPermission && (
+        <Button type="submit" size="lg" disabled={isLoading}>
+          {defaultValues.email ? t("User:submit") : t("Design:addUser")}
+        </Button>
+      )}
+    </Form>
+  );
+};

package/src/provider/company/user-form/index.ts

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

package/src/provider/constants.ts

@@ -0,0 +1 @@
+export const MAX_DESCRIPTION_CHARACTERS_LENGTH = 25500;

package/src/provider/index.ts

@@ -0,0 +1,8 @@
+export * from "./categories-input";
+export * from "./location-input";
+export * from "./provider-details-input";
+export * from "./provider-form";
+export * from "./provider-links-input";
+export * from "./venue-form";
+export * from "./working-hours-input";
+export * from "./company";