@licklist/design 0.44.485-dev.7 → 0.44.485-dev.71

package/src/striped-static-table/StripedStaticTable.stories.tsx

@@ -0,0 +1,71 @@
+import React from "react";
+import { Meta, Story } from "@storybook/react";
+import {
+  StripedStaticTable,
+  StripedStaticTableProps,
+} from "./StripedStaticTable";
+
+export default {
+  title: "StripedStaticTable",
+  component: StripedStaticTable,
+} as Meta;
+
+export const Default: Story<StripedStaticTableProps> = (args) => {
+  return <StripedStaticTable {...args} />;
+};
+
+Default.args = {
+  columns: [
+    { key: "name", label: "" },
+    { key: "quantity", label: "" },
+    { key: "total", label: "" },
+  ],
+  data: [
+    [
+      {
+        key: 1,
+        name: "test category",
+        quantity: "Qty",
+        total: "Total",
+      },
+      {
+        key: 2,
+        name: "product",
+        quantity: "2/16",
+        total: "160",
+      },
+      {
+        key: 4,
+        name: "total per category",
+        quantity: "2/16",
+        total: "160",
+      },
+    ],
+    [
+      {
+        key: 1,
+        name: "test category",
+        quantity: "Qty",
+        total: "Total",
+      },
+      {
+        key: 2,
+        name: "product",
+        quantity: "2/16",
+        total: "160",
+      },
+      {
+        key: 5,
+        name: "product",
+        quantity: "2/16",
+        total: "160",
+      },
+      {
+        key: 4,
+        name: "total per category",
+        quantity: "2/16",
+        total: "160",
+      },
+    ],
+  ],
+};

package/src/striped-static-table/StripedStaticTable.tsx

@@ -0,0 +1,63 @@
+import React from "react";
+
+import { StaticTableProps, StaticTable, StaticTableData } from "../table";
+
+export type StripedStaticTableProps = Omit<StaticTableProps, "data"> & {
+  data: StaticTableData[][];
+};
+
+export const StripedStaticTable = ({
+  columns,
+  className = "",
+  data,
+  ...props
+}: StripedStaticTableProps) => {
+  const styledData = data
+    .map(
+      (section) =>
+        section.map((row, rowIndex, array) => {
+          const { length } = array;
+
+          return Object.fromEntries(
+            Object.entries(row).map(([key, value]) => {
+              if (key === "key") {
+                return [key, value];
+              }
+
+              // make first row blue and bold
+              if (rowIndex === 0) {
+                return [
+                  key,
+                  <div key={key} className="bold header-row">
+                    {value}
+                  </div>,
+                ];
+              }
+
+              // make last row bold
+              if (rowIndex === length - 1) {
+                return [
+                  key,
+                  <div key={key} className="bold">
+                    {value}
+                  </div>,
+                ];
+              }
+
+              return [key, value];
+            })
+          );
+        }) as StaticTableData[]
+    )
+    .flat();
+
+  return (
+    <StaticTable
+      columns={columns}
+      data={styledData}
+      className={`striped-static-table ${className}`}
+      displayHeader={false}
+      {...props}
+    />
+  );
+};

package/src/striped-static-table/index.ts

@@ -0,0 +1 @@
+export * from "./StripedStaticTable";

package/src/styles/events/EventStatisticModal.scss

@@ -6,43 +6,6 @@
     .modal-body {
       height: 75vh;
       overflow: scroll;
-
-      table.event-statistic-table {
-        thead {
-          display: none;
-        }
-      
-        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/events/EventVenueMap.scss

@@ -55,7 +55,7 @@
   .zoom-buttons {
     position: absolute;
     top: calc((100% - 10rem) / 2);
-    right: 0.75rem;
+    right: 1.75rem;
     z-index: 5;
 
     .buttons-wrapper {

package/src/styles/iframe-order-process/IframeOrderProcess.scss

@@ -193,7 +193,7 @@
 }
 
 .steps-wrapper {
-  margin-left: 1rem;
+  margin: 0 3rem;
   flex: 1;
   display: flex;
   align-items: center;
@@ -202,7 +202,7 @@
 
   .step-numbers {
     font-weight: 500;
-    margin-left: 1rem;
+    margin: 0 1rem;
     color: $snippet-page-header-steps-inactive-step-body-color;
 
     .active-step {
@@ -225,6 +225,7 @@
     height: 2rem;
     transition: $color-transition;
     max-width: calc(100% - 12rem);
+    flex-grow: 1;
 
     .step {
       display: flex;
@@ -233,11 +234,13 @@
       margin: 0 0.5rem;
       z-index: 1;
       scroll-margin: 10rem;
+      flex-grow: 1;
 
       .number {
         text-align: center;
-        width: 3rem;
-        height: 0.25rem;
+        max-width: 17rem;
+        width: 100%;
+        height: 0.35rem;
         line-height: 2.5rem;
         background: $snippet-page-header-steps-inactive-step-background-color;
         display: block;

package/src/styles/iframe-page/PageBody.scss

@@ -60,6 +60,7 @@
 
     .left-block-container {
       height: calc(100svh - 12rem);
+      scrollbar-width: none;
       overflow: scroll;
 
       .iframe-event-card {
@@ -119,6 +120,7 @@
 
         &.show {
           overflow: scroll;
+          scrollbar-width: none;
           overflow-x: hidden;
         }
 

package/src/styles/{widgets/ImageRadioInput.scss → image-radio-input/_index.scss}

@@ -1,4 +1,5 @@
 .image-radio-input {
+  width: min-content;
   padding: 0;
 
   &-wrapper {
@@ -9,9 +10,16 @@
     cursor: pointer;
   }
 
+  &-image-wrapper {
+    display: flex;
+    max-width: 7.5rem;
+    max-height: 4.25rem;
+  }
+
   &-label {
     display: flex;
     justify-content: center;
+    align-items: center;
     gap: 0.5rem;
 
     input {
@@ -19,4 +27,8 @@
       margin: 0;
     }
   }
+
+  .disabled {
+    opacity: 0.5;
+  }
 }

package/src/styles/packages.scss

@@ -29,10 +29,12 @@
 @import "./iframe-page";
 @import "./affiliate";
 @import "./zones";
-@import "./widgets/";
 @import "./resources-blocking";
 @import "./ryft-payment-form";
 @import "./skeleton";
 @import "./virtualized/";
 @import "./error";
 @import "./customers/";
+@import "./striped-static-table/";
+@import "./image-radio-input/";
+@import "./radio-card/";

package/src/styles/{widgets/WidgetTypeRadioButton.scss → radio-card/_index.scss}

@@ -1,8 +1,15 @@
-.widget-type-radio {
+.radio-card {
   padding: 0;
 
+  &.invalid {
+    label {
+      border-color: $red;
+    }
+  }
+
   label {
     display: block;
+    align-items: center;
     padding: 0.75rem 1rem;
     border-radius: 0.5rem;
     border: 2px solid #dcdcdc;

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,8 +207,8 @@
       .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;
@@ -186,7 +218,7 @@
           cursor: pointer;
           width: 1.125rem;
           height: 1.125rem;
-          background-color: #DCDCDC;
+          background-color: #dcdcdc;
           border-radius: 1rem;
           display: flex;
           align-items: center;
@@ -196,4 +228,4 @@
       }
     }
   }
-}
+}

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

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

package/src/table/StaticTable.tsx

@@ -11,14 +11,16 @@ 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;
 }
 
 export function StaticTable({
@@ -29,6 +31,8 @@ export function StaticTable({
   bordered = false,
   hover = false,
   size,
+  displayHeader = true,
+  renderItemFn,
 }: StaticTableProps) {
   return (
     <Table
@@ -38,16 +42,20 @@ export function StaticTable({
       hover={hover}
       size={size}
     >
-      <TableHead columns={columns} />
+      {displayHeader && <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>
+          <>
+            {renderItemFn
+              ? renderItemFn(row)
+              : columns.map((column) => (
+                  <tr key={row.key}>
+                    <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

@@ -6,8 +6,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;
@@ -36,6 +38,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/dist/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>