@licklist/design 0.45.0-dev.0 → 0.45.0

package/src/snippet/snippet-template/form/SnippetTemplateForm.tsx

@@ -0,0 +1,164 @@
+import React, { useCallback, useContext, useEffect } from "react";
+import { Form } from "react-bootstrap";
+import { useForm, FormProvider } from "react-hook-form";
+import Button from "react-bootstrap/Button";
+import { useTranslation } from "react-i18next";
+import { isEqual } from "lodash";
+import {
+  SnippetTemplateValues,
+  SNIPPET_TEMPLATE_TYPE_EVENT_LIST,
+  SNIPPET_TEMPLATE_TYPE_VENUE_MAP,
+} from "@licklist/core/dist/DataMapper/Provider/SnippetTemplateDataMapper";
+import { HasPermissionProp } from "@licklist/plugins/dist/types/permission/Permission";
+import Row from "react-bootstrap/Row";
+import Col from "react-bootstrap/Col";
+import FormErrorService from "@licklist/plugins/dist/services/Form/FormErrorService";
+import HookFormService from "@licklist/plugins/dist/services/Form/HookFormService";
+import { useId } from "@react-aria/utils";
+import { ServerError } from "@licklist/plugins/dist/hooks/Api/useHttpQuery";
+import { PropertyControl } from "../control";
+import {
+  SnippetTemplateContext,
+  SnippetTemplateValuesWithName,
+} from "../context/snippetTemplate";
+import { SnippetTemplateViewContext } from "../context/snippetTemplateView";
+
+export interface SnippetTemplateFormProps extends HasPermissionProp {
+  isLoading?: boolean;
+  serverErrors?: ServerError;
+  onSubmit: (values: SnippetTemplateValuesWithName) => void;
+  providerHasMap?: boolean | null;
+}
+
+export function SnippetTemplateForm({
+  isLoading,
+  onSubmit,
+  hasPermission = true,
+  serverErrors,
+  providerHasMap = false,
+}: SnippetTemplateFormProps) {
+  const { t } = useTranslation("Design");
+
+  const { template, actions } = useContext(SnippetTemplateContext);
+  const { view, properties } = useContext(SnippetTemplateViewContext);
+  const form = useForm<SnippetTemplateValuesWithName>({
+    mode: "onChange",
+    defaultValues: template,
+  });
+
+  const {
+    register,
+    setError,
+    formState: { errors },
+    watch,
+  } = form;
+
+  useEffect(() => {
+    FormErrorService.handleServerErrors(serverErrors, setError);
+  }, [serverErrors, setError]);
+
+  const nameId = useId();
+  const nextTemplate = watch();
+
+  useEffect(() => {
+    if (isEqual(nextTemplate, template)) return;
+
+    actions.updateTemplate(nextTemplate);
+  }, [actions, nextTemplate, template]);
+
+  const isFieldValid = useCallback(
+    (field: string) =>
+      HookFormService.isFieldValid(
+        form.formState,
+        form.formState.errors,
+        field
+      ),
+    [form.formState]
+  );
+
+  return (
+    <FormProvider {...form}>
+      <Form onSubmit={form.handleSubmit(onSubmit)}>
+        <h2 className="mb-2 pb-1 border-bottom border-secondary">
+          {t("designSettings")}
+        </h2>
+
+        <Row>
+          <Form.Group
+            className="mt-5"
+            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,
+              })}
+              isValid={isFieldValid("name")}
+              isInvalid={Boolean(errors.name)}
+            />
+            <Form.Control.Feedback type="invalid">
+              {errors.name?.message}
+            </Form.Control.Feedback>
+          </Form.Group>
+        </Row>
+        {providerHasMap && (
+          <Row>
+            <Form.Group as={Col} xs sm={12} md={8} lg={10} xl={12}>
+              <Form.Label>{t("widgetType")}</Form.Label>
+              <Form.Control
+                as="select"
+                {...register("type", {
+                  required: t("Validation:fieldRequired", {
+                    attribute: t("widgetType"),
+                  }) as string,
+                })}
+                placeholder={t("widgetType")}
+              >
+                <option value={SNIPPET_TEMPLATE_TYPE_EVENT_LIST}>
+                  {t("widgetTypeEventList")}
+                </option>
+                <option value={SNIPPET_TEMPLATE_TYPE_VENUE_MAP}>
+                  {t("widgetTypeVenueMaps")}
+                </option>
+              </Form.Control>
+            </Form.Group>
+          </Row>
+        )}
+
+        <hr />
+
+        <h5 className="mb-1">{t(view)}</h5>
+
+        {view &&
+          view in properties &&
+          Object.keys(properties[view]).map((item) => (
+            <PropertyControl<SnippetTemplateValues>
+              key={item}
+              item={item as keyof SnippetTemplateValues}
+              label={properties[view][item]}
+              isDisabled={isLoading}
+            />
+          ))}
+
+        {hasPermission && (
+          <Button
+            className="mt-5 d-no dne d-md-block"
+            type="submit"
+            disabled={isLoading}
+          >
+            {t("save")}
+          </Button>
+        )}
+      </Form>
+    </FormProvider>
+  );
+}

package/src/snippet/snippet-template/form/index.ts

@@ -0,0 +1 @@
+export { SnippetTemplateForm } from "./SnippetTemplateForm";

package/src/snippet/snippet-template/index.ts

@@ -0,0 +1,6 @@
+export * from "./context";
+export * from "./control";
+export * from "./form";
+export * from "./preview";
+export * from "./settings";
+export * from "./SnippetTemplate";

package/src/snippet/snippet-template/preview/Preview.stories.tsx

@@ -0,0 +1,67 @@
+import { Meta, Story } from "@storybook/react";
+import React from "react";
+import { Preview, PreviewProps } from "./Preview";
+import { SnippetTemplateContextProvider } from "../context/snippetTemplate";
+import { SnippetTemplateLoadingContextProvider } from "../context/snippetTemplateLoading";
+import { SnippetTemplateViewContextProvider } from "../context/snippetTemplateView";
+
+export default {
+  title: "Snippet/Template/Preview",
+  component: Preview,
+} as Meta;
+
+const defaultValues = {
+  name: "",
+  backgroundColor: "#F2F2F2",
+  bookingBackgroundColor: "#E2E2E2",
+  bookingBorderColor: "#E2E2E2",
+  bookingBodyColor: "#333333",
+  bookingTotalColor: "#333333",
+  cardBackgroundColor: "#F9F9F9",
+  cardBorderColor: "#CCCCCC",
+  cardTitleColor: "#333333",
+  cardTextColor: "#333333",
+  cardButtonColor: "#FFFFFF",
+  cardButtonBackgroundColor: "#0E8CE2",
+  elementsTitleColor: "#333333",
+  elementsTextColor: "#333333",
+  elementsButtonColor: "#FFFFFF",
+  elementsButtonBackgroundColor: "#0E8CE2",
+  formBackgroundColor: "#F9F9F9",
+  formBorderColor: "#CCCCCC",
+  formTitleColor: "#333333",
+  formLabelColor: "#333333",
+  formLinkColor: "#0E8CE2",
+  stepsBackgroundColor: "#E2E2E2",
+  stepsBorderColor: "#E2E2E2",
+  stepsBodyColor: "#000000",
+  stepsActiveStepBackgroundColor: "#F9F9F9",
+  stepsActiveStepBodyColor: "#000000",
+  stepsInactiveStepBackgroundColor: "#E2E2E2",
+  stepsInactiveStepBodyColor: "#000000",
+  tableTitleColor: "#333333",
+  tableHeadColor: "#333333",
+  tableBodyColor: "#333333",
+  tableTotalColor: "#333333",
+  tableDiscountColor: "#333333",
+  tablePriceColor: "#0E8CE2",
+  timerBackgroundColor: "#E2E2E2",
+  timerBodyColor: "#000000",
+  timerBorderColor: "#E2E2E2",
+};
+
+export const Default: Story<PreviewProps> = (args) => {
+  return (
+    <SnippetTemplateLoadingContextProvider>
+      <SnippetTemplateContextProvider defaultValues={defaultValues}>
+        <SnippetTemplateViewContextProvider>
+          <Preview {...args} />
+        </SnippetTemplateViewContextProvider>
+      </SnippetTemplateContextProvider>
+    </SnippetTemplateLoadingContextProvider>
+  );
+};
+
+Default.args = {
+  onSettingClick: () => {},
+};

package/src/snippet/snippet-template/preview/Preview.tsx

@@ -0,0 +1,393 @@
+import React, { useContext, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { MemoryRouter } from "react-router-dom";
+import { Button } from "react-bootstrap";
+import {
+  SNIPPET_TYPE_EVENT_LIST,
+  SNIPPET_TYPE_VENUE_MAP,
+} from "@licklist/core/dist/DataMapper/Provider/SnippetDataMapper";
+import { ProductSet } from "@licklist/core/dist/DataMapper/Product/ProductSetDataMapper";
+import { DateTime } from "luxon";
+import { Calendar, defaultStartDay } from "../../../calendar";
+import { getMonthCalendarDates } from "../../../calendar/utils";
+import { IframeEventCard } from "../../../iframe/event/event-card";
+import { SettingButton } from "../settings";
+import {
+  SnippetTemplateViewContext,
+  snippetTemplateViews,
+} from "../context/snippetTemplateView";
+import { Timer } from "../../../iframe/order-process/components/Timer";
+import { NavigationSteps } from "../../../iframe/order-process/components/NavigationSteps";
+import { Page, PageBody, PageHeader } from "../../../iframe/page";
+import {
+  BookingSummary,
+  BookingSummaryFooter,
+  EventProductSets,
+  IframeEventVenueMap,
+} from "../../../iframe";
+import { NumberInput } from "../../../iframe/order-process/components/CategoryProduct/components/NumberInput";
+import { SnippetTemplateContext } from "../context/snippetTemplate";
+
+const DEFAULT_IMAGE =
+  "https://images.unsplash.com/photo-1638988319382-90e61be77c59?ixlib=rb-1.2.1&auto=format&fit=crop&w=687&q=80";
+
+export interface PreviewProps {
+  onSettingClick: () => void;
+  providerHasMap: boolean;
+}
+
+export function Preview({
+  onSettingClick,
+  providerHasMap = false,
+}: PreviewProps) {
+  const { t } = useTranslation("Design");
+  const [value, setValue] = useState(0);
+  const [productSetId, onSelectProductSet] = useState<number>(0);
+
+  const { setView } = useContext(SnippetTemplateViewContext);
+  const {
+    template: { type = SNIPPET_TYPE_EVENT_LIST },
+  } = useContext(SnippetTemplateContext);
+
+  const handleOnClick = (nextView: keyof typeof snippetTemplateViews) => {
+    setView(nextView);
+    onSettingClick();
+  };
+
+  const [currentDate, setCurrentDate] = useState<DateTime>(defaultStartDay);
+  const [selectedDate, setSelectedDate] = useState<DateTime | null>(null);
+  const calendarDates = getMonthCalendarDates(currentDate);
+
+  return (
+    <div className="w-100 h-100 snippet-template-preview">
+      <Page
+        headerBlock={
+          <div className="d-flex mt-5 pt-5 p-5 iframe-page snippet-template-additional-header">
+            <SettingButton
+              view="pageHeaderSteps"
+              onClick={handleOnClick}
+              className="m-0"
+            >
+              <SettingButton
+                view="pageHeader"
+                onClick={handleOnClick}
+                className="m-0 snippet-template-button-left"
+                containerClassName="mr-5 asd"
+              />
+              <div className="header-block mt-5 pt-5">
+                <div className="mt-5 pt-5 external-header">
+                  <PageHeader showCloseButton showBackButton>
+                    <Timer timer={600} />
+                    <MemoryRouter initialEntries={["/step1", "/step2"]}>
+                      <NavigationSteps
+                        steps={[
+                          { pathname: "/step1", key: "/step1", name: "Burger" },
+                          { pathname: "/step2", key: "/step2", name: "Cheese" },
+                        ]}
+                      />
+                    </MemoryRouter>
+                  </PageHeader>
+                </div>
+              </div>
+            </SettingButton>
+          </div>
+        }
+      >
+        <div className="page-body pb-5 mb-5 pt-3 mt-3">
+          <SettingButton
+            view="page"
+            onClick={handleOnClick}
+            className="snippet-template-body-button"
+          />
+        </div>
+        <PageBody
+          className="snippet-template"
+          leftBlock={
+            <SettingButton
+              view="pageBodyLeftBlock"
+              onClick={handleOnClick}
+              className="mr-4"
+            >
+              <PageBody.LeftBlock title="About this event">
+                <SettingButton
+                  view="elements"
+                  onClick={handleOnClick}
+                  className="mt-5 m-0"
+                  containerClassName="mt-5 pt-5"
+                >
+                  <div className="mt-3">
+                    <h3>{t("elements")}</h3>
+                  </div>
+                  <div className="mt-5">
+                    <h4>{t("Texts")}</h4>
+                    <p>XXXX</p>
+                  </div>
+
+                  <div className="mt-5">
+                    <h4>{t("form")}</h4>
+                    <div className="d-flex flex-column w-100">
+                      <div className="w-100">
+                        <div className="form-row">
+                          <div className="form-group col-12">
+                            <label className="form-label">
+                              {t("firstName")}
+                            </label>
+                            <input
+                              type="text"
+                              className="form-control"
+                              placeholder={t("firstName")}
+                            />
+                          </div>
+                        </div>
+                        <div className="form-row">
+                          <button type="button" className="btn btn-link">
+                            {t("iHaveAccount")}
+                          </button>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+
+                  <div className="mt-5">
+                    <h4>{t("Number input")}</h4>
+                    <div className="d-flex flex-column w-100">
+                      <NumberInput
+                        value={value}
+                        onChange={(nextValue) => setValue(nextValue)}
+                        onArrowDown={() =>
+                          setValue((prevValue) => prevValue - 1)
+                        }
+                        onArrowUp={() => setValue((prevValue) => prevValue + 1)}
+                      />
+                    </div>
+                  </div>
+
+                  <div className="mt-5">
+                    <h4>{t("Dropdown")}</h4>
+                    <div className="d-flex flex-column w-100">
+                      <div className="w-100">
+                        <div className="form-row">
+                          <div className="form-group col-12">
+                            <label className="form-label">
+                              {t("dayOfBirthShort")}
+                            </label>
+                            <select
+                              className="form-control"
+                              placeholder={t("firstName")}
+                            >
+                              <option>2022</option>
+                              <option>2023</option>
+                            </select>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+
+                  <div className="mt-5 snippet-template__form">
+                    <h4>{t("Button")}</h4>
+                    <div className="d-flex flex-column w-100">
+                      <Button size="sm">Submit</Button>
+                    </div>
+                  </div>
+                </SettingButton>
+
+                {providerHasMap && type === SNIPPET_TYPE_VENUE_MAP && (
+                  <>
+                    <div className="pt-4">
+                      <h4>{t("Calendar")}</h4>
+                      <SettingButton
+                        view="calendar"
+                        onClick={handleOnClick}
+                        className="mt-3 m-0"
+                        containerClassName="mt-5 pt-5"
+                      >
+                        <Calendar
+                          currentDate={currentDate}
+                          setCurrentDate={setCurrentDate}
+                          selectedDate={selectedDate}
+                          setSelectedDate={setSelectedDate}
+                          calendarDates={calendarDates}
+                        />
+                      </SettingButton>
+                    </div>
+                    <div className="pt-4">
+                      <SettingButton
+                        view="productSet"
+                        onClick={handleOnClick}
+                        className="mt-3 m-0"
+                        containerClassName="mt-5 pt-5"
+                      >
+                        <h4>{t("Product Sets")}</h4>
+                        <div className="pt-5 mt-5">
+                          <EventProductSets
+                            productSets={[
+                              {
+                                id: 1,
+                                name: "Test 1",
+                              } as ProductSet,
+                              {
+                                id: 2,
+                                name: "Test 2",
+                              } as ProductSet,
+                              {
+                                id: 3,
+                                name: "Test 3",
+                              } as ProductSet,
+                            ]}
+                            onSelectProductSet={onSelectProductSet}
+                            selectedProductSetId={productSetId}
+                          />
+                        </div>
+                      </SettingButton>
+                    </div>
+                    <div className="pt-4">
+                      <form className="category-steps-form pt-4 mt-4">
+                        <h4>{t("Venue Map")}</h4>
+                        <div className="position-relative pt-4 mt-4">
+                          <SettingButton
+                            view="venueMap"
+                            onClick={handleOnClick}
+                            className="mt-n6 m-0"
+                            containerClassName="mt-5 pt-5"
+                          >
+                            <IframeEventVenueMap
+                              // eslint-disable-next-line max-len
+                              url="https://fastly.picsum.photos/id/13/2500/1667.jpg?hmac=SoX9UoHhN8HyklRA4A3vcCWJMVtiBXUg0W4ljWTor7s"
+                              usedInIframe
+                              pointProducts={[
+                                {
+                                  id: 9,
+                                  menuStepId: 75,
+                                  pointId: 21,
+                                  productUuid:
+                                    "beb6393c-2fdd-40f7-bb92-8800685b203f",
+                                },
+                                {
+                                  id: 10,
+                                  menuStepId: 75,
+                                  pointId: 24,
+                                  productUuid:
+                                    "beb6393c-2fdd-40f7-bb92-8800685b203a",
+                                },
+                              ]}
+                              points={[
+                                {
+                                  id: 21,
+                                  venueMapId: 7,
+                                  createdAt: null,
+                                  updatedAt: null,
+                                  deletedAt: null,
+                                  xCoordinate: 799.39,
+                                  yCoordinate: 1108.45,
+                                },
+                                {
+                                  id: 24,
+                                  venueMapId: 7,
+                                  createdAt: null,
+                                  updatedAt: null,
+                                  deletedAt: null,
+                                  xCoordinate: 1400.2,
+                                  yCoordinate: 1431.77,
+                                },
+                              ]}
+                              choosedProductUuids={[
+                                "beb6393c-2fdd-40f7-bb92-8800685b203f",
+                              ]}
+                              products={[
+                                {
+                                  id: 148,
+                                  productCategoryId: 57,
+                                  productGroupId: null,
+                                  availableQuantity: 980,
+                                  zoneId: null,
+                                  name: "Cofee",
+                                  description: "",
+                                  price: 15,
+                                  deposit: 0,
+                                  minQuantity: 1,
+                                  maxQuantity: 15,
+                                  totalQuantity: 980,
+                                  type: "sale" as const,
+                                  capacity: 0,
+                                  duration: 0,
+                                  weight: 0,
+                                  isAvailable: true,
+                                  isSoldOut: false,
+                                  isRequired: false,
+                                  isUnlimited: false,
+                                  quantitySelector: 1,
+                                  hasSpecialNotes: false,
+                                  termsAndConditions: null,
+                                  subProducts: [],
+                                  images: null,
+                                  productCategory: null,
+                                  uuid: "beb6393c-2fdd-40f7-bb92-8800685b203f",
+                                },
+                                {
+                                  id: 149,
+                                  productCategoryId: 57,
+                                  productGroupId: null,
+                                  availableQuantity: 980,
+                                  zoneId: null,
+                                  name: "Cofee 2",
+                                  description: "",
+                                  price: 15,
+                                  deposit: 0,
+                                  minQuantity: 1,
+                                  maxQuantity: 15,
+                                  totalQuantity: 980,
+                                  type: "sale" as const,
+                                  capacity: 0,
+                                  duration: 0,
+                                  weight: 0,
+                                  isAvailable: true,
+                                  isSoldOut: false,
+                                  isRequired: false,
+                                  isUnlimited: false,
+                                  quantitySelector: 1,
+                                  hasSpecialNotes: false,
+                                  termsAndConditions: null,
+                                  subProducts: [],
+                                  images: null,
+                                  productCategory: null,
+                                  uuid: "beb6393c-2fdd-40f7-bb92-8800685b203a",
+                                },
+                              ]}
+                            />
+                          </SettingButton>
+                        </div>
+                      </form>
+                    </div>
+                  </>
+                )}
+              </PageBody.LeftBlock>
+            </SettingButton>
+          }
+          rightBlock={
+            <PageBody.RightBlock bottomBlock={<BookingSummaryFooter />}>
+              <SettingButton
+                view="pageBodyRightBlock"
+                onClick={handleOnClick}
+                containerClassName="snippet-template-button-fixed-height"
+                className="m-0"
+              />
+
+              <BookingSummary.Accordion showTitleOnlyOnMobile>
+                <IframeEventCard
+                  imageSrc={DEFAULT_IMAGE}
+                  title="XXXX"
+                  type="Party Doors 22:00 - 03:00"
+                  cost={6}
+                  date="Sat 2nd May"
+                  goToDetails={() => null}
+                  shortDate="07/03/2023"
+                />
+              </BookingSummary.Accordion>
+            </PageBody.RightBlock>
+          }
+        />
+      </Page>
+    </div>
+  );
+}

package/src/snippet/snippet-template/preview/index.ts

@@ -0,0 +1 @@
+export { Preview } from "./Preview";

package/src/snippet/snippet-template/settings/SettingButton.tsx

@@ -0,0 +1,35 @@
+import React from "react";
+import Button from "react-bootstrap/Button";
+import clsx from "clsx";
+import Icon from "../../../static/Icon";
+import { snippetTemplateViews } from "../context/snippetTemplateView";
+
+export interface SettingButtonProps extends React.PropsWithChildren<unknown> {
+  view: string;
+  onClick: (key: keyof typeof snippetTemplateViews) => void;
+  className?: string;
+  containerClassName?: string;
+}
+
+export const SettingButton = ({
+  view,
+  onClick,
+  children,
+  className,
+  containerClassName,
+}: SettingButtonProps) => {
+  return (
+    <div className={clsx("position-relative w-100 h-100", containerClassName)}>
+      {children}
+
+      <Button
+        type="button"
+        variant="primary"
+        className={clsx("snippet-template__setting d-inline", className)}
+        onClick={() => onClick(view as keyof typeof snippetTemplateViews)}
+      >
+        <Icon type="cog" style={{ width: 16 }} />
+      </Button>
+    </div>
+  );
+};