@licklist/design 0.44.485-dev.27 → 0.44.485-dev.3

package/src/product-set/form/StepsControl.tsx

@@ -28,7 +28,6 @@ export function StepsControl({ isLoading }: StepsControlProps) {
     formState: { errors, isSubmitting },
     clearErrors,
     getValues,
-    setFocus,
   } = form;
 
   const { fields, append, remove } = useFieldArray({
@@ -58,14 +57,12 @@ export function StepsControl({ isLoading }: StepsControlProps) {
   return (
     <>
       {fields.map((step, index) => {
-        const stepFieldName = `steps.${index}` as const;
-
-        const stepData = getValues(stepFieldName);
+        const stepData: any = getValues(`steps.${index}` as const);
 
         return (
           <Controller
             key={`step-${step._id}`}
-            name={`${stepFieldName}.name` as const}
+            name={`steps.${index}.name` as const}
             control={control}
             rules={{
               required: t("Validation:fieldRequired", {
@@ -107,21 +104,6 @@ export function StepsControl({ isLoading }: StepsControlProps) {
                     ? step.productCategories.map(({ id }) => String(id))
                     : []
                 }
-                validate={() => {
-                  // @TODO investigate why form return true in case
-                  // when required field not filled. Looks like
-                  // we cann't use default hookForm trigger function
-                  // because we have venueMap outside this form.
-                  // So before closing we need to check directly by
-                  // error on name field. Instead of run trugger.
-                  const error = errors.steps?.[index]?.name;
-
-                  if (error) {
-                    setFocus(`${stepFieldName}.name` as const);
-                  }
-
-                  return Promise.resolve(!error);
-                }}
               >
                 <ProductCategoriesControl
                   isLoading={isLoading}

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,57 +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)) ||
-                  (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/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,7 +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/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/types/iframe.ts

@@ -6,7 +6,6 @@ export interface Product {
   description: string;
   deposit: number;
   price: number;
-  minSub?: number;
   minAmount?: number;
   maxAmount?: number;
   isSoldOut?: boolean;

package/dist/events/event-venue-map/components/MapPoint/components/ProductTooltip/ProductTooltip.d.ts

@@ -1,9 +0,0 @@
-/// <reference types="react" />
-type ProductTooltipProps = {
-    x: number;
-    y: number;
-    text: string;
-};
-export declare const ProductTooltip: ({ x, y, text }: ProductTooltipProps) => JSX.Element;
-export {};
-//# sourceMappingURL=ProductTooltip.d.ts.map

package/dist/events/event-venue-map/components/MapPoint/components/ProductTooltip/ProductTooltip.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ProductTooltip.d.ts","sourceRoot":"","sources":["../../../../../../src/events/event-venue-map/components/MapPoint/components/ProductTooltip/ProductTooltip.tsx"],"names":[],"mappings":";AAkBA,KAAK,mBAAmB,GAAG;IACzB,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,IAAI,EAAE,MAAM,CAAC;CACd,CAAC;AAEF,eAAO,MAAM,cAAc,mBAAoB,mBAAmB,gBA2CjE,CAAC"}

package/dist/events/event-venue-map/components/MapPoint/components/ProductTooltip/ProductTooltip.js

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,t=require("react"),r=(e=t)&&"object"==typeof e&&"default"in e?e.default:e,i=require("react-konva"),l="#000";exports.ProductTooltip=function(e){var t=e.x,o=e.y,c=e.text;return r.createElement(i.Group,{width:60,height:20,x:t+30,y:o-1},r.createElement(i.Rect,{x:-5,y:5,sceneFunc:function(e){e.beginPath(),e.moveTo(0,5),e.lineTo(5,0),e.lineTo(5,10),e.closePath(),e.fill()},fill:l,borderColor:l,opacity:.8}),r.createElement(i.Rect,{x:0,y:0,width:60,height:20,fill:l,cornerRadius:5,opacity:.8}),r.createElement(i.Text,{y:4,text:c,strokeWidth:5,width:60,align:"center",verticalAlign:"middle",fill:"#FFF"}))};

package/dist/events/event-venue-map/components/MapPoint/components/ProductTooltip/index.d.ts

@@ -1,2 +0,0 @@
-export { ProductTooltip } from "./ProductTooltip";
-//# sourceMappingURL=index.d.ts.map

package/dist/events/event-venue-map/components/MapPoint/components/ProductTooltip/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/events/event-venue-map/components/MapPoint/components/ProductTooltip/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC"}

package/dist/striped-static-table/StripedStaticTable.d.ts

@@ -1,7 +0,0 @@
-/// <reference types="react" />
-import { StaticTableProps, StaticTableData } from "../table";
-export type StripedStaticTableProps = Omit<StaticTableProps, "data"> & {
-    data: StaticTableData[][];
-};
-export declare const StripedStaticTable: ({ columns, className, data, ...props }: StripedStaticTableProps) => JSX.Element;
-//# sourceMappingURL=StripedStaticTable.d.ts.map

package/dist/striped-static-table/StripedStaticTable.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"StripedStaticTable.d.ts","sourceRoot":"","sources":["../../src/striped-static-table/StripedStaticTable.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,gBAAgB,EAAe,eAAe,EAAE,MAAM,UAAU,CAAC;AAE1E,MAAM,MAAM,uBAAuB,GAAG,IAAI,CAAC,gBAAgB,EAAE,MAAM,CAAC,GAAG;IACrE,IAAI,EAAE,eAAe,EAAE,EAAE,CAAC;CAC3B,CAAC;AAEF,eAAO,MAAM,kBAAkB,2CAK5B,uBAAuB,gBAiDzB,CAAC"}

package/dist/striped-static-table/StripedStaticTable.js

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,t=require("tslib"),a=require("react"),r=(e=a)&&"object"==typeof e&&"default"in e?e.default:e;require("../table/MenuButton.js"),require("../table/FilterHelperComponent.js"),require("../table/PaginationHelperComponent.js"),require("../table/PerPageHelperComponent.js");var l=require("../table/StaticTable.js");require("../table/TableHelperComponent.js"),require("../table/ReactTableHelperComponent.js");exports.StripedStaticTable=function(e){var a=e.columns,n=e.className,s=void 0===n?"":n,i=e.data,o=t.__rest(e,["columns","className","data"]),c=i.map((function(e){return e.map((function(e,a,l){var n=l.length;return Object.fromEntries(Object.entries(e).map((function(e){var l=t.__read(e,2),s=l[0],i=l[1];return"key"===s?[s,i]:0===a?[s,r.createElement("div",{key:s,className:"bold header-row"},i)]:a===n-1?[s,r.createElement("div",{key:s,className:"bold"},i)]:[s,i]})))}))})).flat();return r.createElement(l.StaticTable,t.__assign({columns:a,data:c,className:"striped-static-table ".concat(s),displayHeader:!1},o))};

package/dist/striped-static-table/index.d.ts

@@ -1,2 +0,0 @@
-export * from "./StripedStaticTable";
-//# sourceMappingURL=index.d.ts.map

package/dist/striped-static-table/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/striped-static-table/index.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAC"}

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

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