@licklist/design 0.44.486-dev.83 → 0.44.486

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

@@ -0,0 +1,28 @@
+import React, { useState } from "react";
+import { Button } from "react-bootstrap";
+import { Meta, Story } from "@storybook/react";
+
+import {
+  SnippetViewTypeModal,
+  SnippetViewTypeModalProps,
+} from "./SnippetViewTypeModal";
+
+export default {
+  title: "Snippets / SnippetViewTypeModal",
+} as Meta;
+
+export const Default: Story<SnippetViewTypeModalProps> = () => {
+  const [isVisible, setIsVisible] = useState(false);
+  return (
+    <div>
+      <Button onClick={() => setIsVisible(true)}>Open modal</Button>
+      <SnippetViewTypeModal
+        isVisible={isVisible}
+        onSubmit={(value) => console.log(value)}
+        onHide={() => setIsVisible(false)}
+      />
+    </div>
+  );
+};
+
+Default.args = {};

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

@@ -0,0 +1,104 @@
+import React, { useState } from "react";
+import { Button, Modal } from "react-bootstrap";
+import { useTranslation } from "react-i18next";
+import clsx from "clsx";
+
+import ModalHeader from "react-bootstrap/ModalHeader";
+import ModalTitle from "react-bootstrap/ModalTitle";
+import Col from "react-bootstrap/Col";
+import {
+  SNIPPET_VIEW_TYPE_GRID,
+  SNIPPET_VIEW_TYPE_LIST,
+  SnippetViewType,
+} from "@licklist/core/dist/DataMapper/Provider/SnippetDataMapper";
+import Icon from "../../../../static/Icon";
+
+export const SNIPPET_VIEW_TYPES: {
+  [SNIPPET_VIEW_TYPE_GRID]: { label: string; icon: string };
+  [SNIPPET_VIEW_TYPE_LIST]: { label: string; icon: string };
+} = {
+  [SNIPPET_VIEW_TYPE_GRID]: {
+    label: SNIPPET_VIEW_TYPE_GRID,
+    icon: "th",
+  },
+  [SNIPPET_VIEW_TYPE_LIST]: {
+    label: SNIPPET_VIEW_TYPE_LIST,
+    icon: "bars",
+  },
+};
+
+export interface SnippetViewTypeModalProps {
+  isVisible: boolean;
+  onHide: () => void;
+  onSubmit: (value: SnippetViewType) => void;
+}
+
+export const SnippetViewTypeModal = ({
+  isVisible,
+  onHide,
+  onSubmit,
+}: SnippetViewTypeModalProps) => {
+  const { t } = useTranslation(["Design"]);
+  const allViewTypes = Object.keys(SNIPPET_VIEW_TYPES);
+  const [viewType, setViewType] = useState<SnippetViewType>("grid");
+
+  const onModalSubmit = () => {
+    onSubmit(viewType);
+    onHide();
+  };
+
+  return (
+    <Modal
+      size="lg"
+      centered
+      show={isVisible}
+      onHide={onHide}
+      className="p-3 border-0"
+      animation={false}
+      contentClassName="rounded"
+    >
+      <ModalHeader className="align-items-center border-0">
+        <ModalTitle as="h5">{t("Design:selectSnippetViewType")}</ModalTitle>
+
+        <Button variant="danger" className="btn-sm rounded" onClick={onHide}>
+          <Icon type="times" height="1.2rem" />
+        </Button>
+      </ModalHeader>
+
+      <Modal.Body>
+        <div className="d-flex flex-row flex-wrap p-4 justify-content-between">
+          {allViewTypes.map((currentViewType) => {
+            const { label, icon } = SNIPPET_VIEW_TYPES[currentViewType];
+            return (
+              <Col key={label}>
+                <Button
+                  variant="outline-light"
+                  className={clsx(
+                    "d-flex justify-content-center align-items-center flex-column w-100 py-6 rounded",
+                    viewType === currentViewType && "selected-snippet-type"
+                  )}
+                  role="button"
+                  tabIndex={0}
+                  onClick={() =>
+                    setViewType(currentViewType as SnippetViewType)
+                  }
+                >
+                  <Icon type={icon} color="#0e8ce2" height="4rem" />
+                  <h6 className="text-dark mt-3">{t(label)}</h6>
+                </Button>
+              </Col>
+            );
+          })}
+        </div>
+      </Modal.Body>
+      <Modal.Footer className="border-0">
+        <Button variant="secondary" onClick={onHide}>
+          {t("cancel")}
+        </Button>
+        <Button variant="primary" onClick={onModalSubmit}>
+          {t("confirm")}
+        </Button>
+      </Modal.Footer>
+    </Modal>
+  );
+};

package/src/setting/dashboard/snippets/modal/index.ts

@@ -0,0 +1,2 @@
+export { SnippetViewTypeModal } from "./SnippetViewTypeModal";
+export type { SnippetViewTypeModalProps } from "./SnippetViewTypeModal";

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,13 +3,10 @@ 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 { DateTime } from "luxon";
-import { Calendar, defaultStartDay } from "../../../calendar";
-import { getMonthCalendarDates } from "../../../calendar/utils";
 import { IframeEventCard } from "../../../iframe/event/event-card";
 import { SettingButton } from "../settings";
 import {
@@ -27,6 +24,7 @@ import {
 } from "../../../iframe";
 import { NumberInput } from "../../../iframe/order-process/components/CategoryProduct/components/NumberInput";
 import { SnippetTemplateContext } from "../context/snippetTemplate";
+import { EventCalendar } from "../../../iframe/event/event-calendar";
 
 const DEFAULT_IMAGE =
   "https://images.unsplash.com/photo-1638988319382-90e61be77c59?ixlib=rb-1.2.1&auto=format&fit=crop&w=687&q=80";
@@ -46,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) => {
@@ -54,10 +52,6 @@ export function Preview({
     onSettingClick();
   };
 
-  const [currentDate, setCurrentDate] = useState<DateTime>(defaultStartDay);
-  const [selectedDate, setSelectedDate] = useState<DateTime | null>(null);
-  const calendarDates = getMonthCalendarDates(currentDate);
-
   return (
     <div className="w-100 h-100 snippet-template-preview">
       <Page
@@ -192,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>
@@ -202,13 +196,7 @@ export function Preview({
                         className="mt-3 m-0"
                         containerClassName="mt-5 pt-5"
                       >
-                        <Calendar
-                          currentDate={currentDate}
-                          setCurrentDate={setCurrentDate}
-                          selectedDate={selectedDate}
-                          setSelectedDate={setSelectedDate}
-                          calendarDates={calendarDates}
-                        />
+                        <EventCalendar />
                       </SettingButton>
                     </div>
                     <div className="pt-4">
@@ -380,6 +368,11 @@ export function Preview({
                   type="Party Doors 22:00 - 03:00"
                   cost={6}
                   date="Sat 2nd May"
+                  snippetSetting={{
+                    displayCost: true,
+                    displayType: true,
+                    displayDescription: true,
+                  }}
                   goToDetails={() => null}
                   shortDate="07/03/2023"
                 />

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,26 +122,7 @@ export function SortableTreeItem({
     if (!validate) setIsModalVisible(false);
 
     const success = await validate?.();
-
-    if (success) {
-      if (saveValidField) saveValidField();
-      setIsModalVisible(false);
-    }
-  };
-
-  const onCancel = () => {
-    if (!cancelChanges) {
-      onHide();
-      return;
-    }
-    cancelChanges();
-    setIsModalVisible(false);
-  };
-
-  const onEdit = (e) => {
-    e.stopPropagation();
-    if (edit && !isModalVisible) edit();
-    setIsModalVisible(true);
+    if (success) setIsModalVisible(false);
   };
 
   useEffect(() => {
@@ -283,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" />
@@ -313,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/CountryCodeSelect.tsx

@@ -52,9 +52,11 @@ function CountryCodeSelect({
           {t("chooseCountry")}
         </option>
         {sortedCountries.map((key: keyof typeof en) => (
-          <option key={key as string} value={key as string}>
-            {en[key]}
-          </option>
+          <>
+            <option key={key as string} value={key as string}>
+              {en[key]}
+            </option>
+          </>
         ))}
       </Form.Control>
       <Form.Control.Feedback type="invalid">{error}</Form.Control.Feedback>

package/src/static/RestrictedAccess.tsx

@@ -4,7 +4,7 @@ import RouteService from "@licklist/plugins/dist/services/Route/RouteService";
 import { useTranslation } from "react-i18next";
 import Icon from "./Icon";
 
-function RestrictedAccess() {
+function RestrictedAccess(): JSX.Element {
   const { t } = useTranslation("Design");
 
   return (

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

@@ -3,7 +3,7 @@ import { Button, Form, OverlayTrigger, Popover } from "react-bootstrap";
 import { DateRange, Range } from "react-date-range";
 import { useClickAway } from "react-use";
 import { useTranslation } from "react-i18next";
-import { Modifier } from "@popperjs/core";
+import type Popper from "@popperjs/core";
 import { useId } from "@react-aria/utils";
 import { Icon } from "..";
 import {
@@ -15,12 +15,11 @@ import {
 import "react-date-range/dist/styles.css";
 import "react-date-range/dist/theme/default.css";
 
-type DateRangeInputProps = {
+export type DateRangeInputProps = {
   placeholder: string;
   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 })}
@@ -141,7 +138,7 @@ export const DateRangeInput = ({
   );
 };
 
-const sameWidthPopperModifier: Modifier<
+export const sameWidthPopperModifier: Popper.Modifier<
   "sameWidth",
   Record<string, unknown>
 > = {

package/src/static/form-number-input/FormNumberInput.tsx

@@ -15,7 +15,6 @@ interface FormNumberInputProps {
   label: string;
   fieldName: string;
   step?: number;
-  onChange?: (value: number) => void;
   disabled?: boolean;
   rules?: Pick<
     RegisterOptions,
@@ -29,7 +28,6 @@ export const FormNumberInput = ({
   step = 1,
   rules,
   disabled,
-  onChange,
 }: FormNumberInputProps) => {
   const controlId = useId();
   const { t } = useTranslation("Validation");
@@ -78,12 +76,7 @@ export const FormNumberInput = ({
               disabled={disabled}
               isInvalid={HookFormService.isInvalid(fieldName, errors)}
               {...field}
-              onChange={(event) => {
-                if (onChange) {
-                  onChange(Number(event.target.value));
-                }
-                field.onChange(Number(event.target.value));
-              }}
+              onChange={(event) => field.onChange(Number(event.target.value))}
               onFocus={onFocus}
             />
           )}

package/src/styles/events/EventCard.scss

@@ -34,27 +34,20 @@ $event-card-views-gutter: sp(3) !default;
   transition: ease-in 0.25s;
   border-radius: $event-card-border-radius;
 
-  >*+* {
+  > * + * {
     margin-top: $event-card-contents-gutter;
   }
 
   .card-body {
-    padding: 0 0 3rem 0;
+    padding: 0;
 
     .event-description {
       min-height: 8rem;
-      max-height: 21rem;
-      overflow: hidden;
-
-      &:last-child {
-        text-overflow: ellipsis;
-      }
 
       &.no-image {
         min-height: 13.75rem;
-        max-height: 22rem;
       }
-  }
+    }
   }
 
   .card-title {
@@ -82,7 +75,7 @@ $event-card-views-gutter: sp(3) !default;
   }
 
   &:hover {
-    box-shadow: 0px 0px 1rem 0px rgb(0 0 0 / 20%);
+    box-shadow: 0px 0px 1rem 0px rgb(0 0 0 / 20%);  
   }
 }
 
@@ -175,4 +168,4 @@ $event-card-views-gutter: sp(3) !default;
     color: #504f4f;
     width: 1.7rem;
   }
-}
+}

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/events/EventVenueMap.scss

@@ -55,7 +55,7 @@
   .zoom-buttons {
     position: absolute;
     top: calc((100% - 10rem) / 2);
-    right: 1.75rem;
+    right: 0.75rem;
     z-index: 5;
 
     .buttons-wrapper {

package/src/styles/form/CustomCheckbox.scss

@@ -1,7 +1,6 @@
 .custom-checkbox {
   margin-top: 1rem;
   display: flex;
-  z-index: 2;
   align-items: center;
 
   .custom-checkbox .custom-control-label::before {
@@ -21,10 +20,5 @@
     padding-left: 0.5rem;
     font-weight: 400;
     font-size: 0.875rem;
-    min-height: 3rem;
-  }
-
-  .checkbox-input {
-    z-index: 2;
   }
 }

package/src/styles/header/Header.scss

@@ -11,6 +11,10 @@
     }
   }
 
+  svg {
+    max-height: 1rem;
+  }
+
   .navbar-nav {
     line-height: 1;
     margin-top: 4px;

package/src/styles/iframe-events/Calendar.scss

@@ -1,3 +1,4 @@
+
 .calendar-wrapper {
   display: flex;
 
@@ -20,7 +21,7 @@
           background-color: transparent;
         }
 
-        &:focus {
+        &:focus{
           box-shadow: none;
         }
       }
@@ -72,9 +73,10 @@
       }
     }
 
+    
+
     .calendar-dates-wrapper {
-      .calendar-weekdays,
-      .calendar-dates {
+      .calendar-weekdays, .calendar-dates {
         display: grid;
         grid-template-columns: repeat(7, auto);
         grid-gap: 0.5rem 1rem;
@@ -96,17 +98,17 @@
         margin-top: 0.75rem;
 
         .calendar-date {
+          height: 2rem;
           display: flex;
-          flex-direction: column;
           align-items: center;
           justify-content: center;
-          padding: 0.25rem;
+          padding: 0;
           border-radius: 0.25rem;
           background-color: $snippet-calendar-button-background-color;
           color: $snippet-calendar-button-font-color;
           font-size: 0.875rem;
           line-height: 1.3125rem;
-          border: 1px solid $snippet-calendar-button-border-color;
+          border: 1px solid $snippet-calendar-button-border-color;;
 
           &.selected-date {
             background-color: $snippet-calendar-active-button-background-color;
@@ -136,7 +138,7 @@
           &:hover {
             border-color: $snippet-calendar-active-button-border-color;
           }
-
+            
           &:focus {
             box-shadow: none;
           }
@@ -165,11 +167,11 @@
         justify-content: center;
         width: 3.75rem;
         height: 2.5rem;
-        background-color: #f2f2f2;
+        background-color: #F2F2F2;
         color: $black;
         font-size: 0.75rem;
         border-radius: 0.25rem;
-
+  
         &.selected-time {
           background-color: $blue;
           color: $white;
@@ -187,16 +189,14 @@
     flex-direction: column;
     align-items: center;
 
-    .calendar,
-    .start-time-wrapper {
+    .calendar, .start-time-wrapper {
       min-width: 20.75rem;
 
       .calendar-dates-wrapper {
-        .calendar-weekdays,
-        .calendar-dates {
+        .calendar-weekdays, .calendar-dates {
           grid-gap: 0.5rem;
         }
-
+  
         .calendar-dates {
           .calendar-date {
             width: 2.5rem;

package/src/styles/iframe-events/Card.scss

@@ -142,7 +142,6 @@
     .card-body {
       padding: 0;
       margin: 0 0 auto;
-      margin-top: 1rem;
     }
   }