@licklist/design 0.44.486-dev.54 → 0.44.486-dev.56

package/src/iframe/event/event-details/EventDetailsOneStepForm.stories.tsx

@@ -1,123 +0,0 @@
-import { Meta } from "@storybook/react";
-import React, { useState } from "react";
-import { boolean } from "@storybook/addon-knobs";
-import { EventDetails } from "./EventDetails";
-
-export default {
-  title: "Iframe/Event/EventDetailsOneStepForm",
-  component: EventDetails,
-} as Meta;
-
-const productCategories = [
-  {
-    id: 1,
-    name: "Early Bird General Admission",
-    products: [
-      {
-        id: 7,
-        name: "Beer",
-        description: `Ticket is valid for students and non students. 
-          You do not need student ID for this event but do require regular age ID e.g. driving licence or passport. 
-          Ticket valid for entry before 11.30pm for 12.30am showtime.`,
-        minQuantity: 1,
-        maxQuantity: 10,
-        price: 1,
-      },
-      {
-        id: 8,
-        name: "Wine",
-        description: `Ticket is valid for students and non students.
-           You do not need student ID for this event but do require regular age ID e.g. driving licence or passport.
-            Ticket valid for entry before 11.30pm for 12.30am showtime.`,
-        minQuantity: 1,
-        maxQuantity: 10,
-        price: 1,
-        isRequired: true,
-      },
-    ],
-  },
-  {
-    id: 2,
-    name: "Nice",
-    products: [
-      {
-        id: 3,
-        name: "Beer",
-        description: `Ticket is valid for students and non students. 
-          You do not need student ID for this event but do require regular age ID e.g. driving licence or passport. 
-          Ticket valid for entry before 11.30pm for 12.30am showtime.`,
-        minQuantity: 1,
-        maxQuantity: 10,
-        price: 1,
-      },
-      {
-        id: 5,
-        name: "Wine",
-        description: `Ticket is valid for students and non students.
-           You do not need student ID for this event but do require regular age ID e.g. driving licence or passport.
-            Ticket valid for entry before 11.30pm for 12.30am showtime.`,
-        minQuantity: 1,
-        maxQuantity: 10,
-        price: 1,
-      },
-    ],
-  },
-];
-
-const menus = [
-  {
-    id: 1,
-    name: "Menu 1",
-    menuSteps: [
-      {
-        id: 1,
-        name: "Burger",
-        productCategories: productCategories,
-      },
-    ],
-  },
-];
-
-export function Default() {
-  const [_order, setOrder] = useState({});
-
-  const onSubmit = (values: any) => {
-    setOrder(values);
-  };
-
-  const showImage = boolean("showImage", true);
-
-  return (
-    <div>
-      <EventDetails
-        menus={menus}
-        description="On the other hand, we denounce with righteous indignation and dislike
-            men who are so beguiled and demoralized by the charms of pleasure of
-            the moment, so blinded by desire, that they cannot foresee the pain
-            and trouble that are bound to ensue; and equal blame belongs to those
-            who fail in their duty through weakness of will, which is the same as
-            saying through shrinking from toil and pain. These cases are perfectly
-            simple and easy to distinguish. In a free hour, when our power of
-            choice is untrammelled and when nothing prevents our being able to do
-            what we like best, every pleasure is to be welcomed and every pain
-            avoided. But in certain circumstances and owing to the claims of duty
-            or the obligations of business it will frequently occur that pleasures
-            have to be repudiated and annoyances accepted. The wise man therefore
-            always holds in these matters to this principle of selection: he
-            rejects pleasures to secure other greater pleasures, or else he
-            endures pains to avoid worse pains."
-        cost={6}
-        title="Glitterbomb Bucks / Baga Chipz"
-        date="Sat 2nd May"
-        imageSrc={
-          // eslint-disable-next-line max-len
-          showImage
-            ? "https://images.unsplash.com/photo-1638988319382-90e61be77c59?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=387&q=80 387w, https://images.unsplash.com/photo-1638988319382-90e61be77c59?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80 687w, https://images.unsplash.com/photo-1638988319382-90e61be77c59?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=774&q=80 774w, https://images.unsplash.com/photo-1638988319382-90e61be77c59?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=987&q=80 987w, https://images.unsplash.com/photo-1638988319382-90e61be77c59?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1287&q=80 1287w, https://images.unsplash.com/photo-1638988319382-90e61be77c59?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1374&q=80 1374w, https://images.unsplash.com/photo-1638988319382-90e61be77c59?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1587&q=80 1587w, https://images.unsplash.com/photo-1638988319382-90e61be77c59?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1887&q=80 1887w, https://images.unsplash.com/photo-1638988319382-90e61be77c59?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1974&q=80 1974w, https://images.unsplash.com/photo-1638988319382-90e61be77c59?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2187&q=80 2187w, https://images.unsplash.com/photo-1638988319382-90e61be77c59?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2487&q=80 2487w, https://images.unsplash.com/photo-1638988319382-90e61be77c59?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2574&q=80 2574w, https://images.unsplash.com/photo-1638988319382-90e61be77c59?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2787&q=80 2787w, https://images.unsplash.com/photo-1638988319382-90e61be77c59?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3087&q=80 3087w, https://images.unsplash.com/photo-1638988319382-90e61be77c59?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3174&q=80 3174w, https://images.unsplash.com/photo-1638988319382-90e61be77c59?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3387&q=80 3387w, https://images.unsplash.com/photo-1638988319382-90e61be77c59?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3687&q=80 3687w, https://images.unsplash.com/photo-1638988319382-90e61be77c59?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3774&q=80 3774w, https://images.unsplash.com/photo-1638988319382-90e61be77c59?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3987&q=80 3987w, https://images.unsplash.com/photo-1638988319382-90e61be77c59?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=4000&q=80 4000w"
-            : null
-        }
-        onSubmit={onSubmit}
-        relyOnPeopleCategoryIds={[1]}
-      />
-    </div>
-  );
-}

package/src/iframe/event/event-details/components/category-product/CategoryProduct.tsx

@@ -1,109 +0,0 @@
-import React from "react";
-import { useIntl } from "react-intl";
-import { useFormContext, Controller } from "react-hook-form";
-import clsx from "clsx";
-import { useTranslation, Trans } from "react-i18next";
-import { TicketDescription } from "../../../ticket-description";
-import { NumberInput } from "../../../../../static";
-import { ProductCategory, Product } from "../../../../../types";
-
-interface CategoryProductProps {
-  product: Product;
-  category: ProductCategory;
-}
-
-export const CategoryProduct = ({
-  product,
-  category,
-}: CategoryProductProps) => {
-  const { formatNumber } = useIntl();
-  const { t } = useTranslation("Design");
-  const { control, clearErrors } = useFormContext();
-
-  return (
-    <Controller
-      control={control}
-      name={`${product.id}` as const}
-      rules={{
-        required: product.isRequired,
-        validate: product.isRequired
-          ? (product) => product?.quantity > 0
-          : undefined,
-      }}
-      render={({
-        field: { onChange, value: productInfo = {} },
-        fieldState: { invalid },
-      }) => {
-        return (
-          <div id={String(product.id)}>
-            <div className={clsx("iframe-event__product", invalid && "error")}>
-              <TicketDescription
-                title={product.name}
-                description={product.description}
-                className="iframe-event__product-description"
-                images={product.images}
-              />
-
-              <NumberInput
-                onChange={(val) => {
-                  onChange({
-                    id: product.id,
-                    quantity: val,
-                    name: product.name,
-                    price: product.price,
-                    productsCategoryId: category.id,
-                  });
-                  clearErrors(`${product.id}` as const);
-                }}
-                onArrowDown={() => {
-                  onChange({
-                    id: product.id,
-                    quantity: productInfo?.quantity - 1 || 0,
-                    name: product.name,
-                    price: product.price,
-                    productsCategoryId: category.id,
-                  });
-                  clearErrors(`${product.id}` as const);
-                }}
-                onArrowUp={() => {
-                  onChange({
-                    id: product.id,
-                    quantity: (productInfo?.quantity ?? 0) + 1,
-                    name: product.name,
-                    price: product.price,
-                    productsCategoryId: category.id,
-                  });
-                  clearErrors(`${product.id}` as const);
-                }}
-                min={0}
-                value={productInfo?.quantity || 0}
-                className={clsx(
-                  "iframe-event__product-count",
-                  invalid && "error"
-                )}
-              />
-              <span className="iframe-event__product-price-multiplier">X</span>
-              <span className="iframe-event__product-price">
-                {formatNumber(product.price * (productInfo?.quantity || 1), {
-                  style: "currency",
-                  currency: "GBP",
-                })}
-              </span>
-            </div>
-            {invalid && (
-              <div className="d-flex mt-3 ml-5 mr-5 w-100">
-                <p className="iframe-event__message-error">
-                  <Trans
-                    t={t}
-                    i18nKey="pleaseSelectAtLeastFrom"
-                    values={{ min: 1, type: "item", from: "this category" }}
-                  />
-                </p>
-              </div>
-            )}
-          </div>
-        );
-      }}
-    />
-  );
-};

package/src/iframe/event/event-details/components/category-product/index.ts

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

package/src/iframe/event/event-details/components/event-details-form/EventDetailsForm.tsx

@@ -1,250 +0,0 @@
-import React, {
-  CSSProperties,
-  useState,
-  useRef,
-  useEffect,
-  useMemo,
-} from "react";
-import { useHistory, useLocation } from "react-router-dom";
-import { Badge, Image, Form } from "react-bootstrap";
-import { useTranslation, Trans } from "react-i18next";
-import { useIntl } from "react-intl";
-import { useForm, FormProvider, useWatch } from "react-hook-form";
-import clsx from "clsx";
-import {
-  scrollToError,
-  scrollToElement,
-} from "@licklist/plugins/dist/utils/ScrollUtils";
-import {
-  getFirstErrorKey,
-  isFormValuesEmpty,
-} from "@licklist/plugins/dist/utils/FormValues";
-
-import { TextExpand } from "../../../../../static";
-import { EventNavigationFooter } from "../../../event-navigation-footer";
-import { ProductCategoryView } from "../product-category-view";
-import { NumberOfPeopleInput } from "../number-of-people-input";
-
-import { Menu, WizardFormValues } from "../../../../../types";
-import { TipTapEditor } from "../../../../../tiptap-editor/TipTapEditor";
-
-const DESCRIPTION_MAX_LENGTH = 120;
-const NO_ORDER_ITEMS_ERROR = "NO_ORDER_ITEMS_ERROR";
-
-export interface WizardFormProps {
-  onFormSubmit: (props: {
-    values: WizardFormValues;
-    pathname?: string;
-    isBackAction?: boolean;
-  }) => void;
-  routes?: string[];
-  menu: Menu;
-  numberOfSteps: number;
-  defaultValues: WizardFormValues;
-}
-
-export interface EventDetailsFormProps {
-  title: string;
-  date: string;
-  cost?: number;
-  description: string;
-  imageSrc?: null | string;
-  menus?: Menu[];
-  isBuyNowDisabled?: boolean;
-  relyOnPeopleCategoryIds?: number[];
-  onPrevStep?: () => void;
-}
-
-export function EventDetailsForm({
-  title,
-  cost,
-  description,
-  imageSrc,
-  date,
-  menu,
-  isBuyNowDisabled,
-  onFormSubmit,
-  routes = [],
-  numberOfSteps,
-  defaultValues,
-  relyOnPeopleCategoryIds = [],
-  onPrevStep,
-}: EventDetailsFormProps & WizardFormProps) {
-  const history = useHistory();
-  const { pathname } = useLocation();
-
-  const { formatNumber } = useIntl();
-  const { t } = useTranslation("Design");
-  const form = useForm({ defaultValues });
-  const headerRef = useRef(null);
-
-  const {
-    trigger,
-    handleSubmit,
-    getValues,
-    control,
-    setError,
-    clearErrors,
-    formState: { errors },
-  } = form;
-  const formValues = useWatch({ control });
-
-  const [isDescriptionExpanded, setIsDescriptionExpanded] = useState(false);
-
-  const pathNameIndex = routes.indexOf(pathname);
-  const step = pathNameIndex > 0 ? pathNameIndex : 0;
-  const nextStep = step + 1;
-
-  const onNextClick = async () => {
-    if (!(await trigger())) {
-      scrollToError(getFirstErrorKey(errors));
-      return;
-    }
-    submitCurrentForm(getValues());
-
-    if (routes.length) {
-      history.push(routes[pathNameIndex + 1]);
-    }
-  };
-
-  const onPrevClick = () => {
-    onFormSubmit({ values: getValues(), pathname, isBackAction: true });
-
-    if (routes.length) {
-      history.push(routes[pathNameIndex - 1]);
-    }
-  };
-
-  const submitCurrentForm = (values: WizardFormValues) => {
-    if (nextStep === numberOfSteps && isFormValuesEmpty(values)) {
-      setError(NO_ORDER_ITEMS_ERROR, {});
-      scrollToError(NO_ORDER_ITEMS_ERROR);
-      return;
-    }
-
-    onFormSubmit({ values, pathname, isBackAction: false });
-  };
-
-  const onErrorSubmit = (submitErrors) => {
-    scrollToError(getFirstErrorKey(submitErrors));
-  };
-
-  const shouldShowPeopleInput = useMemo(() => {
-    const values = Object.values(formValues)
-      .filter(Boolean)
-      .filter(
-        (product) =>
-          relyOnPeopleCategoryIds.includes(product.productsCategoryId) &&
-          product.quantity > 0
-      );
-
-    return Boolean(values.length);
-  }, [formValues, relyOnPeopleCategoryIds]);
-
-  useEffect(() => {
-    scrollToElement(headerRef.current);
-  }, []);
-
-  useEffect(() => {
-    if (!isFormValuesEmpty(formValues)) {
-      clearErrors(NO_ORDER_ITEMS_ERROR);
-    }
-  }, [formValues, clearErrors]);
-
-  const descriptionWrapperStyle = {
-    "--description-wrapper-height": isDescriptionExpanded ? "inherit" : "8rem",
-  } as CSSProperties;
-
-  return (
-    <Form onSubmit={handleSubmit(submitCurrentForm, onErrorSubmit)}>
-      <FormProvider {...form}>
-        <div className="iframe-event">
-          <div className="iframe-event__header" ref={headerRef}>
-            {imageSrc && (
-              <Image src={imageSrc} width="300rem" height="250rem" />
-            )}
-            <div className={clsx(imageSrc && "ml-5")}>
-              <Badge variant="dark" className="iframe-event__badge">
-                {date}
-              </Badge>
-              <h5 className="mt-3 iframe-event__title">{title}</h5>
-              <div className="d-flex flex-wrap justify-content-between">
-                {cost !== undefined && (
-                  <div>
-                    <div className="iframe-event-card__label">{t("cost")}</div>
-                    <div className="iframe-event-card__bold">
-                      {t("from")}{" "}
-                      {formatNumber(cost, {
-                        style: "currency",
-                        currency: "GBP",
-                      })}
-                    </div>
-                  </div>
-                )}
-              </div>
-            </div>
-          </div>
-          {!!description && (
-            <div
-              className="iframe-event__description-wrapper"
-              style={descriptionWrapperStyle}
-            >
-              {description.length > DESCRIPTION_MAX_LENGTH ? (
-                <TextExpand
-                  className="iframe-event__description my-6"
-                  isExpanded={isDescriptionExpanded}
-                  setIsExpanded={setIsDescriptionExpanded}
-                >
-                  <TipTapEditor viewMode disabled content={description} />
-                </TextExpand>
-              ) : (
-                <div className="my-6">
-                  <TipTapEditor viewMode disabled content={description} />
-                </div>
-              )}
-            </div>
-          )}
-          {!!menu && (
-            <>
-              {menu.menuSteps[step].name && (
-                <h3 className="iframe-event__name">
-                  {menu.menuSteps[step].name}
-                </h3>
-              )}
-
-              <ProductCategoryView
-                productCategories={menu.menuSteps[step]?.productCategories}
-              />
-
-              {shouldShowPeopleInput && nextStep === numberOfSteps && (
-                <NumberOfPeopleInput />
-              )}
-              {errors[NO_ORDER_ITEMS_ERROR] && (
-                <div
-                  className="d-flex m-5 justify-content-center form-error"
-                  id={NO_ORDER_ITEMS_ERROR}
-                >
-                  <Trans
-                    t={t}
-                    i18nKey="pleaseSelectAtLeastFrom"
-                    values={{ min: 1, type: "item", from: "those categories" }}
-                  />
-                </div>
-              )}
-              <div className="iframe-event__footer">
-                <EventNavigationFooter
-                  isBuyNowDisabled={isBuyNowDisabled}
-                  amount={numberOfSteps}
-                  activeElement={nextStep}
-                  onPrevClick={onPrevClick}
-                  onNextClick={onNextClick}
-                  onPrevStep={onPrevStep}
-                />
-              </div>
-            </>
-          )}
-        </div>
-      </FormProvider>
-    </Form>
-  );
-}

package/src/iframe/event/event-details/components/event-details-form/index.ts

@@ -1,5 +0,0 @@
-export {
-  EventDetailsForm,
-  EventDetailsFormProps,
-  WizardFormProps,
-} from "./EventDetailsForm";

package/src/iframe/event/event-details/components/number-of-people-input/component/index.ts

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

package/src/iframe/event/event-details/components/number-of-people-input/index.ts

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

package/src/iframe/event/event-details/components/product-category-view/ProductCategoryView.tsx

@@ -1,34 +0,0 @@
-import React from "react";
-
-import { ProductCategory } from "../../../../../types";
-import { CategoryProduct } from "../category-product";
-
-interface ProductCategoryViewProps {
-  productCategories: ProductCategory[];
-}
-
-export function ProductCategoryView({
-  productCategories,
-}: ProductCategoryViewProps) {
-  return (
-    <>
-      {productCategories.length !== 0 &&
-        productCategories.map((category) => {
-          return (
-            <div key={category.id} className="iframe-event__category">
-              <h4 className="iframe-event__name">{category.name}</h4>
-              {category.products.map((product) => {
-                return (
-                  <CategoryProduct
-                    key={product.id}
-                    product={product}
-                    category={category}
-                  />
-                );
-              })}
-            </div>
-          );
-        })}
-    </>
-  );
-}

package/src/iframe/event/event-details/components/product-category-view/index.ts

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

package/src/iframe/event/event-details/index.ts

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

package/src/iframe/event/event-details/utils/index.ts

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

package/src/iframe/event/event-details/utils/routes.ts

@@ -1,6 +0,0 @@
-const STEP_PATH_PREFIX = "step_";
-
-export const routesByStepsCount = (count: number) =>
-  Array.from({ length: count }, (_v, i) => i).map(
-    (stepIndex: number) => `/${STEP_PATH_PREFIX}${stepIndex}`
-  );