@licklist/design 0.44.485-dev.6 → 0.44.485-dev.60

package/src/sales/booking/filter/components/SearchingForSection.tsx

@@ -5,17 +5,47 @@ import {
   BookingContext,
   BookingFilters,
 } from "@licklist/plugins/dist/context/booking/BookingContext";
+import { User } from "@licklist/core/dist/DataMapper/User/UserDataMapper";
 import { ResultTagButton } from "./ResultTagButton";
 
-const SEARCHING_FOR_FILTER_KEYS = ["q", "status", "date", "staffMember"];
+const SEARCHING_FOR_FILTER_KEYS = [
+  "q",
+  "status",
+  "order_date_from",
+  "created_by",
+];
 
-export const SearchingForSection = () => {
+export interface FilterSectionProps {
+  staffMembers?: User[] | null;
+  isLoading: boolean;
+}
+
+export const SearchingForSection = ({ staffMembers }: { staffMembers }) => {
   const { t } = useTranslation("Design");
   const { filters, setFilters } = useContext(BookingContext);
 
   const filteredFilters = useMemo(() => {
+    const selectedMember = staffMembers?.find(
+      (staffMember) => Number(filters?.created_by) === staffMember?.id
+    );
     return SEARCHING_FOR_FILTER_KEYS.reduce(
       (prevValues: Partial<BookingFilters>, currentKey: string) => {
+        if (currentKey === "created_by" && filters[currentKey]) {
+          return {
+            ...prevValues,
+            [currentKey]: `${selectedMember?.firstName || ""} ${
+              selectedMember?.lastName || ""
+            }`,
+          };
+        }
+        if (currentKey === "order_date_from" && filters[currentKey]) {
+          return {
+            ...prevValues,
+            [currentKey]: `${filters.order_date_from || ""} - ${
+              filters?.order_date_to || ""
+            }`,
+          };
+        }
         if (filters[currentKey]) {
           return { ...prevValues, [currentKey]: filters[currentKey] };
         }
@@ -24,13 +54,17 @@ export const SearchingForSection = () => {
       },
       {}
     );
-  }, [filters]);
+  }, [filters, staffMembers]);
 
   const resetAllFilters = () => {
     setFilters({ isFilterOpen: true });
   };
 
   const onResetSelectedFilter = (key: string) => {
+    if (key === "order_date_from") {
+      setFilters({ ...filters, order_date_from: "", order_date_to: "" });
+      return;
+    }
     setFilters({ ...filters, [key]: "" });
   };
 

package/src/sales/booking/tabs/BookingTabs.tsx

@@ -21,6 +21,7 @@ export type BookingTabsProps = HasPermissionProp &
     onAddButtonClick?: () => void;
     viewType: BOOKING_TYPE;
     onSetType: (value: BOOKING_TYPE) => void;
+    hasBookingManagment: boolean;
   }>;
 
 export const BookingTabs = ({
@@ -28,6 +29,7 @@ export const BookingTabs = ({
   onReportsClick,
   onAddButtonClick,
   hasPermission = false,
+  hasBookingManagment,
   viewType,
   onSetType,
 }: BookingTabsProps) => {
@@ -50,11 +52,10 @@ export const BookingTabs = ({
                 onSetType(tabType);
               }}
             >
-              {tabType === BOOKING_LIST_TYPE ? (
-                <BookingList />
-              ) : (
+              {tabType === BOOKING_CALENDAR_TYPE && hasBookingManagment && (
                 <BookingCalendar />
               )}
+              {tabType === BOOKING_LIST_TYPE && <BookingList />}
             </Button>
           );
         })}

package/src/sales/coupon/control/CouponFormControl.tsx

@@ -233,6 +233,7 @@ export const CouponFormControl = ({
               <Form.Control
                 type="date"
                 {...register("validTill")}
+                value={validTillValue}
                 onChange={(e) => {
                   const date = DateTime.fromSQL(e.target.value).toISODate();
                   setValue("validTill", date);
@@ -331,6 +332,7 @@ export const CouponFormControl = ({
             <Form.Group>
               <Form.Label>{t("Design:totalCoupons")}</Form.Label>
               <Form.Control
+                {...register("totalCoupons")}
                 type="number"
                 isInvalid={errors.totalCoupons !== undefined}
                 disabled={isLoading}

package/src/sales/filters/SaleFilter.stories.tsx

@@ -13,7 +13,7 @@ export const Default: Story<SaleFiltersProps> = () => {
     name: "",
     email: "",
     date: "",
-    is_pending: false,
+    is_in_cart: false,
   });
 
   return <SaleFilters values={values} onChange={setValues} />;

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;
@@ -12,7 +12,7 @@ interface Filters {
   order_date_to: string;
   orderable_date_from: string;
   orderable_date_to: string;
-  is_pending: boolean;
+  is_in_cart: boolean;
 }
 
 export interface SaleFiltersProps {

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/setting/dashboard/snippets/control/SnippetControl.tsx

@@ -34,11 +34,11 @@ export function SnippetControl({
     setValue,
   } = useFormContext<SnippetFormValues>();
   const type = watch("type");
-  const isEvent = type === "event";
+  const isEvent = type === "event_list";
 
   const { displayCost, displayDescription, displayType } =
-    watch("snippetSetting");
-  const templateId = watch("templateId") || "";
+    watch("widgetSetting");
+  const templateId = watch("designId") || "";
 
   useEffect(() => {
     if (isEvent) {
@@ -56,7 +56,7 @@ export function SnippetControl({
 
     if (selectedTemplate) return;
 
-    setValue("templateId" as const, "");
+    setValue("designId", "");
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [templateId, type, templates]);
 
@@ -80,7 +80,7 @@ export function SnippetControl({
                 attribute: t("name"),
               }) as string,
             })}
-            placeholder={t("Design:snippetName")}
+            placeholder={t("Design:widgetName")}
             isInvalid={Boolean(errors.name)}
           />
           <Form.Control.Feedback type="invalid">
@@ -125,7 +125,7 @@ export function SnippetControl({
           >
             <Form.Label className="mb-3">{t("Options")}</Form.Label>
             <Form.Check
-              {...register("snippetSetting.displayDescription")}
+              {...register("widgetSetting.displayDescription")}
               id={displayDescriptionId}
               isInvalid={!isValid}
               name="snippetSetting.displayDescription"
@@ -135,7 +135,7 @@ export function SnippetControl({
               disabled={isLoading}
             />
             <Form.Check
-              {...register("snippetSetting.displayCost")}
+              {...register("widgetSetting.displayCost")}
               id={displayCostId}
               isInvalid={!isValid}
               name="snippetSetting.displayCost"
@@ -145,7 +145,7 @@ export function SnippetControl({
               disabled={isLoading}
             />
             <Form.Check
-              {...register("snippetSetting.displayType")}
+              {...register("widgetSetting.displayType")}
               id={displayTypeId}
               isInvalid={!isValid}
               name="snippetSetting.displayType"
@@ -188,7 +188,7 @@ export function SnippetControl({
         <Form.Group as={Col} xs sm={12} md={8} lg={10} xl={12}>
           <Controller
             control={control}
-            name="templateId"
+            name="designId"
             rules={{ required: true }}
             render={({
               field: { value, onChange },
@@ -197,9 +197,7 @@ export function SnippetControl({
               const fieldSetValue = value ? String(value) : "";
               return (
                 <>
-                  <Form.Label className="mt-5">
-                    {t("snippetTemplate")}
-                  </Form.Label>
+                  <Form.Label className="mt-5">{t("widgetDesign")}</Form.Label>
                   <Form.Control
                     as="select"
                     disabled={isLoading}
@@ -223,7 +221,7 @@ export function SnippetControl({
                   <Form.Control.Feedback type="invalid">
                     {HookFormService.hasError(error, "required") &&
                       t("Validation:fieldRequired", {
-                        attribute: t("Design:snippetTemplate"),
+                        attribute: t("Design:widgetDesign"),
                       })}
                   </Form.Control.Feedback>
                 </>

package/src/setting/dashboard/snippets/form/SnippetForm.tsx

@@ -17,8 +17,8 @@ import { SnippetContextProvider, SnippetLoadingContext } from "./context";
 export interface SnippetFormValues extends FormValues {
   name: string;
   type: SnippetType;
-  templateId: string;
-  snippetSetting?: {
+  designId: string;
+  widgetSetting?: {
     displayDescription: boolean;
     displayCost: boolean;
     displayType: boolean;

package/src/setting/dashboard/snippets/modal/SnippetViewTypeModal.tsx

@@ -58,7 +58,7 @@ export const SnippetViewTypeModal = ({
       contentClassName="rounded"
     >
       <ModalHeader className="align-items-center border-0">
-        <ModalTitle as="h5">{t("Design:selectSnippetViewType")}</ModalTitle>
+        <ModalTitle as="h5">{t("Design:selectWidgetViewType")}</ModalTitle>
 
         <Button variant="danger" className="btn-sm rounded" onClick={onHide}>
           <Icon type="times" height="1.2rem" />

package/src/snippet/snippet-template/SnippetTemplate.tsx

@@ -44,7 +44,7 @@ export function SnippetTemplate({
         <SnippetTemplateViewContextProvider>
           <div
             ref={containerRef}
-            className="d-flex flex-column-reverse flex-sm-row"
+            className="d-flex flex-column-reverse flex-sm-row overflow-auto"
           >
             <div className="d-flex flex-grow-1">
               <Preview

package/src/snippet/snippet-template/form/SnippetTemplateForm.tsx

@@ -6,8 +6,8 @@ import { useTranslation } from "react-i18next";
 import { isEqual } from "lodash";
 import {
   SnippetTemplateValues,
-  SNIPPET_TEMPLATE_TYPE_EVENT,
-  SNIPPET_TEMPLATE_TYPE_CALENDAR,
+  SNIPPET_TEMPLATE_TYPE_EVENT_LIST,
+  SNIPPET_TEMPLATE_TYPE_VENUE_MAP,
 } from "@licklist/core/dist/DataMapper/Provider/SnippetTemplateDataMapper";
 import { HasPermissionProp } from "@licklist/plugins/dist/types/permission/Permission";
 import Row from "react-bootstrap/Row";
@@ -80,7 +80,7 @@ export function SnippetTemplateForm({
     <FormProvider {...form}>
       <Form onSubmit={form.handleSubmit(onSubmit)}>
         <h2 className="mb-2 pb-1 border-bottom border-secondary">
-          {t("templateSettings")}
+          {t("designSettings")}
         </h2>
 
         <Row>
@@ -113,21 +113,21 @@ export function SnippetTemplateForm({
         {providerHasMap && (
           <Row>
             <Form.Group as={Col} xs sm={12} md={8} lg={10} xl={12}>
-              <Form.Label>{t("snippetType")}</Form.Label>
+              <Form.Label>{t("widgetType")}</Form.Label>
               <Form.Control
                 as="select"
                 {...register("type", {
                   required: t("Validation:fieldRequired", {
-                    attribute: t("snippetType"),
+                    attribute: t("widgetType"),
                   }) as string,
                 })}
-                placeholder={t("snippetType")}
+                placeholder={t("widgetType")}
               >
-                <option value={SNIPPET_TEMPLATE_TYPE_EVENT}>
-                  {t("snippetTypeEventList")}
+                <option value={SNIPPET_TEMPLATE_TYPE_EVENT_LIST}>
+                  {t("widgetTypeEventList")}
                 </option>
-                <option value={SNIPPET_TEMPLATE_TYPE_CALENDAR}>
-                  {t("snippetTypeVenueMaps")}
+                <option value={SNIPPET_TEMPLATE_TYPE_VENUE_MAP}>
+                  {t("widgetTypeVenueMaps")}
                 </option>
               </Form.Control>
             </Form.Group>

package/src/snippet/snippet-template/preview/Preview.tsx

@@ -3,8 +3,8 @@ import { useTranslation } from "react-i18next";
 import { MemoryRouter } from "react-router-dom";
 import { Button } from "react-bootstrap";
 import {
-  SNIPPET_TYPE_EVENT,
-  SNIPPET_TYPE_CALENDAR,
+  SNIPPET_TYPE_EVENT_LIST,
+  SNIPPET_TYPE_VENUE_MAP,
 } from "@licklist/core/dist/DataMapper/Provider/SnippetDataMapper";
 import { ProductSet } from "@licklist/core/dist/DataMapper/Product/ProductSetDataMapper";
 import { IframeEventCard } from "../../../iframe/event/event-card";
@@ -44,7 +44,7 @@ export function Preview({
 
   const { setView } = useContext(SnippetTemplateViewContext);
   const {
-    template: { type = SNIPPET_TYPE_EVENT },
+    template: { type = SNIPPET_TYPE_EVENT_LIST },
   } = useContext(SnippetTemplateContext);
 
   const handleOnClick = (nextView: keyof typeof snippetTemplateViews) => {
@@ -186,7 +186,7 @@ export function Preview({
                   </div>
                 </SettingButton>
 
-                {providerHasMap && type === SNIPPET_TYPE_CALENDAR && (
+                {providerHasMap && type === SNIPPET_TYPE_VENUE_MAP && (
                   <>
                     <div className="pt-4">
                       <h4>{t("Calendar")}</h4>

package/src/sortable-tree/SortableTreeItem.tsx

@@ -40,6 +40,9 @@ export interface SortableTreeItemProps {
   isIconInHeader?: boolean;
   treeLineIconColor?: string;
   modalLabel?: string;
+  cancelChanges?: () => void;
+  edit?: () => void;
+  saveValidField?: () => void;
   modalClass?: ProductSetModalClassesType;
   isNewAdded?: boolean;
   onDelete?: () => void;
@@ -70,6 +73,9 @@ export function SortableTreeItem({
   isNewAdded = false,
   onDelete,
   validate,
+  cancelChanges,
+  saveValidField,
+  edit,
   secondaryBadge,
   setIsExpanded,
 }: SortableTreeItemProps) {
@@ -122,9 +128,27 @@ export function SortableTreeItem({
     if (!validate) setIsModalVisible(false);
 
     const success = await validate?.();
-    if (success) setIsModalVisible(false);
+
+    if (success) {
+      if (saveValidField) saveValidField();
+      setIsModalVisible(false);
+    }
+  };
+
+  const onCancel = async () => {
+    if (!cancelChanges) {
+      return onHide();
+    }
+    cancelChanges();
+    setIsModalVisible(false);
   };
 
+  const onEdit = (e) => {
+    e.stopPropagation();
+    if (edit && !isModalVisible) edit();
+    setIsModalVisible(true);
+  }
+
   useEffect(() => {
     setExpanded(isExpanded);
   }, [isExpanded]);
@@ -258,10 +282,7 @@ export function SortableTreeItem({
                   className="border-0 open-edit-right-modal-button"
                   role="button"
                   tabIndex={0}
-                  onClick={(e) => {
-                    e.stopPropagation();
-                    setIsModalVisible(true);
-                  }}
+                  onClick={(e) => onEdit(e)}
                   onKeyDown={(e) => e.stopPropagation()}
                 >
                   <Icon type="ellipsis-h" color="#0E8CE2" height="1rem" />
@@ -291,7 +312,7 @@ export function SortableTreeItem({
                   <button
                     className="p-0 cancel-add-step-btn border-0"
                     type="button"
-                    onClick={onHide}
+                    onClick={onCancel}
                   >
                     <span>{t("Design:cancel")}</span>
                   </button>

package/src/static/date-range-input/DateRangeInput.tsx

@@ -20,6 +20,7 @@ export type DateRangeInputProps = {
   startDate?: string;
   endDate?: string;
   months?: number;
+  disabled?: boolean;
   onDateChange?: (dates: { startDate?: string; endDate?: string }) => void;
 };
 
@@ -29,6 +30,7 @@ export const DateRangeInput = ({
   endDate,
   onDateChange,
   months = 2,
+  disabled,
 }: DateRangeInputProps) => {
   const { t } = useTranslation("Design");
 
@@ -123,6 +125,7 @@ export const DateRangeInput = ({
           <Form.Control
             type="input"
             placeholder={placeholder}
+            disabled={disabled}
             readOnly
             className="date-range-input"
             value={stringDatesToInputValue({ startDate, endDate })}

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/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/iframe-order-process/IframeOrderProcess.scss

@@ -202,7 +202,7 @@
 
   .step-numbers {
     font-weight: 500;
-    margin-left: 1rem;
+    margin: 0 1rem;
     color: $snippet-page-header-steps-inactive-step-body-color;
 
     .active-step {
@@ -225,6 +225,7 @@
     height: 2rem;
     transition: $color-transition;
     max-width: calc(100% - 12rem);
+    flex-grow: 1;
 
     .step {
       display: flex;
@@ -233,10 +234,12 @@
       margin: 0 0.5rem;
       z-index: 1;
       scroll-margin: 10rem;
+      flex-grow: 1;
 
       .number {
         text-align: center;
-        width: 3rem;
+        max-width: 3rem;
+        width: 100%;
         height: 0.25rem;
         line-height: 2.5rem;
         background: $snippet-page-header-steps-inactive-step-background-color;

package/src/styles/iframe-page/PageBody.scss

@@ -60,6 +60,7 @@
 
     .left-block-container {
       height: calc(100svh - 12rem);
+      scrollbar-width: none;
       overflow: scroll;
 
       .iframe-event-card {
@@ -119,6 +120,7 @@
 
         &.show {
           overflow: scroll;
+          scrollbar-width: none;
           overflow-x: hidden;
         }