@licklist/design 0.44.485-dev.2 → 0.44.485-dev.20

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

@@ -189,7 +189,7 @@ export function ProductControl<T extends FormValues>({
 
   const onImageRemove = useCallback(
     (id, path) => {
-      handleImageRemove(id, path);
+      handleImageRemove(String(id), path);
     },
     [handleImageRemove]
   );
@@ -200,7 +200,13 @@ export function ProductControl<T extends FormValues>({
   }, [setLoading, isImageUploading]);
 
   useEffect(() => {
-    if (Array.isArray(images) && images?.length > 0) {
+    const formImages = getValues(`${fieldNamePrefix}.images` as Path<T>);
+
+    setInitialImages(formImages as Image[]);
+  }, [getValues, setInitialImages, fieldNamePrefix]);
+
+  useEffect(() => {
+    if (Array.isArray(images)) {
       setValue(
         `${fieldNamePrefix}.images` as Path<T>,
         images as UnpackNestedValue<PathValue<T, Path<T>>>
@@ -208,12 +214,6 @@ 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];
 

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,7 @@ 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/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;
+        }
+      }
     }
   } 
 }