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

package/src/assets/dashboard/bookingCalendar.svg

@@ -1,67 +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_4)">
-    <rect width="44" height="44" rx="8" fill="currentColor" />
-    <path
-      fill-rule="evenodd"
-      clip-rule="evenodd"
-      d="M14 9C14 8.44772 14.4477 8 15 8C15.5523 8 16 8.44772 16 9V10H21V9C21 8.44772 21.4477 8 22 8C22.5523 8 23 8.44772 23 9V10H28V9C28 8.44772 28.4477 8 29 8C29.5523 8 30 8.44772 30 9V10H32C34.2091 10 36 11.7909 36 14V16V18V32C36 33.1046 35.1046 34 34 34H10C8.89543 34 8 33.1046 8 32V18V16V14C8 11.7909 9.79086 10 12 10H14V9ZM23 12H28V13C28 13.5523 28.4477 14 29 14C29.5523 14 30 13.5523 30 13V12H32L32.1493 12.0055C33.1841 12.0818 34 12.9456 34 14V16H10V14C10 12.8954 10.8954 12 12 12H14V13C14 13.5523 14.4477 14 15 14C15.5523 14 16 13.5523 16 13V12H21V13C21 13.5523 21.4477 14 22 14C22.5523 14 23 13.5523 23 13V12ZM10 18V32H34V18H10ZM31.669 26.7433L30.331 25.2567L27.666 27.654L26.669 26.7567L25.331 28.2433L27.6667 30.3454L31.669 26.7433Z"
-      fill="black"
-    />
-    <rect
-      opacity="0.5"
-      x="13"
-      y="20"
-      width="4"
-      height="4"
-      rx="1"
-      fill="black"
-    />
-    <rect
-      opacity="0.5"
-      x="20"
-      y="20"
-      width="4"
-      height="4"
-      rx="1"
-      fill="black"
-    />
-    <rect
-      opacity="0.5"
-      x="13"
-      y="26"
-      width="4"
-      height="4"
-      rx="1"
-      fill="black"
-    />
-    <rect
-      opacity="0.5"
-      x="20"
-      y="26"
-      width="4"
-      height="4"
-      rx="1"
-      fill="black"
-    />
-    <rect
-      opacity="0.5"
-      x="27"
-      y="20"
-      width="4"
-      height="4"
-      rx="1"
-      fill="black"
-    />
-  </g>
-  <defs>
-    <clipPath id="clip0_0_4">
-      <rect width="44" height="44" fill="white" />
-    </clipPath>
-  </defs>
-</svg>

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>
-  );
-}