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

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

@@ -189,7 +189,7 @@ export function ProductControl<T extends FormValues>({
 
   const onImageRemove = useCallback(
     (id, path) => {
-      handleImageRemove(String(id), path);
+      handleImageRemove(id, path);
     },
     [handleImageRemove]
   );
@@ -200,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>>>
@@ -214,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];
 

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/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;  
     }
   } 
 }