@licklist/design 0.44.485-dev.79 → 0.44.485-dev.80

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

@@ -0,0 +1,39 @@
+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

@@ -0,0 +1,42 @@
+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/{SelectDateAndTimeEvent.tsx → DateTimeSelector.tsx}

@@ -1,36 +1,41 @@
 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 { Logo } from "../../../../logo";
+import { infoLogoType } from "../../constants";
 
-export type SelectDateAndTimeEventProps = {
+export type DateAndTimeProps = {
   date: any;
   selected: boolean;
-  onSelectProductSet?: (id: number) => void;
+  onSelectDate?: (id: number) => void;
+  isTimeContainer?: boolean;
+  isOnlyTimeContainer?: boolean;
 };
 
-export const SelectDateAndTimeEvent = ({
+export const DateTimeSelector = ({
   date,
+  isTimeContainer,
   selected,
-  onSelectProductSet,
-}: SelectDateAndTimeEventProps) => {
-  const { title, disabled, info, descriptions, id, time } = date;
+  onSelectDate,
+  isOnlyTimeContainer,
+}: DateAndTimeProps) => {
+  const { title, disabled, info, description, id, time } = date;
 
   const onClick = () => {
     if (disabled) return;
-    onSelectProductSet(id);
+    onSelectDate(id);
   };
 
   const infoLogo = useMemo(() => {
-    if (info?.logo === "limit") {
+    if (info?.logo === infoLogoType.LIMIT) {
       return <LimitedSvg />;
     }
-    if (info?.logo === "available") {
+    if (info?.logo === infoLogoType.AVAILABLE) {
       return <AvailableSvg />;
     }
-    if (info?.logo === "soldOut") {
+    if (info?.logo === infoLogoType.SOLD_OUT) {
       return <SoldOutSvg />;
     }
     return null;
@@ -42,16 +47,17 @@ export const SelectDateAndTimeEvent = ({
       onClick={onClick}
       onKeyPress={onClick}
       className={clsx(
-        "event-date-set",
+        "date-set",
         disabled && "disabled",
         selected && "selected",
-        time && "time-container"
+        isTimeContainer && "time-container",
+        isOnlyTimeContainer && "only-time-container"
       )}
       tabIndex={0}
     >
       {title}
       {time && <div className="time">{time}</div>}
-      {descriptions && (
+      {description && (
         <div
           className={clsx(
             "descriptions",
@@ -59,13 +65,13 @@ export const SelectDateAndTimeEvent = ({
             disabled && "disabled"
           )}
         >
-          {descriptions}
+          {description}
         </div>
       )}
       {info && (
         <div className="info">
           {info.logo && <Logo className="logo" logo={infoLogo} />}
-          <div>{info.descriptions}</div>
+          <div>{info.description}</div>
         </div>
       )}
     </div>

package/src/iframe/select-date-time/component/date-container/{SelectDateAndTimeEventList.stories.tsx → SelectorDateAndTimeList.stories.tsx}

@@ -1,17 +1,18 @@
 import React, { useState } from "react";
 import { Meta } from "@storybook/react";
-import { SelectDateAndTimeEventList } from "./SelectDateAndTimeEventList";
+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: SelectDateAndTimeEventList,
+  component: SelectorDateAndTimeList,
 } as Meta;
 
 export function Default() {
-  const [eventDayId, setEventDayId] = useState<number>();
-  const [eventTimeId, setEventTimeId] = useState<number>();
-  const [eventTimeWithInfoId, setEventTimeWithInfoId] = useState<number>();
+  const [dayId, setDayId] = useState<number>();
+  const [timeId, setTimeId] = useState<number>();
+  const [timeWithInfoId, setTimeWithInfoId] = useState<number>();
 
   const dayList = [
     {
@@ -23,22 +24,22 @@ export function Default() {
       id: 2,
       title: "TODAY",
       disabled: true,
-      descriptions: "13th March",
+      description: "13th March",
     },
     {
       id: 3,
       title: "TOMORROW",
-      descriptions: "13th March",
+      description: "13th March",
     },
     {
       id: 4,
       title: "TOMORROW",
-      descriptions: "13th March",
+      description: "13th March",
     },
     {
       id: 5,
       title: "TOMORROW",
-      descriptions: "13th March",
+      description: "13th March",
     },
   ];
 
@@ -46,9 +47,9 @@ export function Default() {
     {
       id: 1,
       title: "TODAY",
-      descriptions: "13th March",
+      description: "13th March",
       info: {
-        descriptions: "test",
+        description: "test",
         logo: "limit",
       }
     },
@@ -56,27 +57,27 @@ export function Default() {
       id: 2,
       title: "TODAY",
       disabled: true,
-      descriptions: "13th March",
+      description: "13th March",
       info: {
-        descriptions: "test",
+        description: "test",
         logo: "soldOut",
       }
     },
     {
       id: 3,
       title: "TOMORROW",
-      descriptions: "13th March",
+      description: "13th March",
       info: {
-        descriptions: "test",
+        description: "test",
         logo: "limit",
       }
     },
     {
       id: 4,
       title: "TOMORROW",
-      descriptions: "13th March",
+      description: "13th March",
       info: {
-        descriptions: "test",
+        description: "test",
         logo: "available",
       }
     },
@@ -85,7 +86,7 @@ export function Default() {
       title: "TOMORROW",
       descriptions: "13th March",
       info: {
-        descriptions: "test",
+        description: "test",
         logo: "available",
       }
     },
@@ -124,32 +125,37 @@ export function Default() {
   ];
 
   return (
-    <div className="bg-white" style={{height:"40rem"}}>
-    <Form className="event-booking-form">
+    <div>
+      <div className="date-time-icon-container">
+        <div className="icon-wrapper">
+          <CalendarSvg className='icon' />
+        </div>
+        <h5>{"Select Date"}</h5>
+      </div>
+    <Form>
       <Form.Group>
-        <SelectDateAndTimeEventList
+        <SelectorDateAndTimeList
           title="Select Date & Time"
           dateList={dayList}
-          selectedProductSetId={eventDayId}
-          onSelectProductSet={setEventDayId}
+          selectedDateId={dayId}
+          onSelectDate={setDayId}
         />
       </Form.Group>
       <Form.Group>
-        <SelectDateAndTimeEventList
+        <SelectorDateAndTimeList
           title="Select your Date with Info"
           dateList={dayListWithInfo}
-          timeContainer
-          selectedProductSetId={eventTimeWithInfoId}
-          onSelectProductSet={setEventTimeWithInfoId}
+          selectedDateId={timeWithInfoId}
+          onSelectDate={setTimeWithInfoId}
         />
       </Form.Group>
       <Form.Group>
-        <SelectDateAndTimeEventList
+        <SelectorDateAndTimeList
           title="Select your Time"
           dateList={timeList}
-          timeContainer
-          selectedProductSetId={eventTimeId}
-          onSelectProductSet={setEventTimeId}
+          isTimeContainer
+          selectedDateId={timeId}
+          onSelectDate={setTimeId}
         />
       </Form.Group>
     </Form>

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

@@ -0,0 +1,41 @@
+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

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

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

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

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

@@ -0,0 +1,126 @@
+.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;
+        }
+    }
+}

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

@@ -0,0 +1,3 @@
+@import "./ActivitiesSelectedCard.scss";
+@import "./SelectDateAndTime.scss";
+@import "./ActivitiesCard.scss";

package/src/styles/iframe-events/_index.scss

@@ -15,6 +15,3 @@
 @import "./CalendarSelect.scss";
 @import "./EventStepVenueMapZones.scss";
 @import "./CategoryStepsForm.scss";
-@import "./ActivitiesSelectedCard.scss";
-@import "./SelectDateAndTimeEvent.scss";
-@import "./ActivitiesCard.scss";

package/src/styles/packages.scss

@@ -11,6 +11,7 @@
 @import "./sortable-tree";
 @import "./static";
 @import "./table";
+@import "./iframe-customers-journey";
 @import "./custom-fields";
 @import "./file-upload";
 @import "./iframe-events";

package/src/styles/sales/BookingFilter.scss

@@ -215,6 +215,8 @@
 
         .icon {
           margin-left: 0.5rem;
+          border: none;
+          padding: 0;
           cursor: pointer;
           width: 1.125rem;
           height: 1.125rem;

package/dist/iframe/select-date-time/component/date-container/SelectDateAndTimeEvent.d.ts

@@ -1,8 +0,0 @@
-/// <reference types="react" />
-export type SelectDateAndTimeEventProps = {
-    date: any;
-    selected: boolean;
-    onSelectProductSet?: (id: number) => void;
-};
-export declare const SelectDateAndTimeEvent: ({ date, selected, onSelectProductSet, }: SelectDateAndTimeEventProps) => JSX.Element;
-//# sourceMappingURL=SelectDateAndTimeEvent.d.ts.map

package/dist/iframe/select-date-time/component/date-container/SelectDateAndTimeEvent.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"SelectDateAndTimeEvent.d.ts","sourceRoot":"","sources":["../../../../../src/iframe/select-date-time/component/date-container/SelectDateAndTimeEvent.tsx"],"names":[],"mappings":";AAOA,MAAM,MAAM,2BAA2B,GAAG;IACxC,IAAI,EAAE,GAAG,CAAC;IACV,QAAQ,EAAE,OAAO,CAAC;IAClB,kBAAkB,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;CAC3C,CAAC;AAEF,eAAO,MAAM,sBAAsB,4CAIhC,2BAA2B,gBAuD7B,CAAC"}

package/dist/iframe/select-date-time/component/date-container/SelectDateAndTimeEvent.js

@@ -1 +0,0 @@
-"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var t=require("react"),l=e(t),n=require("../../../../logo/Logo.js"),o=e(require("clsx")),a=require("../../../../assets/iframe/dateInfo/limited.svg.js"),s=require("../../../../assets/iframe/dateInfo/available.svg.js"),i=require("../../../../assets/iframe/dateInfo/soldOut.svg.js");exports.SelectDateAndTimeEvent=function(e){var r=e.date,c=e.selected,d=e.onSelectProductSet,u=r.title,m=r.disabled,v=r.info,f=r.descriptions,g=r.id,p=r.time,E=function(){m||d(g)},b=t.useMemo((function(){return"limit"===(null==v?void 0:v.logo)?l.createElement(a.ReactComponent,null):"available"===(null==v?void 0:v.logo)?l.createElement(s.ReactComponent,null):"soldOut"===(null==v?void 0:v.logo)?l.createElement(i.ReactComponent,null):null}),[v]);return l.createElement("div",{role:"button",onClick:E,onKeyPress:E,className:o("event-date-set",m&&"disabled",c&&"selected",p&&"time-container"),tabIndex:0},u,p&&l.createElement("div",{className:"time"},p),f&&l.createElement("div",{className:o("descriptions",c&&"selected",m&&"disabled")},f),v&&l.createElement("div",{className:"info"},v.logo&&l.createElement(n.default,{className:"logo",logo:b}),l.createElement("div",null,v.descriptions)))};

package/dist/iframe/select-date-time/component/date-container/SelectDateAndTimeEventList.d.ts

@@ -1,10 +0,0 @@
-/// <reference types="react" />
-export type EventProductSetsProps = {
-    selectedProductSetId?: number;
-    onSelectProductSet?: (productSetId: number) => void;
-    dateList: any[];
-    title?: string;
-    timeContainer?: boolean;
-};
-export declare const SelectDateAndTimeEventList: ({ selectedProductSetId, onSelectProductSet, dateList, title, timeContainer, }: EventProductSetsProps) => JSX.Element;
-//# sourceMappingURL=SelectDateAndTimeEventList.d.ts.map

package/dist/iframe/select-date-time/component/date-container/SelectDateAndTimeEventList.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"SelectDateAndTimeEventList.d.ts","sourceRoot":"","sources":["../../../../../src/iframe/select-date-time/component/date-container/SelectDateAndTimeEventList.tsx"],"names":[],"mappings":";AAIA,MAAM,MAAM,qBAAqB,GAAG;IAClC,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,kBAAkB,CAAC,EAAE,CAAC,YAAY,EAAE,MAAM,KAAK,IAAI,CAAC;IACpD,QAAQ,EAAE,GAAG,EAAE,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB,CAAC;AAEF,eAAO,MAAM,0BAA0B,kFAMpC,qBAAqB,gBAoBvB,CAAC"}

package/dist/styles/iframe-events/SelectDateAndTimeEvent.scss

@@ -1,85 +0,0 @@
-.event-date-list {
-    display: flex;
-    align-items: center;
-    justify-content: start;
-    grid-gap: 1rem;
-    flex-wrap: wrap;
-
-    .event-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-product-set-background-color;
-        border-radius: .2rem;
-        text-align: center;
-        border: 2px solid $snippet-product-set-border-color;
-        color: $snippet-product-set-font-color;
-        flex-grow: 1;
-        transition: $color-transition;
-        min-width: 6rem;
-        max-width: 7.25rem;
-        min-height: 2.75rem;
-        max-height: 8.375rem;
-
-        &.disabled {
-            border: 2px solid $snippet-product-set-background-color;
-            background-color: $snippet-product-set-background-color;
-            color: $snippet-product-set-font-color;
-            opacity: 0.5;
-
-            .descriptions {
-                color: $snippet-product-set-font-color;
-            }
-        }
-
-        &.selected {
-            border: 2px solid $snippet-active-product-set-border-color;
-            background-color: $snippet-active-product-set-border-color;
-            color: white;
-            transition: $color-transition;
-
-            .descriptions {
-                color: white;
-                font-weight: 600;
-            }
-
-            .time {
-                font-weight: 600;
-            }
-        }
-
-        &.time-container {
-            min-width: 4.175rem;
-            max-width: 4.175rem;
-            height: 2.75rem;
-        }
-    }
-
-    .time {
-        font-size: .875rem;
-        font-weight: 300;
-    }
-
-    .descriptions {
-        font-size: .7rem;
-        line-height: 1.03rem;
-        font-weight: 300;
-        color: #0E8CE2;
-    }
-
-    .info {
-        display: flex;
-        justify-content: center;
-        font-weight: 300;
-        flex-direction: row;
-
-        .logo {
-            width: .5rem;
-            margin-right: .5rem;
-        }
-    }
-}