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

package/src/product-set/product/ProductControl.tsx

@@ -86,7 +86,6 @@ export interface ProductControlValues
   isRequired: boolean;
   quantitySelector: number;
   hasSpecialNotes: boolean;
-  minSpend?: number | null;
   type?: ProductType;
   weight?: number;
   tierId?: number;
@@ -158,7 +157,6 @@ export function ProductControl<T extends FormValues>({
   const quantitySelectorId = useId();
   const hasSpecialNotesId = useId();
   const unlimitedQuantityId = useId();
-  const minSpendId = useId();
 
   const quantitySelectorList: SelectItem[] = [
     { id: 1, value: t("quantitySelector") },
@@ -191,7 +189,7 @@ export function ProductControl<T extends FormValues>({
 
   const onImageRemove = useCallback(
     (id, path) => {
-      handleImageRemove(String(id), path);
+      handleImageRemove(id, path);
     },
     [handleImageRemove]
   );
@@ -202,13 +200,7 @@ export function ProductControl<T extends FormValues>({
   }, [setLoading, isImageUploading]);
 
   useEffect(() => {
-    const formImages = getValues(`${fieldNamePrefix}.images` as Path<T>);
-
-    setInitialImages(formImages as Image[]);
-  }, [getValues, setInitialImages, fieldNamePrefix]);
-
-  useEffect(() => {
-    if (Array.isArray(images)) {
+    if (Array.isArray(images) && images?.length > 0) {
       setValue(
         `${fieldNamePrefix}.images` as Path<T>,
         images as UnpackNestedValue<PathValue<T, Path<T>>>
@@ -216,6 +208,12 @@ export function ProductControl<T extends FormValues>({
     }
   }, [images, fieldNamePrefix, setValue]);
 
+  useEffect(() => {
+    const formImages = getValues(`${fieldNamePrefix}.images` as Path<T>);
+
+    setInitialImages(formImages as Image[]);
+  }, [getValues, setInitialImages, fieldNamePrefix]);
+
   const quantitySelector = quantityValue ?? "1";
   const quantity = QUANTITY_TYPE_LIST_DTO[quantitySelector as string];
 
@@ -276,7 +274,7 @@ export function ProductControl<T extends FormValues>({
               />
               <ProductPriceControl<T>
                 isLoading={isLoading}
-                fieldNamePrefix={`${fieldNamePrefix}.price` as Path<T>}
+                fieldNamePrefix={fieldNamePrefix}
                 title={t("totalPrice")}
                 allowDeposits={allowDeposits}
               />
@@ -284,7 +282,7 @@ export function ProductControl<T extends FormValues>({
           ) : (
             <ProductPriceControl<T>
               isLoading={isLoading}
-              fieldNamePrefix={`${fieldNamePrefix}.price` as Path<T>}
+              fieldNamePrefix={fieldNamePrefix}
             />
           )}
 
@@ -559,19 +557,6 @@ export function ProductControl<T extends FormValues>({
             {categoryType === CATEGORY_TYPE_FIXED_DURATION && (
               <FixedDurationOptions fieldNamePrefix={fieldNamePrefix} />
             )}
-            <Form.Group
-              controlId={minSpendId}
-              className="advanced-switch-container"
-            >
-              <ProductPriceControl
-                title={t("minSpend")}
-                isRequired={false}
-                isMoreThanZero
-                allowDeposits={false}
-                isLoading={isLoading}
-                fieldNamePrefix={`${fieldNamePrefix}.minSpend` as Path<T>}
-              />
-            </Form.Group>
           </div>
         </Collapse>
 

package/src/product-set/product/price/ProductPriceControl.tsx

@@ -1,6 +1,9 @@
 import React from "react";
 import HookFormService from "@licklist/plugins/dist/services/Form/HookFormService";
-import { FormValues } from "@licklist/plugins/dist/types/services/Form/hook-form-service";
+import {
+  FieldNamePrefixPath,
+  FormValues,
+} from "@licklist/plugins/dist/types/services/Form/hook-form-service";
 import { useId } from "@react-aria/utils";
 import { Form } from "react-bootstrap";
 import Col from "react-bootstrap/Col";
@@ -13,13 +16,10 @@ export interface ProductPriceControlValues extends FormValues {
   price: number;
 }
 
-export interface ProductPriceControlProps<T> {
+export interface ProductPriceControlProps<T> extends FieldNamePrefixPath<T> {
   isLoading: boolean;
   title?: string;
   allowDeposits?: boolean;
-  fieldNamePrefix: Path<T>;
-  isRequired?: boolean;
-  isMoreThanZero?: boolean;
 }
 
 export function ProductPriceControl<T extends FormValues>({
@@ -27,15 +27,13 @@ export function ProductPriceControl<T extends FormValues>({
   fieldNamePrefix,
   title,
   allowDeposits,
-  isRequired = true,
-  isMoreThanZero,
 }: ProductPriceControlProps<T>) {
   const {
     control,
     formState: { errors },
   } = useFormContext<T>();
   const { t } = useTranslation("Design");
-  const productTitle = title ?? t("price");
+
   const priceId = useId();
 
   return (
@@ -45,7 +43,7 @@ export function ProductPriceControl<T extends FormValues>({
       className={!allowDeposits && "p-0"}
     >
       <Form.Group controlId={priceId}>
-        <Form.Label>{productTitle}</Form.Label>
+        <Form.Label>{title ?? t("price")}</Form.Label>
 
         <InputGroup hasValidation>
           <InputGroup.Prepend>
@@ -66,58 +64,38 @@ export function ProductPriceControl<T extends FormValues>({
                 name={name}
                 onChange={onChange}
                 isInvalid={HookFormService.isInvalid<T>(
-                  `${fieldNamePrefix}` as Path<T>,
+                  `${fieldNamePrefix}.price` as Path<T>,
                   errors
                 )}
                 disabled={isLoading}
               />
             )}
             control={control}
-            name={`${fieldNamePrefix}` as Path<T>}
+            name={`${fieldNamePrefix}.price` as Path<T>}
             rules={{
-              required: isRequired
-                ? (t("Validation:fieldRequired", {
-                    attribute: productTitle,
-                  }) as string)
-                : false,
-              min: !isMoreThanZero
-                ? {
-                    value: 0,
-                    message: t("Validation:fieldMinNumber", {
-                      attribute: productTitle,
-                      min: 0,
-                    }) as string,
-                  }
-                : undefined,
+              required: t("Validation:fieldRequired", {
+                attribute: t("price"),
+              }) as string,
+              min: {
+                value: 0,
+                message: t("Validation:fieldMinNumber", {
+                  attribute: t("price"),
+                  min: 0,
+                }) as string,
+              },
               max: {
                 value: 999999.99,
                 message: t("Validation:fieldMaxNumber", {
-                  attribute: productTitle,
+                  attribute: t("price"),
                   max: 999999.99,
                 }) as string,
               },
-
-              validate: (value) => {
-                if (
-                  !isMoreThanZero ||
-                  (isMoreThanZero &&
-                    (value === undefined || value === null || value === "")) ||
-                  (isMoreThanZero && Number(value) > 0)
-                ) {
-                  return true;
-                }
-
-                return t("Validation:fieldGreaterMinNumber", {
-                  attribute: productTitle,
-                  min: 0,
-                }) as string;
-              },
             }}
           />
 
           <Form.Control.Feedback type="invalid">
             {HookFormService.getErrors<T>(
-              `${fieldNamePrefix}` as Path<T>,
+              `${fieldNamePrefix}.price` as Path<T>,
               errors
             )}
           </Form.Control.Feedback>

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

@@ -1,7 +1,3 @@
-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,
@@ -18,27 +14,3 @@ 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,6 +34,7 @@ export function ProviderDetailsInput({
   const {
     register,
     formState: { errors },
+    setValue,
   } = useFormContext<ProviderDetailsInputValues>();
   const { t } = useTranslation(["App", "Design", "Validation"]);
 
@@ -148,6 +149,7 @@ 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";
 
-export interface Filters {
+interface Filters {
   id: string;
   name: string;
   email: string;

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

@@ -1,6 +1,5 @@
 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";
@@ -11,26 +10,11 @@ export default {
   title: "Sales/Guest Profile/Previous Bookings",
 } as Meta;
 
-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>
-  );
-};
+export const Default = (args) => (
+  <div>
+    <PreviousBookings {...args} />
+  </div>
+);
 
 Default.args = {
   orders: [
@@ -59,8 +43,6 @@ Default.args = {
       updatedAt: "2022-05-20 18:28:56",
       status: "cart",
       tickets: [],
-      orderableType: "event",
-      orderableId: 1,
       event: {
         id: 1,
         name: "testEvent1",
@@ -97,8 +79,6 @@ Default.args = {
       updatedAt: "2022-05-20 18:28:56",
       status: "cart",
       tickets: [],
-      orderableType: "event",
-      orderableId: 2,
       event: {
         id: 2,
         name: "testEvent2",
@@ -148,8 +128,6 @@ Default.args = {
       updatedAt: "2022-05-20 18:28:56",
       status: "cart",
       tickets: [],
-      orderableType: "event",
-      orderableId: 3,
       event: {
         id: 3,
         name: "testEvent3",
@@ -178,8 +156,6 @@ Default.args = {
       updatedAt: "2022-05-20 18:28:56",
       status: "cart",
       tickets: [],
-      orderableType: "event",
-      orderableId: 3,
       event: {
         id: 3,
         name: "testEvent3",
@@ -208,8 +184,6 @@ Default.args = {
       updatedAt: "2022-05-20 18:28:56",
       status: "cart",
       tickets: [],
-      orderableType: "event",
-      orderableId: 3,
       event: {
         id: 3,
         name: "testEvent3",
@@ -238,8 +212,6 @@ Default.args = {
       updatedAt: "2022-05-20 18:28:56",
       status: "cart",
       tickets: [],
-      orderableType: "event",
-      orderableId: 3,
       event: {
         id: 3,
         name: "testEvent3",
@@ -267,8 +239,6 @@ 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, ReactNode } from "react";
+import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { DateTime } from "luxon";
 import { Button } from "react-bootstrap";
@@ -8,13 +8,9 @@ const MAX_ORDERS_COUNT = 6;
 
 export type PreviousBookingsProps = {
   orders: Order[];
-  renderOrderTitleLinkByProvider?: (order: Order) => ReactNode;
 };
 
-export const PreviousBookings = ({
-  orders,
-  renderOrderTitleLinkByProvider,
-}: PreviousBookingsProps) => {
+export const PreviousBookings = ({ orders }: PreviousBookingsProps) => {
   const { t } = useTranslation("Design");
   const [showOlderBookings, setShowOlderBookings] = useState(false);
 
@@ -40,17 +36,13 @@ export const PreviousBookings = ({
       {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">{eventName}</p>
+                  <p className="label">{order.event?.name}</p>
                   {order.createdAt && (
                     <p className="event-date">{formatDate(order.createdAt)}</p>
                   )}

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

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

package/src/styles/customers/Filter.scss

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

package/src/styles/events/EventStatisticModal.scss

@@ -6,6 +6,43 @@
     .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,4 +36,3 @@
 @import "./virtualized/";
 @import "./error";
 @import "./customers/";
-@import "./striped-static-table/";

package/src/styles/snippet-templates/SnippetTemplateCard.scss

@@ -45,22 +45,6 @@ $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/table/StaticTable.tsx

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

package/src/typeahead/Typeahead.stories.tsx

@@ -1,23 +1,20 @@
 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", () => {
-  const form = useForm();
-  return (
-    <FormProvider {...form}>
+storiesOf("Typeahead", module)
+  .add("Typeahead", () => (
+    <>
       <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,54 +1,47 @@
 import React from "react";
 import Select from "react-select";
-import { Controller, useFormContext } from "react-hook-form";
+import { useForm, Controller } from "react-hook-form";
 
 export type TypeaheadOptions = {
-  id: number | string;
-  value: any;
+  id: number;
+  value: string;
   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 = "",
-  isInvalid,
-}: TypeaheadProps) {
-  const { control } = useFormContext();
-
-  const getErrorStyle = () => (isInvalid ? { borderColor: "red" } : {});
+}) {
+  const { control } = useForm({
+    mode: "onChange",
+  });
+  const prefix = "id";
 
   return (
     <>
       <Controller
-        name={name}
+        name={`${name}.${prefix as string}` as const}
         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,10 +6,8 @@ export interface Product {
   description: string;
   deposit: number;
   price: number;
-  minSub?: number;
   minAmount?: number;
   maxAmount?: number;
-  minSpend?: number | null;
   isSoldOut?: boolean;
   isRequired?: boolean;
   isUnlimited?: boolean;