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

package/src/styles/sales/BookingFilter.scss

@@ -33,7 +33,7 @@
             margin: 0.875rem;
             z-index: 3;
           }
-          
+
           .form-control {
             height: 2.75rem;
             color: $blue;
@@ -57,7 +57,11 @@
         margin-right: 0.5rem;
       }
 
-      .cancel-button, .add-filters-button, .refresh-button, .fullscreen-button, .minimize-button {
+      .cancel-button,
+      .add-filters-button,
+      .refresh-button,
+      .fullscreen-button,
+      .minimize-button {
         display: flex;
         color: $gray-800;
 
@@ -92,11 +96,14 @@
         }
       }
 
-      .fullscreen-button, .minimize-button {
+      .fullscreen-button,
+      .minimize-button {
         min-width: 7.25rem;
       }
 
-      .refresh-button, .fullscreen-button, .minimize-button {
+      .refresh-button,
+      .fullscreen-button,
+      .minimize-button {
         .icon {
           background-color: transparent;
 
@@ -145,13 +152,37 @@
   .additional-filter-section {
     margin-top: 1.25rem;
 
-    @include media-breakpoint-up(md){
+    @include media-breakpoint-up(md) {
       .form-group {
         margin-bottom: 0;
       }
     }
   }
 
+  .additional-filter-container {
+    flex-wrap: nowrap;
+
+    @include media-breakpoint-down(md) {
+      flex-wrap: wrap;
+      .date-container {
+        width: 100%;
+        flex: 1;
+      }
+      .btn-primary {
+        margin-top: 1rem;
+      }
+    }
+
+    @include media-breakpoint-between(md, lg) {
+      flex-wrap: nowrap;
+
+      .date-container {
+        width: auto;
+        flex: 0 0 35%;
+      }
+    }
+  }
+
   .searching-for-section {
     .tags {
       display: flex;
@@ -161,8 +192,9 @@
       p {
         margin: 0;
       }
-      
-      .label, .search-query-param {
+
+      .label,
+      .search-query-param {
         font-size: 1.125rem;
         font-weight: 600;
       }
@@ -175,18 +207,20 @@
       .result-tag {
         display: flex;
         align-items: center;
-        border: 1px solid #DCDCDC;
-        background-color: #F5F5F5;
+        border: 1px solid #dcdcdc;
+        background-color: #f5f5f5;
         padding: 0.5rem 0.75rem;
         font-size: 0.75rem;
         text-transform: capitalize;
 
         .icon {
           margin-left: 0.5rem;
+          border: none;
+          padding: 0;
           cursor: pointer;
           width: 1.125rem;
           height: 1.125rem;
-          background-color: #DCDCDC;
+          background-color: #dcdcdc;
           border-radius: 1rem;
           display: flex;
           align-items: center;
@@ -196,4 +230,4 @@
       }
     }
   }
-}
+}

package/src/styles/sales/ManualBooking.scss

@@ -158,6 +158,12 @@
     font-weight: 600;
   }
 
+  .category-start-time {
+    font-size: 1rem;
+    width: 11rem;
+    margin-top: 1rem;
+  }
+
   .accordion-form-control {
     border: none;
     border-bottom: 2px solid $gray-400;
@@ -279,7 +285,7 @@
   .small-sizes-input {
     font-size: 1.5rem;
     padding: 0;
-    padding-left: 1.7rem;
+    padding-left: 1.5rem;
     padding-right: 1rem;
     margin: 0 auto;
     width: 7rem;

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/snippet-templates/SnippetTemplateCard.scss

@@ -45,6 +45,22 @@ $snippet-template-card-button-transition: $product-set-card-transition !default;
     display: flex;
     justify-content: space-between;
     align-items: center;
+
+    a {
+      white-space: nowrap;
+      display: inline-block;
+      text-overflow: ellipsis;
+      width: 85%;
+      overflow: hidden;
+    }
+  }
+
+  .snippet-template-card-subject {
+    white-space: nowrap;
+    display: inline-block;
+    text-overflow: ellipsis;
+    width: 100%;
+    overflow: hidden;
   }
 
   .snippet-template-card-button {

package/src/styles/sortable-field/SortableField.scss

@@ -0,0 +1,21 @@
+.sortable-field-list {
+    display: flex;
+
+    .icon-container {
+        margin-right: .8rem;
+        margin-left: .2rem;
+        margin-top: 1rem;
+
+        div {
+            width: 0.75rem;
+            height: 2px;
+            margin-bottom: 2px;
+            background-color: #B5CCDE;
+            border-radius: 1px;
+        }
+    }
+
+    .form-group {
+        width: 100%;
+    }
+}

package/src/styles/sortable-field/_index.scss

@@ -0,0 +1 @@
+@import "./SortableField";

package/src/styles/static/DateRangeInput.scss

@@ -5,6 +5,10 @@
 
   .date-range-input[readonly] {
     background-color: transparent;
+
+    &:disabled {
+      background-color: #ebebeb;
+    }
   }
 
   .date-range-input-icon {
@@ -13,4 +17,4 @@
     bottom: 1rem;
     color: $gray-500;
   }
-}
+}

package/src/styles/striped-static-table/_index.scss

@@ -0,0 +1,33 @@
+table.striped-static-table {
+  tbody {
+    tr {
+      border-bottom: 1px solid $gray-500;
+      td {
+        text-transform: capitalize;
+
+        &:nth-child(2),
+        &:nth-child(3) {
+          text-align: right;
+        }
+        &:nth-child(2) {
+          width: 20%;
+        }
+        &:nth-child(3) {
+          width: 35%;
+        }
+      }
+
+      td:has(div.header-row) {
+        background-color: #d8ecf7;
+      }
+
+      &:first-child {
+        border-top: 1px solid $gray-500;
+      }
+    }
+  }
+
+  .bold {
+    font-weight: 600;
+  }
+}

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/src/table/FilterHelperComponent.tsx

@@ -33,6 +33,7 @@ function FilterHelperComponent({
     if (onClickFn) {
       onClickFn("");
     }
+    setItem("");
   };
 
   const onSearch = () => {

package/src/table/StaticTable.tsx

@@ -11,14 +11,17 @@ export interface StaticTableData {
   [key: string]: ReactNode;
 }
 
-interface StaticTableProps {
+export interface StaticTableProps {
   className?: string;
   columns: StaticTableColumn[];
-  data: StaticTableData[];
+  data: StaticTableData[] | any[];
   striped?: boolean;
   bordered?: boolean;
   hover?: boolean;
   size?: string;
+  displayHeader?: boolean;
+  renderItemFn?: (data?: any) => ReactNode;
+  isSingleRowForKey?: boolean;
 }
 
 export function StaticTable({
@@ -29,6 +32,9 @@ export function StaticTable({
   bordered = false,
   hover = false,
   size,
+  displayHeader = true,
+  isSingleRowForKey = false,
+  renderItemFn,
 }: StaticTableProps) {
   return (
     <Table
@@ -38,18 +44,38 @@ export function StaticTable({
       hover={hover}
       size={size}
     >
-      <TableHead columns={columns} />
-      <tbody>
-        {data.map((row) => (
-          <tr key={row.key}>
-            {columns.map((column) => (
-              <td key={`${column.key}-${row[column.key]}`}>
-                {row[column.key]}
-              </td>
-            ))}
-          </tr>
-        ))}
-      </tbody>
+      {displayHeader && <TableHead columns={columns} />}
+      {isSingleRowForKey ? (
+        <tbody>
+          {data.map((row) => (
+            <>
+              {renderItemFn
+                ? renderItemFn(row)
+                : columns.map((column) => (
+                    <tr key={row.key}>
+                      <td key={`${column.key}-${row[column.key]}`}>
+                        {row[column.key]}
+                      </td>
+                    </tr>
+                  ))}
+            </>
+          ))}
+        </tbody>
+      ) : (
+        <tbody>
+          {data.map((row) => (
+            <tr key={row.key}>
+              {renderItemFn
+                ? renderItemFn(row)
+                : columns.map((column) => (
+                    <td key={`${column.key}-${row[column.key]}`}>
+                      {row[column.key]}
+                    </td>
+                  ))}
+            </tr>
+          ))}
+        </tbody>
+      )}
     </Table>
   );
 }

package/src/typeahead/Typeahead.stories.tsx

@@ -1,20 +1,23 @@
 import React from "react";
 import { storiesOf } from "@storybook/react";
+import { FormProvider, useForm } from "react-hook-form";
 import { Typeahead } from "./Typeahead";
 
-storiesOf("Typeahead", module)
-  .add("Typeahead", () => (
-    <>
+storiesOf("Typeahead", module).add("Typeahead", () => {
+  const form = useForm();
+  return (
+    <FormProvider {...form}>
       <Typeahead
         name="user"
+        isMultipleChoise
         options={[
           { id: 1, value: "user1", label: "User1" },
           { id: 2, value: "user2", label: "User2" },
           { id: 3, value: "user3", label: "User3" },
         ]}
-        setValue={() => {}}
         placeholder="Select"
         noOptionsMessage="No Options Found"
       />
-    </>
-  ));
+    </FormProvider>
+  );
+});

package/src/typeahead/Typeahead.tsx

@@ -1,47 +1,55 @@
 import React from "react";
-import Select from "react-select";
-import { useForm, Controller } from "react-hook-form";
+import Select, { CSSObjectWithLabel } from "react-select";
+import { Controller, useFormContext } from "react-hook-form";
 
 export type TypeaheadOptions = {
-  id: number;
-  value: string;
+  id: number | string;
+  value: any;
   label: string;
 };
 
 export interface TypeaheadProps {
   options: TypeaheadOptions[];
-  setValue: (value: string | any) => void;
   placeholder: string;
   isRequired?: boolean;
   name: string;
+  isMultipleChoise?: boolean;
   noOptionsMessage: string;
+  isInvalid?: boolean;
 }
 
 function Typeahead({
   options,
-  setValue,
   placeholder,
   isRequired = false,
+  isMultipleChoise,
   name = "",
   noOptionsMessage = "",
-}) {
-  const { control } = useForm({
-    mode: "onChange",
-  });
-  const prefix = "id";
+  isInvalid,
+}: TypeaheadProps) {
+  const { control } = useFormContext();
+
+  const getErrorStyle = (): CSSObjectWithLabel =>
+    isInvalid ? { borderColor: "red" } : {};
 
   return (
     <>
       <Controller
-        name={`${name}.${prefix as string}` as const}
+        name={name}
         control={control}
         rules={{ required: isRequired }}
         render={({ field }) => (
           <Select
             placeholder={placeholder}
             value={field.value}
+            isMulti={isMultipleChoise}
+            styles={{
+              control: (base) => ({
+                ...base,
+                ...getErrorStyle(),
+              }),
+            }}
             onChange={(value) => {
-              setValue(`${name}.${prefix}`, value.id);
               field.onChange(value);
             }}
             options={options}

package/src/types/iframe.ts

@@ -1,4 +1,5 @@
 import { Product as CoreProduct } from "@licklist/core/dist/DataMapper/Product/ProductDataMapper";
+import { Zone } from "@licklist/core/dist/DataMapper/Provider/ZoneDataMapper";
 
 export interface Product {
   id: number;
@@ -6,8 +7,10 @@ export interface Product {
   description: string;
   deposit: number;
   price: number;
+  minSub?: number;
   minAmount?: number;
   maxAmount?: number;
+  minSpend?: number | null;
   isSoldOut?: boolean;
   isRequired?: boolean;
   isUnlimited?: boolean;
@@ -23,12 +26,13 @@ export interface ProductCategory {
   minSubItems: number | null;
   maxSubItems: number | null;
   products?: Product[];
+  zone?: Zone | null;
 }
 
 export interface MenuStep {
   id: number;
   name: string;
-  productCategories: ProductCategory[];
+  productCategories?: ProductCategory[];
 }
 
 export interface Menu {
@@ -36,6 +40,8 @@ export interface Menu {
   menuSteps: MenuStep[];
 }
 
+// TODO similar type exists in iframe app
+// remove this when components are moved to iframe
 export interface Order {
   id: number;
   quantity: number;

package/src/zone/form/components/AvailableTimesControl.tsx

@@ -9,7 +9,10 @@ import { Form } from "react-bootstrap";
 import { useForm } from "react-hook-form";
 import { useId } from "@react-aria/utils";
 import { WorkHour } from "@licklist/core/dist/DataMapper/Provider/WorkHourDataMapper";
-import { getCheckboxesByWorkHours } from "../utils/dates";
+import {
+  calculateTimeWithOffset,
+  getCheckboxesByWorkHours,
+} from "../utils/dates";
 
 export type AvailableTimesControlRef = {
   trigger: () => Promise<boolean>;
@@ -56,18 +59,20 @@ export const AvailableTimesControl = forwardRef<
   });
 
   const onChange = (option: string) => {
-    const isAlreadyChecked = availableTimes.includes(option);
+    const timeWithOffset = calculateTimeWithOffset(option);
+
+    const isAlreadyChecked = availableTimes.includes(timeWithOffset);
 
     if (isAlreadyChecked) {
       setValue(
         "availableTimes",
-        availableTimes.filter((value) => value !== option)
+        availableTimes.filter((value) => value !== timeWithOffset)
       );
 
       return;
     }
 
-    setValue("availableTimes", [...availableTimes, option]);
+    setValue("availableTimes", [...availableTimes, timeWithOffset]);
   };
 
   useEffect(() => {
@@ -87,7 +92,9 @@ export const AvailableTimesControl = forwardRef<
               <Form.Check.Input
                 type="checkbox"
                 value={option}
-                checked={availableTimes.includes(option)}
+                checked={availableTimes.includes(
+                  calculateTimeWithOffset(option)
+                )}
                 onChange={() => onChange(option)}
                 disabled={isLoading}
               />

package/src/zone/form/components/ZoneRecurrencesControl.tsx

@@ -1,5 +1,4 @@
 import React, { useEffect, useRef, useState } from "react";
-import type Popper from "@popperjs/core";
 import { useId } from "@react-aria/utils";
 import { Form, OverlayTrigger, Popover } from "react-bootstrap";
 import { useFieldArray, useFormContext } from "react-hook-form";
@@ -23,6 +22,7 @@ import {
   AvailableTimesControl,
   AvailableTimesControlRef,
 } from "./AvailableTimesControl";
+import { sameWidthPopperModifier } from "../../../product-set/control/DateAndRecurrenceInput";
 
 export interface DateAndRecurrenceInputValues {
   zoneRecurrences?: Partial<ZoneRecurrence>[];
@@ -211,7 +211,7 @@ export const ZoneRecurrencesControl = ({
               }
               strategy={verticalListSortingStrategy}
             >
-              {fields.map((zoneRecurrence, index) => (
+              {fields?.map((zoneRecurrence, index) => (
                 <ZoneRecurrenceControl
                   key={zoneRecurrence._id}
                   zoneRecurrence={zoneRecurrence}
@@ -257,29 +257,3 @@ export const ZoneRecurrencesControl = ({
     </Form.Group>
   );
 };
-
-const sameWidthPopperModifier: Popper.Modifier<
-  "sameWidth",
-  Record<string, unknown>
-> = {
-  name: "sameWidth",
-  enabled: true,
-  phase: "beforeWrite",
-  requires: ["computeStyles"],
-  fn({ state }) {
-    const style = {
-      width: `${state.rects.reference.width + 4}px`,
-      marginLeft: "-2px",
-      maxWidth: "unset",
-    };
-    Object.assign(state.styles.popper, style);
-  },
-  effect({ state }) {
-    const { width } = state.elements.reference.getBoundingClientRect();
-    const style = {
-      width: `${width}px`,
-      maxWidth: "unset",
-    };
-    Object.assign(state.elements.popper.style, style);
-  },
-};

package/src/zone/form/utils/dates.ts

@@ -97,3 +97,27 @@ export const getCheckboxesByWorkHours = (workHours?: WorkHour[]) => {
       DEFAULT_END_DAY_TIME
   );
 };
+
+// adds time zone offset to times selected by user
+export const calculateTimeWithOffset = (time: string): string => {
+  // time has format "HH:mm"
+  const [hours, minutes] = time.split(":");
+
+  const hoursWithOffset = addOffsetToHours(+hours);
+
+  const hoursWithPadding = hoursWithOffset.toString().padStart(2, "0");
+
+  return `${hoursWithPadding}:${minutes}`;
+};
+
+const addOffsetToHours = (hours: number): number => {
+  const timeZoneOffset = new Date().getTimezoneOffset() / 60;
+
+  const hoursWithOffset = hours + timeZoneOffset;
+
+  if (hoursWithOffset > 24) return hoursWithOffset - 24;
+
+  if (hoursWithOffset < 0) return hoursWithOffset + 24;
+
+  return hoursWithOffset;
+};

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