@licklist/design 0.44.485-dev.87 → 0.44.485-dev.89

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,51 +0,0 @@
-import React from "react";
-
-import { DeepMap, FieldError } from "react-hook-form";
-import { QuantityCheckProductInfo } from "@licklist/plugins/dist/types/Api/verifyStock";
-import { ProductCategory } from "../../../../types";
-import { CategoryProduct } from "../CategoryProduct";
-
-interface CategoryProps {
-  productCategories: ProductCategory[];
-  productsWithErrors?: QuantityCheckProductInfo[];
-  soldOutProducts?: QuantityCheckProductInfo[];
-  errors?: DeepMap<Record<string, any>, FieldError>;
-}
-
-export function Category({
-  productCategories,
-  productsWithErrors,
-  errors,
-  soldOutProducts,
-}: 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}
-                    soldOutProducts={soldOutProducts}
-                  />
-                );
-              })}
-            </div>
-          );
-        })}
-    </>
-  );
-}

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

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

package/src/iframe/select-date-time/SelectDateAndTimeList.tsx

@@ -1,39 +0,0 @@
-import React, { useState } from "react";
-import { useTranslation } from "react-i18next";
-import { SelectorDateAndTimeList } from "./component/date-container/SelectorDateAndTimeList";
-import { ReactComponent as CalendarSvg } from "../../assets/iframe/calendar.svg";
-
-export const SelectDateAndTimeList = () => {
-  const [eventDayId, setEventDayId] = useState<number>();
-  const [eventTimeId, setEventTimeId] = useState<number>();
-  const { t } = useTranslation(["Design"]);
-  const dayList = [];
-  const timeList = [];
-  return (
-    <div>
-      <div className="date-time-icon-container">
-        <div className="icon-wrapper">
-          <CalendarSvg className="icon" />
-        </div>
-        <h5>{t("selectDate")}</h5>
-      </div>
-      <div>
-        <SelectorDateAndTimeList
-          title={t("selectDateAndTime")}
-          dateList={dayList}
-          selectedDateId={eventDayId}
-          onSelectDate={setEventDayId}
-        />
-      </div>
-      <div>
-        <SelectorDateAndTimeList
-          title={t("selectYourTime")}
-          isTimeContainer
-          dateList={timeList}
-          selectedDateId={eventTimeId}
-          onSelectDate={setEventTimeId}
-        />
-      </div>
-    </div>
-  );
-};

package/src/iframe/select-date-time/SelectDateOrTimeList.tsx

@@ -1,42 +0,0 @@
-import React, { useState } from "react";
-import { useTranslation } from "react-i18next";
-import { SelectorDateAndTimeList } from "./component/date-container/SelectorDateAndTimeList";
-import { viewType } from "../data-time-view-selector/constants";
-import { ReactComponent as CalendarSvg } from "../../assets/iframe/calendar.svg";
-
-type SelectDateOrTimeListProps = {
-  view: viewType.DATE | viewType.TIME;
-};
-
-export const SelectDateOrTimeList = ({ view }: SelectDateOrTimeListProps) => {
-  const [dateId, setDateId] = useState<number>();
-  const { t } = useTranslation("Design");
-  const dayList = [];
-  const timeList = [];
-  const isTimeSelector = view === viewType.TIME;
-  const listTitle = isTimeSelector ? t("selectorTime") : t("selectDate");
-  const dateList = isTimeSelector ? timeList : dayList;
-
-  return (
-    <div>
-      {!isTimeSelector && (
-        <div className="date-time-icon-container">
-          <div className="icon-wrapper">
-            <CalendarSvg className="icon" />
-          </div>
-          <h5>{t("selectDate")}</h5>
-        </div>
-      )}
-      <div>
-        <SelectorDateAndTimeList
-          title={listTitle}
-          dateList={dateList}
-          isTimeContainer={isTimeSelector}
-          selectedDateId={dateId}
-          onSelectDate={setDateId}
-          isOnlyTimeContainer={isTimeSelector}
-        />
-      </div>
-    </div>
-  );
-};

package/src/iframe/select-date-time/component/date-container/DateTimeSelector.tsx

@@ -1,79 +0,0 @@
-import React, { useMemo } from "react";
-import clsx from "clsx";
-import { Logo } from "../../../../logo";
-import { ReactComponent as LimitedSvg } from "../../../../assets/iframe/dateInfo/limited.svg";
-import { ReactComponent as AvailableSvg } from "../../../../assets/iframe/dateInfo/available.svg";
-import { ReactComponent as SoldOutSvg } from "../../../../assets/iframe/dateInfo/soldOut.svg";
-import { infoLogoType } from "../../constants";
-
-export type DateAndTimeProps = {
-  date: any;
-  selected: boolean;
-  onSelectDate?: (id: number) => void;
-  isTimeContainer?: boolean;
-  isOnlyTimeContainer?: boolean;
-};
-
-export const DateTimeSelector = ({
-  date,
-  isTimeContainer,
-  selected,
-  onSelectDate,
-  isOnlyTimeContainer,
-}: DateAndTimeProps) => {
-  const { title, disabled, info, description, id, time } = date;
-
-  const onClick = () => {
-    if (disabled) return;
-    onSelectDate(id);
-  };
-
-  const infoLogo = useMemo(() => {
-    if (info?.logo === infoLogoType.LIMIT) {
-      return <LimitedSvg />;
-    }
-    if (info?.logo === infoLogoType.AVAILABLE) {
-      return <AvailableSvg />;
-    }
-    if (info?.logo === infoLogoType.SOLD_OUT) {
-      return <SoldOutSvg />;
-    }
-    return null;
-  }, [info]);
-
-  return (
-    <div
-      role="button"
-      onClick={onClick}
-      onKeyPress={onClick}
-      className={clsx(
-        "date-set",
-        disabled && "disabled",
-        selected && "selected",
-        isTimeContainer && "time-container",
-        isOnlyTimeContainer && "only-time-container"
-      )}
-      tabIndex={0}
-    >
-      {title}
-      {time && <div className="time">{time}</div>}
-      {description && (
-        <div
-          className={clsx(
-            "descriptions",
-            selected && "selected",
-            disabled && "disabled"
-          )}
-        >
-          {description}
-        </div>
-      )}
-      {info && (
-        <div className="info">
-          {info.logo && <Logo className="logo" logo={infoLogo} />}
-          <div>{info.description}</div>
-        </div>
-      )}
-    </div>
-  );
-};

package/src/iframe/select-date-time/component/date-container/SelectorDateAndTimeList.stories.tsx

@@ -1,164 +0,0 @@
-import React, { useState } from "react";
-import { Meta } from "@storybook/react";
-import { SelectorDateAndTimeList } from "./SelectorDateAndTimeList";
-import { Form } from "react-bootstrap";
-import { ReactComponent as CalendarSvg } from "../../../../assets/iframe/calendar.svg";
-
-export default {
-  title: "Iframe/Date Selector",
-  component: SelectorDateAndTimeList,
-} as Meta;
-
-export function Default() {
-  const [dayId, setDayId] = useState<number>();
-  const [timeId, setTimeId] = useState<number>();
-  const [timeWithInfoId, setTimeWithInfoId] = useState<number>();
-
-  const dayList = [
-    {
-      id: 1,
-      title: "TODAY",
-      descriptions: "13th March",
-    },
-    {
-      id: 2,
-      title: "TODAY",
-      disabled: true,
-      description: "13th March",
-    },
-    {
-      id: 3,
-      title: "TOMORROW",
-      description: "13th March",
-    },
-    {
-      id: 4,
-      title: "TOMORROW",
-      description: "13th March",
-    },
-    {
-      id: 5,
-      title: "TOMORROW",
-      description: "13th March",
-    },
-  ];
-
-  const dayListWithInfo = [
-    {
-      id: 1,
-      title: "TODAY",
-      description: "13th March",
-      info: {
-        description: "test",
-        logo: "limit",
-      }
-    },
-    {
-      id: 2,
-      title: "TODAY",
-      disabled: true,
-      description: "13th March",
-      info: {
-        description: "test",
-        logo: "soldOut",
-      }
-    },
-    {
-      id: 3,
-      title: "TOMORROW",
-      description: "13th March",
-      info: {
-        description: "test",
-        logo: "limit",
-      }
-    },
-    {
-      id: 4,
-      title: "TOMORROW",
-      description: "13th March",
-      info: {
-        description: "test",
-        logo: "available",
-      }
-    },
-    {
-      id: 5,
-      title: "TOMORROW",
-      descriptions: "13th March",
-      info: {
-        description: "test",
-        logo: "available",
-      }
-    },
-  ];
-
-  const timeList = [
-    {
-      id: 1,
-      time: "10:30",
-    },
-    {
-      id: 2,
-      time: "11:30",
-    },
-    {
-      id: 3,
-      time: "12:30",
-    },
-    {
-      id: 4,
-      time: "13:30",
-    },
-    {
-      id: 5,
-      time: "14:30",
-    },
-    {
-      id: 6,
-      time: "11:30",
-      disabled: true,
-    },
-    {
-      id: 7,
-      time: "12:30",
-    },
-  ];
-
-  return (
-    <div>
-      <div className="date-time-icon-container">
-        <div className="icon-wrapper">
-          <CalendarSvg className='icon' />
-        </div>
-        <h5>{"Select Date"}</h5>
-      </div>
-    <Form>
-      <Form.Group>
-        <SelectorDateAndTimeList
-          title="Select Date & Time"
-          dateList={dayList}
-          selectedDateId={dayId}
-          onSelectDate={setDayId}
-        />
-      </Form.Group>
-      <Form.Group>
-        <SelectorDateAndTimeList
-          title="Select your Date with Info"
-          dateList={dayListWithInfo}
-          selectedDateId={timeWithInfoId}
-          onSelectDate={setTimeWithInfoId}
-        />
-      </Form.Group>
-      <Form.Group>
-        <SelectorDateAndTimeList
-          title="Select your Time"
-          dateList={timeList}
-          isTimeContainer
-          selectedDateId={timeId}
-          onSelectDate={setTimeId}
-        />
-      </Form.Group>
-    </Form>
-    </div>
-  );
-}

package/src/iframe/select-date-time/component/date-container/SelectorDateAndTimeList.tsx

@@ -1,41 +0,0 @@
-import React from "react";
-import clsx from "clsx";
-import { DateTimeSelector } from "./DateTimeSelector";
-
-export type SelectorDateAndTimeListProps = {
-  selectedDateId?: number;
-  onSelectDate?: (id: number) => void;
-  dateList: any[];
-  title?: string;
-  isTimeContainer?: boolean;
-  isOnlyTimeContainer?: boolean;
-};
-
-export const SelectorDateAndTimeList = ({
-  selectedDateId,
-  onSelectDate,
-  dateList,
-  title,
-  isTimeContainer,
-  isOnlyTimeContainer,
-}: SelectorDateAndTimeListProps) => {
-  return (
-    <>
-      <h5>{title}</h5>
-      <div className={clsx("date-list", isTimeContainer && "time-container")}>
-        {dateList.map((date) => {
-          return (
-            <DateTimeSelector
-              key={date.id}
-              date={date}
-              isTimeContainer={isTimeContainer}
-              selected={selectedDateId === date.id}
-              onSelectDate={onSelectDate}
-              isOnlyTimeContainer={isOnlyTimeContainer}
-            />
-          );
-        })}
-      </div>
-    </>
-  );
-};

package/src/iframe/select-date-time/constants.ts

@@ -1,5 +0,0 @@
-export enum infoLogoType {
-    LIMIT = "limit",
-    AVAILABLE = "available",
-    SOLD_OUT = "soldOut",
-  }

package/src/iframe/select-date-time/index.ts

@@ -1,4 +0,0 @@
-export { DateTimeSelector } from "./component/date-container/DateTimeSelector";
-export { SelectDateAndTimeList } from "./SelectDateAndTimeList";
-export { SelectDateOrTimeList } from "./SelectDateOrTimeList";
-

package/src/styles/iframe-customers-journey/SelectDateAndTime.scss

@@ -1,126 +0,0 @@
-.date-time-selector-container {
-    background-color: $snippet-page-background-color;
-    height: 35rem;
-    padding: 1rem;
-}
-
-.date-time-icon-container {
-    display: flex;
-    justify-content: end;
-    position: relative;
-    top: 2rem;
-
-    .icon-wrapper {
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-        width: 1rem;
-        height: 1.1rem;
-
-        .icon {
-            fill: $snippet-calendar-active-button-background-color;
-        }
-
-    }
-
-    h5 {
-        font-size: 1rem;
-        margin-left: .5rem;
-        text-transform: uppercase;
-    }
-}
-
-.date-list {
-    display: flex;
-    align-items: center;
-    justify-content: start;
-    grid-gap: 1rem;
-    margin: 1rem 0;
-    flex-wrap: wrap;
-
-    .date-set {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        flex-direction: column;
-        font-size: .82rem;
-        line-height: 1.3rem;
-        font-weight: 600;
-        background-color: $snippet-calendar-button-background-color;
-        border-radius: .4rem;
-        text-align: center;
-        border: 2px solid $snippet-calendar-button-border-color;
-        color: $snippet-calendar-button-font-color;
-        flex-grow: 1;
-        transition: $color-transition;
-        min-width: 6rem;
-        max-width: 7.25rem;
-        min-height: 3.3rem;
-        max-height: 8.375rem;
-
-
-        &.disabled {
-            border: 2px solid $snippet-calendar-disabled-button-border-color;
-            background-color: $snippet-calendar-disabled-button-background-color;
-            color: $snippet-calendar-disabled-button-font-color;
-
-            .descriptions {
-                color: $snippet-calendar-disabled-button-font-color;
-            }
-        }
-
-        &.selected {
-            border: 2px solid $snippet-calendar-active-button-border-color;
-            background-color: $snippet-calendar-active-button-background-color;
-            color: $snippet-calendar-active-button-font-color;
-            transition: $color-transition;
-
-            .descriptions {
-                color: $snippet-calendar-active-button-font-color;
-                background-color: $snippet-calendar-active-button-background-color;
-                font-weight: 600;
-                transition: $color-transition;
-            }
-
-            .time {
-                font-weight: 600;
-            }
-        }
-
-        &.time-container {
-            min-width: 4.75rem;
-            max-width: 4.75rem;
-            min-height: 2.75rem;
-        }
-
-        &.only-time-container {
-            min-width: 5.3rem;
-            max-width: 5.3rem;
-            min-height: 2.75rem;
-        }
-    }
-
-    .time {
-        font-size: .875rem;
-        font-weight: 300;
-    }
-
-    .descriptions {
-        font-size: .7rem;
-        line-height: 1.03rem;
-        font-weight: 300;
-        color: $snippet-calendar-button-font-color;
-    }
-
-    .info {
-        display: flex;
-        justify-content: center;
-        font-weight: 300;
-        flex-direction: row;
-
-        .logo {
-            width: .5rem;
-            margin-right: .5rem;
-        }
-    }
-}