@licklist/design 0.44.485-dev.72 → 0.44.485-dev.75

package/dist/styles/themes/bookedit/_variables.scss

@@ -38,7 +38,7 @@ $blue: #0e8ce2;
 $indigo: #6610f2 !default;
 $purple: #6f42c1 !default;
 $pink: #e83e8c !default;
-$dark-pink: #E20E58 !default;
+$dark-pink: #e20e58 !default;
 $red: #f94b25;
 $orange: #fd7e14 !default;
 $yellow: #ffc107 !default;
@@ -65,7 +65,7 @@ $colors: (
   "gray": $gray-600,
   "gray-dark": $gray-800,
   "light-yellow": $light-yellow,
-  "dark-pink": $dark-pink
+  "dark-pink": $dark-pink,
 );
 
 $primary: $blue !default;
@@ -231,6 +231,7 @@ $line-height-lg: 1.5 !default;
 $line-height-sm: 1.5 !default;
 
 $border-width: 1px !default;
+$calendar-border: 2px solid #f2f2f2;
 $border-color: $gray-300 !default;
 
 $border-radius: 1rem;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@licklist/design",
-  "version": "0.44.485-dev.72",
+  "version": "0.44.485-dev.75",
   "repository": {
     "type": "git",
     "url": "git+ssh://git@bitbucket.org/artelogicsoft/licklist_design.git"

package/src/assets/iframe/dateInfo/available.svg

@@ -0,0 +1,5 @@
+<svg width="7" height="11" viewBox="0 0 7 11" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="0.943939" y="1.03658" width="5.25188" height="3.04878" rx="1.5" fill="#4CF973" stroke="white"/>
+<rect x="0.943939" y="4.10976" width="5.25188" height="3.04878" rx="1.5" fill="#4CF973" stroke="white"/>
+<rect x="0.943939" y="7.18292" width="5.25188" height="3.04878" rx="1.5" fill="#4CF973" stroke="white"/>
+</svg>

package/src/assets/iframe/dateInfo/limited.svg

@@ -0,0 +1,5 @@
+<svg width="7" height="11" viewBox="0 0 7 11" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="1.2406" y="1.03658" width="5.25188" height="3.04878" rx="1.5" fill="#E4E4E4" stroke="white"/>
+<rect x="1.2406" y="4.10976" width="5.25188" height="3.04878" rx="1.5" fill="#FDD054" stroke="white"/>
+<rect x="1.2406" y="7.18292" width="5.25188" height="3.04878" rx="1.5" fill="#FDD054" stroke="white"/>
+</svg>

package/src/assets/iframe/dateInfo/soldOut.svg

@@ -0,0 +1,6 @@
+<svg width="7" height="10" viewBox="0 0 7 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="5.94013" height="10" transform="translate(0.497131)" fill="white"/>
+<rect x="0.591156" y="0.5" width="5.75211" height="3" rx="1.5" fill="#E4E4E4" stroke="white"/>
+<rect x="0.591156" y="3.5" width="5.75211" height="3" rx="1.5" fill="#E4E4E4" stroke="white"/>
+<rect x="0.591156" y="6.5" width="5.75211" height="3" rx="1.5" fill="#E4E4E4" stroke="white"/>
+</svg>

package/src/iframe/index.ts

@@ -43,3 +43,4 @@ export {
 export { PoweredBy } from "./powered-by";
 export * from "./page";
 export { CustomDateField, CustomDateFieldProps } from "./custom-fields";
+export { SelectDateAndTimeEvent } from "./select-date-time";

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

@@ -0,0 +1,73 @@
+import React, { useMemo } from "react";
+import clsx from "clsx";
+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";
+
+export type SelectDateAndTimeEventProps = {
+  date: any;
+  selected: boolean;
+  onSelectProductSet?: (id: number) => void;
+};
+
+export const SelectDateAndTimeEvent = ({
+  date,
+  selected,
+  onSelectProductSet,
+}: SelectDateAndTimeEventProps) => {
+  const { title, disabled, info, descriptions, id, time } = date;
+
+  const onClick = () => {
+    if (disabled) return;
+    onSelectProductSet(id);
+  };
+
+  const infoLogo = useMemo(() => {
+    if (info?.logo === "limit") {
+      return <LimitedSvg />;
+    }
+    if (info?.logo === "available") {
+      return <AvailableSvg />;
+    }
+    if (info?.logo === "soldOut") {
+      return <SoldOutSvg />;
+    }
+    return null;
+  }, [info, SoldOutSvg, AvailableSvg, LimitedSvg]);
+
+  return (
+    <div
+      role="button"
+      onClick={onClick}
+      onKeyPress={onClick}
+      className={clsx(
+        "event-date-set",
+        disabled && "disabled",
+        selected && "selected",
+        time && "time-container"
+      )}
+      tabIndex={0}
+    >
+      {title}
+      {time && <div className="time">{time}</div>}
+      {descriptions && (
+        <div
+          className={clsx(
+            "descriptions",
+            selected && "selected",
+            disabled && "disabled"
+          )}
+        >
+          {descriptions}
+        </div>
+      )}
+      {info && (
+        <div className="info">
+          {info.logo && <Logo className="logo" logo={infoLogo} />}
+          <div>{info.descriptions}</div>
+        </div>
+      )}
+    </div>
+  );
+};

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

@@ -0,0 +1,158 @@
+import React, { useState } from "react";
+import { Meta } from "@storybook/react";
+import { SelectDateAndTimeEventList } from "./SelectDateAndTimeEventList";
+import { Form } from "react-bootstrap";
+
+export default {
+  title: "Iframe/Date Selector",
+  component: SelectDateAndTimeEventList,
+} as Meta;
+
+export function Default() {
+  const [eventDayId, setEventDayId] = useState<number>();
+  const [eventTimeId, setEventTimeId] = useState<number>();
+  const [eventTimeWithInfoId, setEventTimeWithInfoId] = useState<number>();
+
+  const dayList = [
+    {
+      id: 1,
+      title: "TODAY",
+      descriptions: "13th March",
+    },
+    {
+      id: 2,
+      title: "TODAY",
+      disabled: true,
+      descriptions: "13th March",
+    },
+    {
+      id: 3,
+      title: "TOMORROW",
+      descriptions: "13th March",
+    },
+    {
+      id: 4,
+      title: "TOMORROW",
+      descriptions: "13th March",
+    },
+    {
+      id: 5,
+      title: "TOMORROW",
+      descriptions: "13th March",
+    },
+  ];
+
+  const dayListWithInfo = [
+    {
+      id: 1,
+      title: "TODAY",
+      descriptions: "13th March",
+      info: {
+        descriptions: "test",
+        logo: "limit",
+      }
+    },
+    {
+      id: 2,
+      title: "TODAY",
+      disabled: true,
+      descriptions: "13th March",
+      info: {
+        descriptions: "test",
+        logo: "soldOut",
+      }
+    },
+    {
+      id: 3,
+      title: "TOMORROW",
+      descriptions: "13th March",
+      info: {
+        descriptions: "test",
+        logo: "limit",
+      }
+    },
+    {
+      id: 4,
+      title: "TOMORROW",
+      descriptions: "13th March",
+      info: {
+        descriptions: "test",
+        logo: "available",
+      }
+    },
+    {
+      id: 5,
+      title: "TOMORROW",
+      descriptions: "13th March",
+      info: {
+        descriptions: "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 className="bg-white" style={{height:"40rem"}}>
+    <Form className="event-booking-form">
+      <Form.Group>
+        <SelectDateAndTimeEventList
+          title="Select Date & Time"
+          dateList={dayList}
+          selectedProductSetId={eventDayId}
+          onSelectProductSet={setEventDayId}
+        />
+      </Form.Group>
+      <Form.Group>
+        <SelectDateAndTimeEventList
+          title="Select your Date with Info"
+          dateList={dayListWithInfo}
+          timeContainer
+          selectedProductSetId={eventTimeWithInfoId}
+          onSelectProductSet={setEventTimeWithInfoId}
+        />
+      </Form.Group>
+      <Form.Group>
+        <SelectDateAndTimeEventList
+          title="Select your Time"
+          dateList={timeList}
+          timeContainer
+          selectedProductSetId={eventTimeId}
+          onSelectProductSet={setEventTimeId}
+        />
+      </Form.Group>
+    </Form>
+    </div>
+  );
+}

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

@@ -0,0 +1,39 @@
+import React from "react";
+import clsx from "clsx";
+import { SelectDateAndTimeEvent } from "./SelectDateAndTimeEvent";
+
+export type EventProductSetsProps = {
+  selectedProductSetId?: number;
+  onSelectProductSet?: (productSetId: number) => void;
+  dateList: any[];
+  title?: string;
+  timeContainer?: boolean;
+};
+
+export const SelectDateAndTimeEventList = ({
+  selectedProductSetId,
+  onSelectProductSet,
+  dateList,
+  title,
+  timeContainer,
+}: EventProductSetsProps) => {
+  return (
+    <>
+      <h5>{title}</h5>
+      <div
+        className={clsx("event-date-list", timeContainer && "time-container")}
+      >
+        {dateList.map((date) => {
+          return (
+            <SelectDateAndTimeEvent
+              key={date.id}
+              date={date}
+              selected={selectedProductSetId === date.id}
+              onSelectProductSet={onSelectProductSet}
+            />
+          );
+        })}
+      </div>
+    </>
+  );
+};

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

@@ -0,0 +1 @@
+export { SelectDateAndTimeEvent } from "./component/date-container/SelectDateAndTimeEvent";

package/src/logo/Logo.tsx

@@ -3,7 +3,7 @@ import Col from "react-bootstrap/Col";
 import Row from "react-bootstrap/Row";
 
 interface Props extends HTMLAttributes<HTMLDivElement> {
-  logo: ReactNode;
+  logo: ReactNode | null;
   logoSm?: ReactNode;
 }
 

package/src/sales/booking/filter/{components/AdditionalFIlterSection.tsx → AdditionalFilterSection.tsx}

@@ -12,7 +12,7 @@ import {
   BookingContext,
   BookingFilters,
 } from "@licklist/plugins/dist/context/booking/BookingContext";
-import { DateRangeInput } from "../../../../static/date-range-input/DateRangeInput";
+import { DateRangeInput } from "../../../static/date-range-input/DateRangeInput";
 import { FilterSectionProps } from "./SearchingForSection";
 
 const ORDER_STATUSES_FOR_UPDATE = [
@@ -22,6 +22,7 @@ const ORDER_STATUSES_FOR_UPDATE = [
   ORDER_STATUS_ACTION_REQUIRED,
 ];
 
+// @TODO fix issue with import DateRangeInput and move component to dashboard
 export type AdditionalFilterSectionProps = {
   onAddFiltersClick?: () => void;
   onCancelFilterClick?: () => void;

package/src/sales/booking/filter/{components/MainFilterSection.tsx → MainFilterSection.tsx}

@@ -4,16 +4,17 @@ import { Form, Button } from "react-bootstrap";
 import clsx from "clsx";
 import useDebounce from "use-debounce/lib/useDebounce";
 import { BookingContext } from "@licklist/plugins/dist/context/booking/BookingContext";
-import Icon from "../../../../static/Icon";
-import { BookingFilterProps } from "../BookingFilter";
-import { ReactComponent as RefreshIcon } from "../../../../assets/dashboard/refresh.svg";
-import { ReactComponent as FullscreenIcon } from "../../../../assets/dashboard/fullscreen.svg";
-import { ReactComponent as MinimizeIcon } from "../../../../assets/dashboard/minimize.svg";
+import Icon from "../../../static/Icon";
+import { ReactComponent as RefreshIcon } from "../../../assets/dashboard/refresh.svg";
+import { ReactComponent as FullscreenIcon } from "../../../assets/dashboard/fullscreen.svg";
+import { ReactComponent as MinimizeIcon } from "../../../assets/dashboard/minimize.svg";
+import { BookingFilterProps } from "./types";
 
 export type MainFilterSectionProps = Omit<BookingFilterProps, "staffMembers">;
 
 const DEBOUNCE_QUERY_TIME = 300;
 
+// @TODO fix issue with import DateRangeInput and move component to dashboard
 export const MainFilterSection = ({
   isFilterOpen,
   onAddFiltersClick,

package/src/sales/booking/filter/{components/ResultTagButton.tsx → ResultTagButton.tsx}

@@ -1,5 +1,5 @@
 import React from "react";
-import Icon from "../../../../static/Icon";
+import Icon from "../../../static/Icon";
 
 export type ResultTagButtonProps = {
   tagKey: string;
@@ -7,6 +7,7 @@ export type ResultTagButtonProps = {
   onRemoveClick: (tagKey: string) => void;
 };
 
+// @TODO fix issue with import DateRangeInput and move component to dashboard
 export const ResultTagButton = ({
   tagKey,
   value,

package/src/sales/booking/filter/{components/SearchingForSection.tsx → SearchingForSection.tsx}

@@ -20,6 +20,7 @@ export interface FilterSectionProps {
   isLoading: boolean;
 }
 
+// @TODO fix issue with import DateRangeInput and move component to dashboard
 export const SearchingForSection = ({ staffMembers }: { staffMembers }) => {
   const { t } = useTranslation("Design");
   const { filters, setFilters } = useContext(BookingContext);

package/src/sales/booking/filter/index.ts

@@ -1,2 +1,5 @@
-export { BookingFilter } from "./BookingFilter";
-export type { BookingFilterProps } from "./BookingFilter";
+export { AdditionalFilterSection } from "./AdditionalFilterSection";
+export { MainFilterSection } from "./MainFilterSection";
+export { ResultTagButton } from "./ResultTagButton";
+export { SearchingForSection } from "./SearchingForSection";
+export { BookingFilterProps } from "./types";

package/src/sales/booking/filter/types.tsx

@@ -0,0 +1,14 @@
+import { User } from "@licklist/core/dist/DataMapper/User/UserDataMapper";
+import { PropsWithChildren } from "react";
+
+export type BookingFilterProps = PropsWithChildren<{
+  onAddFiltersClick?: () => void;
+  onCancelFilterClick?: () => void;
+  onRefreshClick?: () => void;
+  onFullscreenButtonClick?: () => void;
+  isFilterOpen?: boolean;
+  autoFocusOnMount?: boolean;
+  isFullscreenMode?: boolean;
+  staffMembers?: User[] | null;
+  isLoading: boolean;
+}>;

package/src/sales/booking/index.ts

@@ -1,3 +1,2 @@
-export * from "./tabs";
 export * from "./filter";
 export * from "./results";

package/src/sales/booking/results/constants.ts

@@ -3,4 +3,5 @@ export const BACKGROUND_COLOR_CLASSNAMES = [
   "random-color-yellow",
   "random-color-green",
   "random-color-pink",
+  "random-color-violet",
 ];

package/src/sales/booking/results/index.ts

@@ -1,2 +1,3 @@
 export { BookingResults } from "./BookingResults";
+export * from "./constants";
 export type { BookingResultsProps } from "./BookingResults";

package/src/static/date-range-input/DateRangeInput.tsx

@@ -3,6 +3,7 @@ import { Button, Form, OverlayTrigger, Popover } from "react-bootstrap";
 import { DateRange, Range } from "react-date-range";
 import { useClickAway } from "react-use";
 import { useTranslation } from "react-i18next";
+// @TODO fix issue with Poper, because we can't import DateRangeInput to our apps
 import type Popper from "@popperjs/core";
 import { useId } from "@react-aria/utils";
 import { Icon } from "..";
@@ -15,7 +16,7 @@ import {
 import "react-date-range/dist/styles.css";
 import "react-date-range/dist/theme/default.css";
 
-export type DateRangeInputProps = {
+type DateRangeInputProps = {
   placeholder: string;
   startDate?: string;
   endDate?: string;

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

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

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

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

package/src/styles/sales/RandomColors.scss

@@ -1,17 +1,20 @@
 .random-color {
   &-blue {
-    background-color: #E4F9FF;
+    background-color: #e4f9ff;
   }
 
   &-yellow {
-    background-color: #F7F4C1;
+    background-color: #f7f4c1;
   }
 
   &-green {
-    background-color: #E4FFF3;
+    background-color: #e4fff3;
   }
 
   &-pink {
-    background-color: #FFE4F8;
+    background-color: #ffe4f8;
+  }
+  &-violet {
+    background-color: #e4e4ff;
   }
 }

package/src/styles/themes/bookedit/_variables.scss

@@ -38,7 +38,7 @@ $blue: #0e8ce2;
 $indigo: #6610f2 !default;
 $purple: #6f42c1 !default;
 $pink: #e83e8c !default;
-$dark-pink: #E20E58 !default;
+$dark-pink: #e20e58 !default;
 $red: #f94b25;
 $orange: #fd7e14 !default;
 $yellow: #ffc107 !default;
@@ -65,7 +65,7 @@ $colors: (
   "gray": $gray-600,
   "gray-dark": $gray-800,
   "light-yellow": $light-yellow,
-  "dark-pink": $dark-pink
+  "dark-pink": $dark-pink,
 );
 
 $primary: $blue !default;
@@ -231,6 +231,7 @@ $line-height-lg: 1.5 !default;
 $line-height-sm: 1.5 !default;
 
 $border-width: 1px !default;
+$calendar-border: 2px solid #f2f2f2;
 $border-color: $gray-300 !default;
 
 $border-radius: 1rem;

package/tsconfig.json

@@ -8,7 +8,7 @@
     "tests",
     "**/*.test*",
     "**/*.spec*",
-    "src/**/*.stories.*",
+    "src/**/*.stories.*"
   ],
   "compilerOptions": {
     "skipLibCheck": false,
@@ -40,6 +40,6 @@
     "composite": true,
     "declaration": true,
     "declarationMap": true,
-    "sourceMap": false,
+    "sourceMap": false
   }
 }