@licklist/design 0.44.485-dev.4 → 0.44.485-dev.40

package/src/product-set/utils/index.ts

@@ -1,3 +1,7 @@
+import { EmailTemplate } from "@licklist/core/dist/DataMapper/Notification/EmailTemplateDataMapper";
+import { SmsTemplate } from "@licklist/core/dist/DataMapper/Notification/SmsTemplateDataMapper";
+import { TemplateItem } from "../control/ProductSetControl";
+
 export const moveArrayElements = <T>(
   array: T[],
   prevIndex: number,
@@ -14,3 +18,27 @@ export const moveArrayElements = <T>(
 export const sortArrayByIndex = <T>(array: T[]) => {
   return array.map((element: T, index) => ({ ...element, sort: index }));
 };
+
+export const getFilteredTemplates = (
+  templates?: EmailTemplate[] | SmsTemplate[],
+  formTemplates?: TemplateItem[]
+): TemplateItem[] | undefined => {
+  if (!templates) {
+    return undefined;
+  }
+
+  return templates
+    ?.filter(
+      (template) =>
+        template.notification.isActive &&
+        !formTemplates?.find(
+          (formTemplate) =>
+            formTemplate.value.notification.type === template.notification.type
+        )
+    )
+    ?.map((template) => ({
+      id: template?.id,
+      value: template,
+      label: template?.notification?.name,
+    }));
+};

package/src/provider/provider-details-input/ProviderDetailsInput.tsx

@@ -34,7 +34,6 @@ export function ProviderDetailsInput({
   const {
     register,
     formState: { errors },
-    setValue,
   } = useFormContext<ProviderDetailsInputValues>();
   const { t } = useTranslation(["App", "Design", "Validation"]);
 
@@ -149,7 +148,6 @@ export function ProviderDetailsInput({
           <Typeahead
             name="company"
             options={companiesOptions}
-            setValue={setValue}
             placeholder={t("App:select")}
             noOptionsMessage={t("App:noMatchesFound")}
           />

package/src/sales/filters/SaleFilters.tsx

@@ -4,7 +4,7 @@ import clsx from "clsx";
 import { TextField } from "../../static/TextField";
 import { DateRangeInput } from "../../static/date-range-input";
 
-interface Filters {
+export interface Filters {
   id: string;
   name: string;
   email: string;

package/src/sales/guest-profile/previous-bookings/PreviousBookings.stories.tsx

@@ -1,5 +1,6 @@
 import React from "react";
 import { Meta } from "@storybook/react";
+import { boolean } from "@storybook/addon-knobs";
 import { Event } from "@licklist/core/dist/DataMapper/Provider/EventDataMapper";
 import { User } from "@licklist/core/dist/DataMapper/User/UserDataMapper";
 import { Product } from "@licklist/core/dist/DataMapper/Product/ProductDataMapper";
@@ -10,11 +11,26 @@ export default {
   title: "Sales/Guest Profile/Previous Bookings",
 } as Meta;
 
-export const Default = (args) => (
-  <div>
-    <PreviousBookings {...args} />
-  </div>
-);
+export const Default = (args) => {
+  const useProviderLink = boolean("useProviderLink", true);
+
+  const renderOrderTitleLinkByProvider = (order: Order) => {
+    return (
+      <a href={`/some_href/${order.id}`}>{order[order.orderableType]?.name}</a>
+    );
+  };
+
+  return (
+    <div>
+      <PreviousBookings
+        {...args}
+        renderOrderTitleLinkByProvider={
+          useProviderLink ? renderOrderTitleLinkByProvider : undefined
+        }
+      />
+    </div>
+  );
+};
 
 Default.args = {
   orders: [
@@ -43,6 +59,8 @@ Default.args = {
       updatedAt: "2022-05-20 18:28:56",
       status: "cart",
       tickets: [],
+      orderableType: "event",
+      orderableId: 1,
       event: {
         id: 1,
         name: "testEvent1",
@@ -79,6 +97,8 @@ Default.args = {
       updatedAt: "2022-05-20 18:28:56",
       status: "cart",
       tickets: [],
+      orderableType: "event",
+      orderableId: 2,
       event: {
         id: 2,
         name: "testEvent2",
@@ -128,6 +148,8 @@ Default.args = {
       updatedAt: "2022-05-20 18:28:56",
       status: "cart",
       tickets: [],
+      orderableType: "event",
+      orderableId: 3,
       event: {
         id: 3,
         name: "testEvent3",
@@ -156,6 +178,8 @@ Default.args = {
       updatedAt: "2022-05-20 18:28:56",
       status: "cart",
       tickets: [],
+      orderableType: "event",
+      orderableId: 3,
       event: {
         id: 3,
         name: "testEvent3",
@@ -184,6 +208,8 @@ Default.args = {
       updatedAt: "2022-05-20 18:28:56",
       status: "cart",
       tickets: [],
+      orderableType: "event",
+      orderableId: 3,
       event: {
         id: 3,
         name: "testEvent3",
@@ -212,6 +238,8 @@ Default.args = {
       updatedAt: "2022-05-20 18:28:56",
       status: "cart",
       tickets: [],
+      orderableType: "event",
+      orderableId: 3,
       event: {
         id: 3,
         name: "testEvent3",
@@ -239,6 +267,8 @@ Default.args = {
       updatedAt: "2022-05-20 18:28:56",
       status: "cart",
       tickets: [],
+      orderableType: "event",
+      orderableId: 3,
       event: {
         id: 3,
         name: "testEvent3",

package/src/sales/guest-profile/previous-bookings/PreviousBookings.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useState, ReactNode } from "react";
 import { useTranslation } from "react-i18next";
 import { DateTime } from "luxon";
 import { Button } from "react-bootstrap";
@@ -8,9 +8,13 @@ const MAX_ORDERS_COUNT = 6;
 
 export type PreviousBookingsProps = {
   orders: Order[];
+  renderOrderTitleLinkByProvider?: (order: Order) => ReactNode;
 };
 
-export const PreviousBookings = ({ orders }: PreviousBookingsProps) => {
+export const PreviousBookings = ({
+  orders,
+  renderOrderTitleLinkByProvider,
+}: PreviousBookingsProps) => {
   const { t } = useTranslation("Design");
   const [showOlderBookings, setShowOlderBookings] = useState(false);
 
@@ -36,13 +40,17 @@ export const PreviousBookings = ({ orders }: PreviousBookingsProps) => {
       {orders.length > 0 ? (
         <div className="events-wrapper">
           {orders.slice(0, endSlicedOrdersNumber).map((order) => {
+            const eventName = renderOrderTitleLinkByProvider
+              ? renderOrderTitleLinkByProvider(order)
+              : order[order.orderableType]?.name;
+
             return (
               <div
                 className="event-info col-12 col-sm-6 col-md-6 col-lg-6 col-xl-6"
                 key={order.id}
               >
                 <div className="info-wrapper">
-                  <p className="label">{order.event?.name}</p>
+                  <p className="label">{eventName}</p>
                   {order.createdAt && (
                     <p className="event-date">{formatDate(order.createdAt)}</p>
                   )}

package/src/sales/manual-booking/select-menu/SelectMenu.tsx

@@ -39,7 +39,9 @@ export const SelectMenu = ({
       ) : (
         <>
           {!isLoading && (
-            <Form.Label className="bold-text">{t("App:menus")}</Form.Label>
+            <Form.Label className="bold-text">
+              {t("Design:productSets")}
+            </Form.Label>
           )}
 
           <div className="menu-list-manual-booking">

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/customers/Filter.scss

@@ -1,6 +1,4 @@
 .customers-filter {
-  gap: 0.5rem;
-
   @include media-breakpoint-down(sm) {
     label {
       font-size: 0.8rem;
@@ -24,11 +22,32 @@
   }
 
   .customers-filter-items {
-    gap: 0.5rem;
+    width: 100%;
+
+    .customer-filter {
+      flex: 0 0 33.33%;
+      max-width: 33.33%;
+    }
   
     @include media-breakpoint-down(xs) {
       flex-direction: column;
-      gap: 0rem;  
+
+      .customer-filter {
+        flex: 1;
+        max-width: 100%;
+      }
+    }
+
+    @include media-breakpoint-up(sm) {
+      .customer-filter {
+        &:first-child {
+          padding-left: 0;
+        }
+  
+        &:last-child {
+          padding-right: 0;
+        }
+      }
     }
   } 
 }

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/packages.scss

@@ -36,3 +36,4 @@
 @import "./virtualized/";
 @import "./error";
 @import "./customers/";
+@import "./striped-static-table/";

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/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/StaticTable.tsx

@@ -11,7 +11,7 @@ export interface StaticTableData {
   [key: string]: ReactNode;
 }
 
-interface StaticTableProps {
+export interface StaticTableProps {
   className?: string;
   columns: StaticTableColumn[];
   data: StaticTableData[];
@@ -19,6 +19,7 @@ interface StaticTableProps {
   bordered?: boolean;
   hover?: boolean;
   size?: string;
+  displayHeader?: boolean;
 }
 
 export function StaticTable({
@@ -29,6 +30,7 @@ export function StaticTable({
   bordered = false,
   hover = false,
   size,
+  displayHeader = true,
 }: StaticTableProps) {
   return (
     <Table
@@ -38,7 +40,7 @@ export function StaticTable({
       hover={hover}
       size={size}
     >
-      <TableHead columns={columns} />
+      {displayHeader && <TableHead columns={columns} />}
       <tbody>
         {data.map((row) => (
           <tr key={row.key}>

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,54 @@
 import React from "react";
 import Select from "react-select";
-import { useForm, Controller } from "react-hook-form";
+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 = () => (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;