@licklist/design 0.44.486-dev.83 → 0.44.486

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/manual-booking/summary/ManualBookingSummary.tsx

@@ -8,11 +8,6 @@ import {
 } from "@licklist/core/dist/Config";
 import { useIntl } from "react-intl";
 import * as Config from "@licklist/core/dist/Config";
-import {
-  RELY_ON_PEOPLE_QUANTITY,
-  RelyOnPeopleType,
-} from "@licklist/core/dist/DataMapper/Product/ProductSetDataMapper";
-import { getRelyOnPeopleMultiplier } from "@licklist/plugins/dist/utils/relyOnPeople";
 import { BlockLoader } from "../../../static/loader";
 
 export interface ManualBookingSummaryProps {
@@ -22,7 +17,6 @@ export interface ManualBookingSummaryProps {
   orderSumIncludingFee?: number | null;
   isFeeFetching: boolean;
   orderDate: string;
-  relyOnPeopleType?: RelyOnPeopleType | null;
 }
 
 export const ManualBookingSummary = ({
@@ -32,15 +26,14 @@ export const ManualBookingSummary = ({
   orderSumIncludingFee,
   isFeeFetching,
   orderDate,
-  relyOnPeopleType,
 }: ManualBookingSummaryProps) => {
   const { t } = useTranslation(["Design", "Sale"]);
   const { formatNumber } = useIntl();
-  const showRelyOnPeople =
-    relyOnPeopleType && relyOnPeopleType !== RELY_ON_PEOPLE_QUANTITY;
+
   const currentDate = DateTime.fromISO(orderDate);
   const date = currentDate.toFormat(DATE_TIME_MANUAL_BOOKING_FORMAT);
   const time = currentDate.toFormat(TIME_FORMAT);
+
   return (
     <div className="manual-booking-summary">
       <div className="receipt-title">{t("Sale:receipt")}</div>
@@ -50,23 +43,15 @@ export const ManualBookingSummary = ({
       {orders.length > 0 ? (
         <div className="summary-item-container">
           {orders.map((order: ManualBookingOrder) => {
-            const relyOnPeopleMultiplier = getRelyOnPeopleMultiplier({
-              relyOnPeopleType,
-              capacity: order?.capacity,
-            });
             return (
               <div
                 key={order.id}
                 className="d-flex justify-content-between border-summary-item"
               >
                 <div>{order.name}</div>
-                {showRelyOnPeople && relyOnPeopleMultiplier && (
-                  <div>
-                    {`x ${order.quantity * relyOnPeopleMultiplier} ${t(
-                      "people"
-                    )}`}
-                  </div>
-                )}
+                <div>
+                  {order.isRelyOnPeople ? `x ${order.quantity} People` : ""}
+                </div>
                 <div>
                   {formatNumber(order.quantity * order.price, {
                     style: "currency",

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/sales/source-of-sales/SourceOfSalesChart.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useMemo, useEffect } from "react";
+import React, { useEffect, useState, useMemo } from "react";
 import { useTranslation } from "react-i18next";
 import { useIntl } from "react-intl";
 
@@ -35,8 +35,7 @@ function SourceOfSalesChart({ data }: SourceOfSalesProps) {
         name: AFFILIATES,
       },
     ],
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [data.length]
+    [data]
   );
   const { t } = useTranslation("Design");
   const { formatNumber } = useIntl();
@@ -87,34 +86,32 @@ function SourceOfSalesChart({ data }: SourceOfSalesProps) {
     <div className="source-of-sales">
       <div className="source-of-sales__header">{t("sourceOfSales")}</div>
       <div className="source-of-sales__pie-chart">
-        {!!data.length && (
-          <ResponsiveContainer debounce={100} width="100%" height="100%">
-            <PieChart>
-              <Legend
-                iconType="circle"
-                wrapperStyle={{ left: 170, top: 20 }}
-                layout="vertical"
-                verticalAlign="top"
-                content={legendRenderer}
-              />
-              <Pie
-                data={extendedData}
-                cx={80}
-                cy={defaultCYPosition}
-                innerRadius={40}
-                outerRadius={48}
-                dataKey="percentage"
-              >
-                {data.map(({ source }: PieChartData, index) => (
-                  <Cell
-                    className={`colors-${index % 4}`}
-                    key={`cell-${source}`}
-                  />
-                ))}
-              </Pie>
-            </PieChart>
-          </ResponsiveContainer>
-        )}
+        <ResponsiveContainer width="100%" height="100%">
+          <PieChart>
+            <Legend
+              iconType="circle"
+              wrapperStyle={{ left: 170, top: 20 }}
+              layout="vertical"
+              verticalAlign="top"
+              content={legendRenderer}
+            />
+            <Pie
+              data={extendedData}
+              cx={80}
+              cy={defaultCYPosition}
+              innerRadius={40}
+              outerRadius={48}
+              dataKey="percentage"
+            >
+              {data.map(({ source }: PieChartData, index) => (
+                <Cell
+                  className={`colors-${index % 4}`}
+                  key={`cell-${source}`}
+                />
+              ))}
+            </Pie>
+          </PieChart>
+        </ResponsiveContainer>
       </div>
     </div>
   );

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";

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

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

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

package/src/setting/dashboard/snippets/form/SnippetForm.stories.tsx

@@ -0,0 +1,104 @@
+import React from "react";
+import { Meta, Story } from "@storybook/react";
+import { boolean } from "@storybook/addon-knobs";
+import { SnippetForm, SnippetFormProps } from "./SnippetForm";
+
+export default {
+  title: "Snippets / Snippet Form",
+} as Meta;
+
+export const Default: Story<SnippetFormProps> = (args) => {
+  const providerHasMap = boolean("providerHasMap", true);
+
+  return <SnippetForm {...args} providerHasMap={providerHasMap} />;
+};
+
+export const Empty: Story<SnippetFormProps> = (args) => {
+  const providerHasMap = boolean("providerHasMap", true);
+
+  return <SnippetForm {...args} providerHasMap={providerHasMap} />;
+};
+
+export const ServerErrors: Story<SnippetFormProps> = (args) => {
+  const providerHasMap = boolean("providerHasMap", true);
+
+  return <SnippetForm {...args} providerHasMap={providerHasMap} />;
+};
+
+Default.args = {
+  onSubmit: (data) => console.log(data),
+  isLoading: false,
+  hasPermission: true,
+  defaultValues: {
+    name: "",
+    type: "event",
+    templateId: "62419ded59888e0e590a9182",
+    snippetSetting: {
+      displayDescription: false,
+      displayCost: true,
+      displayType: true,
+    },
+  },
+  templates: [
+    {
+      id: "62419ded59888e0e590a9182",
+      name: "Template21 (DFtest)",
+      colors: [],
+    },
+    {
+      id: "6241a12f5334b6556b0ffea2",
+      name: "Template12",
+      colors: [],
+    },
+  ],
+};
+
+Empty.args = {
+  onSubmit: (data) => console.log(data),
+  isLoading: true,
+  defaultValues: {
+    name: "",
+    type: "event",
+    templateId: "",
+    snippetSetting: {
+      displayDescription: true,
+      displayCost: true,
+      displayType: true,
+    },
+  },
+  templates: [
+    {
+      id: "62419ded59888e0e590a9182",
+      name: "Template21 (DFtest)",
+      colors: [],
+    },
+    {
+      id: "6241a12f5334b6556b0ffea2",
+      name: "Template12",
+      colors: [],
+    },
+  ],
+};
+
+ServerErrors.args = {
+  onSubmit: (data) => console.log(data),
+  isLoading: true,
+  serverErrors: { name: ["Name is required field"] },
+  defaultValues: {
+    name: "",
+    type: "event",
+    templateId: "",
+    snippetSetting: {
+      displayDescription: true,
+      displayCost: true,
+      displayType: true,
+    },
+  },
+  templates: [
+    {
+      id: "6241a12f5334b6556b0ffea2",
+      name: "Template12",
+      colors: [],
+    },
+  ],
+};

package/src/setting/dashboard/snippets/form/SnippetForm.tsx

@@ -0,0 +1,94 @@
+import React, { useEffect } from "react";
+import { FormValues } from "@licklist/plugins/dist/types/services/Form/hook-form-service";
+import { Button, Form } from "react-bootstrap";
+import { FormProvider, useForm } from "react-hook-form";
+import { useTranslation } from "react-i18next";
+import { HasPermissionProp } from "@licklist/plugins/dist/types/permission/Permission";
+import { ServerError } from "@licklist/plugins/dist/hooks/Api/useHttpQuery";
+import FormErrorService from "@licklist/plugins/dist/services/Form/FormErrorService";
+import {
+  SnippetViewType,
+  SnippetType,
+} from "@licklist/core/dist/DataMapper/Provider/SnippetDataMapper";
+import { SnippetTemplateType } from "@licklist/core/dist/DataMapper/Provider/SnippetTemplateDataMapper";
+import { SnippetControl } from "../control";
+import { SnippetContextProvider, SnippetLoadingContext } from "./context";
+
+export interface SnippetFormValues extends FormValues {
+  name: string;
+  type: SnippetType;
+  templateId: string;
+  snippetSetting?: {
+    displayDescription: boolean;
+    displayCost: boolean;
+    displayType: boolean;
+  };
+  viewType: SnippetViewType;
+}
+
+export interface ShortSnippetTemplate {
+  id: string;
+  name: string;
+  colors: Array<string>;
+  type: SnippetTemplateType;
+}
+
+export interface SnippetFormProps extends HasPermissionProp {
+  isLoading: boolean;
+  onSubmit: (values: SnippetFormValues) => void;
+  templates: Array<ShortSnippetTemplate>;
+  defaultValues?: SnippetFormValues;
+  serverErrors?: ServerError;
+  providerHasMap?: boolean | null;
+}
+
+export function SnippetForm({
+  isLoading,
+  defaultValues,
+  onSubmit,
+  templates,
+  hasPermission = true,
+  serverErrors,
+  providerHasMap = false,
+}: SnippetFormProps) {
+  const { t } = useTranslation("Design");
+
+  const form = useForm<SnippetFormValues>({ defaultValues });
+
+  const { setError } = form;
+
+  useEffect(() => {
+    FormErrorService.handleServerErrors(serverErrors, setError);
+  }, [serverErrors, setError]);
+
+  return (
+    <SnippetContextProvider>
+      <FormProvider {...form}>
+        <Form onSubmit={form.handleSubmit(onSubmit)}>
+          <SnippetLoadingContext.Consumer>
+            {({ isLoading: contextIsLoading }) => {
+              return (
+                <>
+                  <SnippetControl
+                    templates={templates}
+                    isLoading={isLoading}
+                    providerHasMap={providerHasMap}
+                  />
+                  {hasPermission && (
+                    <Button
+                      className="mt-5 d-no dne d-md-block"
+                      type="submit"
+                      disabled={contextIsLoading}
+                    >
+                      {t("save")}
+                    </Button>
+                  )}
+                </>
+              );
+            }}
+          </SnippetLoadingContext.Consumer>
+        </Form>
+      </FormProvider>
+    </SnippetContextProvider>
+  );
+}

package/src/setting/dashboard/snippets/form/context.tsx

@@ -0,0 +1,18 @@
+import React, { createContext, useState } from "react";
+
+interface LoadingContext {
+  isLoading: boolean;
+  setLoading: (loading: boolean) => void;
+}
+
+export const SnippetLoadingContext = createContext<LoadingContext | null>(null);
+
+export function SnippetContextProvider({ children }) {
+  const [loading, setLoading] = useState(false);
+
+  return (
+    <SnippetLoadingContext.Provider value={{ isLoading: loading, setLoading }}>
+      {children}
+    </SnippetLoadingContext.Provider>
+  );
+}

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

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