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

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

@@ -34,11 +34,11 @@ export function SnippetControl({
     setValue,
   } = useFormContext<SnippetFormValues>();
   const type = watch("type");
-  const isEvent = type === "event_list";
+  const isEvent = type === "event";
 
   const { displayCost, displayDescription, displayType } =
-    watch("widgetSetting");
-  const templateId = watch("designId") || "";
+    watch("snippetSetting");
+  const templateId = watch("templateId") || "";
 
   useEffect(() => {
     if (isEvent) {
@@ -56,7 +56,7 @@ export function SnippetControl({
 
     if (selectedTemplate) return;
 
-    setValue("designId", "");
+    setValue("templateId" as const, "");
     // 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:widgetName")}
+            placeholder={t("Design:snippetName")}
             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("widgetSetting.displayDescription")}
+              {...register("snippetSetting.displayDescription")}
               id={displayDescriptionId}
               isInvalid={!isValid}
               name="snippetSetting.displayDescription"
@@ -135,7 +135,7 @@ export function SnippetControl({
               disabled={isLoading}
             />
             <Form.Check
-              {...register("widgetSetting.displayCost")}
+              {...register("snippetSetting.displayCost")}
               id={displayCostId}
               isInvalid={!isValid}
               name="snippetSetting.displayCost"
@@ -145,7 +145,7 @@ export function SnippetControl({
               disabled={isLoading}
             />
             <Form.Check
-              {...register("widgetSetting.displayType")}
+              {...register("snippetSetting.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="designId"
+            name="templateId"
             rules={{ required: true }}
             render={({
               field: { value, onChange },
@@ -197,7 +197,9 @@ export function SnippetControl({
               const fieldSetValue = value ? String(value) : "";
               return (
                 <>
-                  <Form.Label className="mt-5">{t("widgetDesign")}</Form.Label>
+                  <Form.Label className="mt-5">
+                    {t("snippetTemplate")}
+                  </Form.Label>
                   <Form.Control
                     as="select"
                     disabled={isLoading}
@@ -221,7 +223,7 @@ export function SnippetControl({
                   <Form.Control.Feedback type="invalid">
                     {HookFormService.hasError(error, "required") &&
                       t("Validation:fieldRequired", {
-                        attribute: t("Design:widgetDesign"),
+                        attribute: t("Design:snippetTemplate"),
                       })}
                   </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;
-  designId: string;
-  widgetSetting?: {
+  templateId: string;
+  snippetSetting?: {
     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:selectWidgetViewType")}</ModalTitle>
+        <ModalTitle as="h5">{t("Design:selectSnippetViewType")}</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 overflow-auto"
+            className="d-flex flex-column-reverse flex-sm-row"
           >
             <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_LIST,
-  SNIPPET_TEMPLATE_TYPE_VENUE_MAP,
+  SNIPPET_TEMPLATE_TYPE_EVENT,
+  SNIPPET_TEMPLATE_TYPE_CALENDAR,
 } 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("designSettings")}
+          {t("templateSettings")}
         </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("widgetType")}</Form.Label>
+              <Form.Label>{t("snippetType")}</Form.Label>
               <Form.Control
                 as="select"
                 {...register("type", {
                   required: t("Validation:fieldRequired", {
-                    attribute: t("widgetType"),
+                    attribute: t("snippetType"),
                   }) as string,
                 })}
-                placeholder={t("widgetType")}
+                placeholder={t("snippetType")}
               >
-                <option value={SNIPPET_TEMPLATE_TYPE_EVENT_LIST}>
-                  {t("widgetTypeEventList")}
+                <option value={SNIPPET_TEMPLATE_TYPE_EVENT}>
+                  {t("snippetTypeEventList")}
                 </option>
-                <option value={SNIPPET_TEMPLATE_TYPE_VENUE_MAP}>
-                  {t("widgetTypeVenueMaps")}
+                <option value={SNIPPET_TEMPLATE_TYPE_CALENDAR}>
+                  {t("snippetTypeVenueMaps")}
                 </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_LIST,
-  SNIPPET_TYPE_VENUE_MAP,
+  SNIPPET_TYPE_EVENT,
+  SNIPPET_TYPE_CALENDAR,
 } 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_LIST },
+    template: { type = SNIPPET_TYPE_EVENT },
   } = useContext(SnippetTemplateContext);
 
   const handleOnClick = (nextView: keyof typeof snippetTemplateViews) => {
@@ -186,7 +186,7 @@ export function Preview({
                   </div>
                 </SettingButton>
 
-                {providerHasMap && type === SNIPPET_TYPE_VENUE_MAP && (
+                {providerHasMap && type === SNIPPET_TYPE_CALENDAR && (
                   <>
                     <div className="pt-4">
                       <h4>{t("Calendar")}</h4>

package/src/sortable-tree/SortableTreeItem.tsx

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

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

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

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

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

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

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

package/src/styles/packages.scss

@@ -36,4 +36,3 @@
 @import "./virtualized/";
 @import "./error";
 @import "./customers/";
-@import "./striped-static-table/";

package/src/styles/sales/BookingFilter.scss

@@ -33,7 +33,7 @@
             margin: 0.875rem;
             z-index: 3;
           }
-
+          
           .form-control {
             height: 2.75rem;
             color: $blue;
@@ -57,11 +57,7 @@
         margin-right: 0.5rem;
       }
 
-      .cancel-button,
-      .add-filters-button,
-      .refresh-button,
-      .fullscreen-button,
-      .minimize-button {
+      .cancel-button, .add-filters-button, .refresh-button, .fullscreen-button, .minimize-button {
         display: flex;
         color: $gray-800;
 
@@ -96,14 +92,11 @@
         }
       }
 
-      .fullscreen-button,
-      .minimize-button {
+      .fullscreen-button, .minimize-button {
         min-width: 7.25rem;
       }
 
-      .refresh-button,
-      .fullscreen-button,
-      .minimize-button {
+      .refresh-button, .fullscreen-button, .minimize-button {
         .icon {
           background-color: transparent;
 
@@ -152,37 +145,13 @@
   .additional-filter-section {
     margin-top: 1.25rem;
 
-    @include media-breakpoint-up(md) {
+    @include media-breakpoint-up(md){
       .form-group {
         margin-bottom: 0;
       }
     }
   }
 
-  .additional-filter-container {
-    flex-wrap: nowrap;
-
-    @include media-breakpoint-down(md) {
-      flex-wrap: wrap;
-      .date-container {
-        width: 100%;
-        flex: 1;
-      }
-      .btn-primary {
-        margin-top: 1rem;
-      }
-    }
-
-    @include media-breakpoint-between(md, lg) {
-      flex-wrap: nowrap;
-
-      .date-container {
-        width: auto;
-        flex: 0 0 35%;
-      }
-    }
-  }
-
   .searching-for-section {
     .tags {
       display: flex;
@@ -192,9 +161,8 @@
       p {
         margin: 0;
       }
-
-      .label,
-      .search-query-param {
+      
+      .label, .search-query-param {
         font-size: 1.125rem;
         font-weight: 600;
       }
@@ -207,8 +175,8 @@
       .result-tag {
         display: flex;
         align-items: center;
-        border: 1px solid #dcdcdc;
-        background-color: #f5f5f5;
+        border: 1px solid #DCDCDC;
+        background-color: #F5F5F5;
         padding: 0.5rem 0.75rem;
         font-size: 0.75rem;
         text-transform: capitalize;
@@ -218,7 +186,7 @@
           cursor: pointer;
           width: 1.125rem;
           height: 1.125rem;
-          background-color: #dcdcdc;
+          background-color: #DCDCDC;
           border-radius: 1rem;
           display: flex;
           align-items: center;
@@ -228,4 +196,4 @@
       }
     }
   }
-}
+}

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/styles/static/DateRangeInput.scss

@@ -5,10 +5,6 @@
 
   .date-range-input[readonly] {
     background-color: transparent;
-
-    &:disabled {
-      background-color: #ebebeb;
-    }
   }
 
   .date-range-input-icon {
@@ -17,4 +13,4 @@
     bottom: 1rem;
     color: $gray-500;
   }
-}
+}

package/src/table/FilterHelperComponent.tsx

@@ -33,7 +33,6 @@ function FilterHelperComponent({
     if (onClickFn) {
       onClickFn("");
     }
-    setItem("");
   };
 
   const onSearch = () => {

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