@licklist/design 0.44.485-dev.9 → 0.44.485-dev.90

package/src/assets/dashboard/bookingList.svg

@@ -1,68 +0,0 @@
-<svg
-  width="44"
-  height="44"
-  viewBox="0 0 44 44"
-  fill="none"
-  xmlns="http://www.w3.org/2000/svg"
->
-  <g clip-path="url(#clip0_0_2707)">
-    <rect width="44" height="44" rx="8" fill="currentColor" />
-    <path
-      d="M13.7334 10L15 11.4607L11.2111 15L9 12.9346L10.2666 11.4739L11.2105 12.3555L13.7334 10Z"
-      fill="black"
-    />
-    <rect
-      opacity="0.5"
-      x="17"
-      y="12"
-      width="18"
-      height="2"
-      rx="1"
-      fill="black"
-    />
-    <path
-      d="M13.7334 16L15 17.4607L11.2111 21L9 18.9346L10.2666 17.4739L11.2105 18.3555L13.7334 16Z"
-      fill="black"
-    />
-    <rect
-      opacity="0.5"
-      x="17"
-      y="18"
-      width="18"
-      height="2"
-      rx="1"
-      fill="black"
-    />
-    <path
-      d="M13.7334 22L15 23.4607L11.2111 27L9 24.9346L10.2666 23.4739L11.2105 24.3555L13.7334 22Z"
-      fill="black"
-    />
-    <rect
-      opacity="0.5"
-      x="17"
-      y="24"
-      width="18"
-      height="2"
-      rx="1"
-      fill="black"
-    />
-    <path
-      d="M13.7334 28L15 29.4607L11.2111 33L9 30.9346L10.2666 29.4739L11.2105 30.3555L13.7334 28Z"
-      fill="black"
-    />
-    <rect
-      opacity="0.5"
-      x="17"
-      y="30"
-      width="18"
-      height="2"
-      rx="1"
-      fill="black"
-    />
-  </g>
-  <defs>
-    <clipPath id="clip0_0_2707">
-      <rect width="44" height="44" fill="white" />
-    </clipPath>
-  </defs>
-</svg>

package/src/assets/dashboard/bookingListSmall.svg

@@ -1,6 +0,0 @@
-<svg width="16" height="18" viewBox="0 0 16 18" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <rect x="1" y="1" width="14" height="16" stroke="currentColor" stroke-width="2"/>
-  <rect x="4" y="4" width="8" height="2" fill="currentColor"/>
-  <rect x="4" y="8" width="8" height="2" fill="currentColor"/>
-  <rect x="4" y="12" width="8" height="2" fill="currentColor"/>
-</svg>

package/src/assets/dashboard/fullscreen.svg

@@ -1,3 +0,0 @@
-<svg width="6" height="14" viewBox="0 0 6 14" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <path fill-rule="evenodd" clip-rule="evenodd" d="M6 6V0H0V2H4V6H6ZM0 14H6V8H4V12H0V14Z" fill="currentColor"/>
-</svg>

package/src/assets/dashboard/minimize.svg

@@ -1,3 +0,0 @@
-<svg width="6" height="14" viewBox="0 0 6 14" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <path fill-rule="evenodd" clip-rule="evenodd" d="M0 0V6H6V4H2V0H0ZM6 8H0V14H2V10H6V8Z" fill="currentColor"/>
-</svg>

package/src/assets/dashboard/refresh.svg

@@ -1,4 +0,0 @@
-<svg width="20" height="24" viewBox="0 0 20 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <path d="M10 5.00677C5.02944 5.00677 1 8.94404 1 13.8009C1 18.6578 5.02944 22.595 10 22.595V22.595C14.9706 22.595 19 18.6578 19 13.8009" stroke="currentColor" stroke-width="2"/>
-  <path fill-rule="evenodd" clip-rule="evenodd" d="M8.76142 5.25122V0L17.0691 4.98499L8.76142 10.5024V5.25122Z" fill="currentColor"/>
-</svg>

package/src/assets/widgets/circlePlus.svg

@@ -1,4 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
-    <circle cx="10" cy="10" r="10" fill="#0E8CE2"/>
-    <path fill-rule="evenodd" clip-rule="evenodd" d="M11 5H9V9H5V11H9V15H11V11H15V9H11V5Z" fill="white"/>
-</svg>

package/src/assets/widgets/inPage.svg

@@ -1,10 +0,0 @@
-<svg width="120" height="68" viewBox="0 0 120 68" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect x="0.5" y="0.5" width="119" height="67" rx="3.5" fill="white" stroke="#DCDCDC"/>
-<rect x="8.5" y="9.25" width="103" height="3" rx="1.5" fill="white" stroke="#FF0099"/>
-<rect x="8.5" y="15.5" width="82" height="45.7283" rx="3.5" fill="#F8F8F8" stroke="#FF0099"/>
-<path d="M0 2.5C0 1.11929 1.11929 0 2.5 0H117.5C118.881 0 120 1.11929 120 2.5V6H0V2.5Z" fill="#D8D8D8"/>
-<circle cx="3.5" cy="3" r="1" fill="#FF1111"/>
-<circle cx="6.5" cy="3" r="1" fill="#FFE311"/>
-<circle cx="9.5" cy="3" r="1" fill="#11FF52"/>
-<rect x="93.5" y="15.7715" width="18" height="45.7283" rx="3.5" fill="#D8D8D8" stroke="#FF0099"/>
-</svg>

package/src/assets/widgets/overlay.svg

@@ -1,9 +0,0 @@
-<svg width="120" height="68" viewBox="0 0 120 68" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect x="0.5" y="0.5" width="119" height="67" rx="3.5" fill="white" stroke="#DCDCDC"/>
-<rect x="28.5" y="17.5" width="63" height="35" rx="3.5" fill="#F8F8F8" stroke="#FF0099"/>
-<path d="M0 2.5C0 1.11929 1.11929 0 2.5 0H117.5C118.881 0 120 1.11929 120 2.5V6H0V2.5Z" fill="#D8D8D8"/>
-<circle cx="3.5" cy="3" r="1" fill="#FF1111"/>
-<circle cx="6.5" cy="3" r="1" fill="#FFE311"/>
-<circle cx="9.5" cy="3" r="1" fill="#11FF52"/>
-<path d="M76 18H88C89.6569 18 91 19.3431 91 21V49C91 50.6569 89.6569 52 88 52H76V18Z" fill="#D8D8D8"/>
-</svg>

package/src/assets/widgets/sidebar.svg

@@ -1,9 +0,0 @@
-<svg width="120" height="68" viewBox="0 0 120 68" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect x="0.5" y="0.5" width="119" height="67" rx="3.5" fill="white" stroke="#DCDCDC"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M116 66.5H92.5C90.2909 66.5 88.5 64.7091 88.5 62.5L88.5 10.5C88.5 8.29086 90.2909 6.5 92.5 6.5L119 6.5V63.5C119 63.5 119 64.5 118 65.5C117 66.5 116 66.5 116 66.5Z" fill="#F8F8F8" stroke="#FF0099"/>
-<path d="M0 2.5C0 1.11929 1.11929 0 2.5 0H117.5C118.881 0 120 1.11929 120 2.5V6H0V2.5Z" fill="#D8D8D8"/>
-<circle cx="3.5" cy="3" r="1" fill="#FF1111"/>
-<circle cx="6.5" cy="3" r="1" fill="#FFE311"/>
-<circle cx="9.5" cy="3" r="1" fill="#11FF52"/>
-<path d="M118.5 51V63C118.5 64.6569 117.157 66 115.5 66H92C90.3431 66 89 64.6569 89 63V51L118.5 51Z" fill="#D8D8D8"/>
-</svg>

package/src/iframe/order-process/OrderProcess.stories.tsx

@@ -1,362 +0,0 @@
-import React, {
-  useEffect,
-  useState,
-  useContext,
-  createContext,
-  useRef,
-  useMemo,
-} from "react";
-import { MemoryRouter, Route, useHistory } from "react-router-dom";
-import { Meta } from "@storybook/react";
-import { Timer } from "./components/Timer";
-import { BookingSummary } from "./components/BookingSummary";
-import { NavigationSteps } from "./components/NavigationSteps";
-import { StepsForm } from "./components/StepsForm";
-import { Page, PageBody, PageHeader } from "../page";
-import { StepsFormRef } from "./components/StepsForm/StepsForm";
-import { BookingSummaryFooter } from "./components/BookingSummaryFooter";
-import { Order } from "../../types";
-// eslint-disable-next-line max-len
-import { RenderNumberOfPeopleInputComponent } from "../event/event-details/components/number-of-people-input/component/RenderNumberOfPeopleInputComponent";
-
-const ROUTES = [
-  { pathname: "/step1", key: "/step1", name: "Burger" },
-  { pathname: "/step2", key: "/step2", name: "Cheese" },
-];
-
-const IMAGES = [
-  {
-    id: 1,
-    path: "test",
-    imageType: "image",
-    url: "https://fastly.picsum.photos/id/13/2500/1667.jpg?hmac=SoX9UoHhN8HyklRA4A3vcCWJMVtiBXUg0W4ljWTor7s",
-  },
-];
-
-const productCategories = [
-  {
-    id: 1,
-    name: "Early Bird General Admission",
-    allowDeposits: true,
-    minSubItems: 2,
-    products: [
-      {
-        id: 7,
-        name: "Beer",
-        description: `Ticket <em>is</em> 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.`,
-
-        price: 5,
-        deposit: 3,
-        isRequired: true,
-        images: IMAGES,
-      },
-      {
-        id: 8,
-        name: "Wine",
-        description: `Ticket is valid for students and non students.
-           You do not need <strong>student ID</strong> 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.`,
-
-        price: 1,
-        images: IMAGES,
-      },
-    ],
-  },
-  {
-    id: 2,
-    name: "Nice",
-    maxSubItems: 1,
-    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.`,
-
-        price: 1,
-        images: IMAGES,
-        maxAmount: 1,
-        minAmount: 1,
-        isRequired: true,
-      },
-      {
-        id: 5,
-        name: "Wine",
-        description: `Ticket is valid for students and non students.
-           You do not need <strong>student ID</strong> 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.`,
-
-        price: 1,
-      },
-    ],
-  },
-];
-
-const productCategories2 = [
-  {
-    id: 3,
-    name: "fine",
-    products: [
-      {
-        id: 9,
-        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.`,
-
-        price: 1,
-      },
-      {
-        id: 10,
-        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.`,
-
-        price: 1,
-      },
-    ],
-  },
-  {
-    id: 4,
-    name: "Twice",
-    products: [
-      {
-        id: 11,
-        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.`,
-
-        price: 1,
-      },
-      {
-        id: 12,
-        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.`,
-
-        price: 1,
-      },
-    ],
-  },
-];
-
-const menuSteps = [
-  {
-    id: 1,
-    name: "Burger",
-    productCategories,
-  },
-  {
-    id: 2,
-    name: "Cheese",
-    productCategories: productCategories2,
-  },
-];
-
-const OrderProcessContext = createContext<{
-  orderFormValues: Record<string, any>;
-  setOrderFormValues: (values: Record<string, any>) => void;
-  formValues: Record<string, any>;
-  setFormValues: (values: Record<string, any>) => void;
-}>({
-  orderFormValues: {},
-  setOrderFormValues: () => undefined,
-  formValues: {},
-  setFormValues: () => undefined,
-});
-
-const OrderProcessContextProvider: React.FC = ({ children }) => {
-  const [orderFormValues, setOrderFormValues] = useState<Record<string, any>>(
-    {}
-  );
-  const [formValues, setFormValues] = useState<Record<string, any>>({});
-
-  return (
-    <OrderProcessContext.Provider
-      value={{
-        orderFormValues,
-        setOrderFormValues,
-        formValues,
-        setFormValues,
-      }}
-    >
-      {children}
-    </OrderProcessContext.Provider>
-  );
-};
-
-export default {
-  title: "Iframe/Order-Process/OrderProcess",
-  component: Default,
-} as Meta;
-
-const TimerWrapper = () => {
-  const [timer, setTimer] = useState(60);
-  const updateTimerState = () => {
-    setTimer((prevValue) => {
-      if (prevValue <= 0) {
-        return 0;
-      }
-
-      const nexValue = prevValue - 1;
-
-      return nexValue;
-    });
-  };
-
-  useEffect(() => {
-    setInterval(updateTimerState, 1000);
-  }, []);
-
-  return <Timer timer={timer} />;
-};
-
-export function Default() {
-  const externalHistory = useHistory();
-  const formRef = useRef<StepsFormRef | null>(null);
-  const [peopleAmount, setPeopleAmount] = useState(0);
-  const [peopleAmountError, setPeopleAmountError] = useState(false);
-
-  return (
-    <MemoryRouter initialEntries={ROUTES} initialIndex={0}>
-      <OrderProcessContextProvider>
-        {ROUTES.map(({ pathname }, index) => {
-          const step = menuSteps[index];
-
-          return (
-            <Route
-              path={pathname}
-              exact
-              key={pathname}
-              component={() => {
-                const history = useHistory();
-                const {
-                  orderFormValues,
-                  setOrderFormValues,
-                  formValues,
-                  setFormValues,
-                } = useContext(OrderProcessContext);
-                const relyOnPeopleCategoryIds = [4];
-                const onPrevStep = () => {
-                  if (formRef.current?.getFormValues()) {
-                    setFormValues(formRef.current?.getFormValues());
-                  }
-
-                  if (index === 0) {
-                    // external History push
-                    externalHistory.push("/");
-                    return;
-                  }
-
-                  history.push(ROUTES[index - 1].pathname);
-                };
-
-                const onNextStep = (values: Record<string, any>) => {
-                  setOrderFormValues(values);
-                  const nextRoute = ROUTES[index + 1];
-                  if (nextRoute) {
-                    history.push(ROUTES[index + 1].pathname);
-                  }
-                };
-
-                const shouldShowPeopleInput = useMemo(() => {
-                  const values = Object.values(formValues).filter(
-                    Boolean
-                  ) as Order[];
-                  const filteredValues = values.filter(
-                    (product) =>
-                      relyOnPeopleCategoryIds.includes(
-                        product.productsCategoryId
-                      ) && product.quantity > 0
-                  );
-
-                  return Boolean(filteredValues.length);
-                }, [formValues, relyOnPeopleCategoryIds]);
-                const onChangePeopleAmount = (value: number) => {
-                  if (!setPeopleAmount) {
-                    return;
-                  }
-                  setPeopleAmount(value);
-                  if (value > 0) {
-                    if (peopleAmountError) {
-                      setPeopleAmountError(false);
-                    }
-                    return;
-                  }
-
-                  setPeopleAmountError(true);
-                };
-
-                return (
-                  <Page
-                    headerBlock={
-                      <PageHeader
-                        showCloseButton
-                        onCloseButtonClick={onPrevStep}
-                        showBackButton
-                        onBackButtonClick={onPrevStep}
-                      >
-                        <TimerWrapper />
-                        <NavigationSteps steps={ROUTES} />
-                      </PageHeader>
-                    }
-                  >
-                    <PageBody
-                      leftBlock={
-                        <PageBody.LeftBlock title={step.name}>
-                          <StepsForm
-                            isLastMenuStep={!ROUTES[index + 1]}
-                            step={step as any}
-                            setFormValues={setFormValues}
-                            defaultValues={orderFormValues}
-                            onSubmit={onNextStep}
-                            ref={formRef}
-                          />
-                        </PageBody.LeftBlock>
-                      }
-                      rightBlock={
-                        <PageBody.RightBlock
-                          bottomBlock={
-                            <BookingSummaryFooter>
-                              {shouldShowPeopleInput && (
-                                <RenderNumberOfPeopleInputComponent
-                                  peopleAmount={peopleAmount || 0}
-                                  onChangePeopleAmount={onChangePeopleAmount}
-                                  peopleAmountError={peopleAmountError}
-                                />
-                              )}
-                              <BookingSummary.SummaryTotal
-                                formValues={formValues}
-                                totalWithDiscount={5}
-                              />
-                            </BookingSummaryFooter>
-                          }
-                        >
-                          <BookingSummary
-                            hasPeopleInput={shouldShowPeopleInput}
-                            date="29 Sept 2022 at 09:00"
-                            menuSteps={menuSteps as any}
-                            formValues={formValues}
-                            peopleAmount={peopleAmount}
-                            totalWithDiscount={5}
-                            eventName="Glam!"
-                          />
-                        </PageBody.RightBlock>
-                      }
-                    />
-                  </Page>
-                );
-              }}
-            />
-          );
-        })}
-      </OrderProcessContextProvider>
-    </MemoryRouter>
-  );
-}

package/src/iframe/order-process/components/Category/Category.stories.tsx

@@ -1,118 +0,0 @@
-import React from "react";
-import { Meta } from "@storybook/react";
-import { useForm, FormProvider } from "react-hook-form";
-import { Image } from "@licklist/core/dist/DataMapper/Media/ImageDataMapper";
-import { Category } from "./Category";
-
-export default {
-  title: "Iframe/Order-Process/Category",
-  component: Category,
-} as Meta;
-
-const IMAGES = [
-  {
-    id: 1,
-    path: "test",
-    imageType: "image",
-    url: "https://fastly.picsum.photos/id/13/2500/1667.jpg?hmac=SoX9UoHhN8HyklRA4A3vcCWJMVtiBXUg0W4ljWTor7s",
-  } as Image,
-];
-
-const productCategories = [
-  {
-    id: 1,
-    name: "Early Bird General Admission",
-    allowDeposits: true,
-    remainderExpireAfter: null,
-    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.`,
-        minQuantity: 1,
-        maxQuantity: 10,
-        price: 7,
-        images: IMAGES,
-        isRequired: true,
-        deposit: 4,
-      },
-      {
-        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.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,
-        isSoldOut: true,
-        images: IMAGES,
-      },
-    ],
-  },
-  {
-    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,
-        images: [],
-      },
-      {
-        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,
-        images: IMAGES,
-      },
-    ],
-  },
-  {
-    id: 9,
-    name: "Super",
-    products: [
-      {
-        id: 10,
-        name: "Beer no description",
-        description: ``,
-        minQuantity: 1,
-        maxQuantity: 10,
-        price: 1,
-        images: IMAGES,
-      },
-      {
-        id: 11,
-        name: "Wine no description",
-        description: ``,
-        minQuantity: 1,
-        maxQuantity: 10,
-        price: 0,
-        images: IMAGES,
-      },
-    ],
-  },
-];
-
-export function Default() {
-  const form = useForm();
-  return (
-    <FormProvider {...form}>
-      <div className="payment-process">
-        <Category productCategories={productCategories} />
-      </div>
-    </FormProvider>
-  );
-}

package/src/iframe/order-process/components/Category/Category.tsx

@@ -1,48 +0,0 @@
-import React from "react";
-
-import { DeepMap, FieldError } from "react-hook-form";
-import { ProductCategory } from "../../../../types";
-import { CategoryProduct } from "../CategoryProduct";
-import { StepsFormProps } from "../StepsForm/StepsForm";
-
-interface CategoryProps {
-  productCategories: ProductCategory[];
-  productsWithErrors?: StepsFormProps["productsWithErrors"];
-  errors?: DeepMap<Record<string, any>, FieldError>;
-}
-
-export function Category({
-  productCategories,
-  productsWithErrors,
-  errors,
-}: CategoryProps) {
-  return (
-    <>
-      {productCategories.length !== 0 &&
-        productCategories.map((category) => {
-          const categoryError = errors?.[`category_${category.id}`];
-          return (
-            <div key={category.id} className="iframe-event__category">
-              <h4 className="iframe-event__name">{category.name}</h4>
-              {categoryError && (
-                <div className="iframe-event__message-error">
-                  {categoryError?.message}
-                </div>
-              )}
-
-              {category.products.map((product) => {
-                return (
-                  <CategoryProduct
-                    key={product.id}
-                    product={product}
-                    category={category}
-                    productsWithErrors={productsWithErrors}
-                  />
-                );
-              })}
-            </div>
-          );
-        })}
-    </>
-  );
-}

package/src/iframe/order-process/components/Category/index.ts

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