@licklist/design 0.44.486-dev.82 → 0.44.486-dev.9

package/src/sales/booking/results/BookingResults.stories.tsx

@@ -4,10 +4,6 @@ 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";
 import { Order } from "@licklist/core/dist/DataMapper/Order/OrderDataMapper";
-import {
-  ORDER_SOURCE_IFRAME,
-  ORDER_SOURCE_MANUAL,
-} from "@licklist/core/src/DataMapper/Order/OrderDataMapper";
 import { BookingResults } from "./BookingResults";
 
 export default {
@@ -25,7 +21,6 @@ Default.args = {
     {
       id: 1,
       people: 2,
-      source: ORDER_SOURCE_MANUAL,
       products: [
         {
           id: 1,
@@ -47,6 +42,7 @@ Default.args = {
       createdAt: "2022-05-20 18:28:56",
       updatedAt: "2022-05-20 18:28:56",
       status: "cart",
+      tickets: [],
       event: {
         id: 1,
         name: "testEvent1",
@@ -65,7 +61,6 @@ Default.args = {
     {
       id: 2,
       people: 10,
-      source: ORDER_SOURCE_MANUAL,
       products: [
         {
           id: 2,
@@ -87,6 +82,7 @@ Default.args = {
       createdAt: "2022-05-20 18:28:56",
       updatedAt: "2022-05-20 18:28:56",
       status: "cart",
+      tickets: [],
       event: {
         id: 2,
         name: "testEvent2",
@@ -106,8 +102,6 @@ Default.args = {
     {
       id: 3,
       people: 10,
-      source: ORDER_SOURCE_MANUAL,
-
       products: [
         {
           id: 3,
@@ -141,6 +135,7 @@ Default.args = {
       createdAt: "2022-05-20 18:28:56",
       updatedAt: "2022-05-20 18:28:56",
       status: "cart",
+      tickets: [],
       event: {
         id: 3,
         name: "testEvent3",
@@ -159,7 +154,6 @@ Default.args = {
     {
       id: 4,
       people: 10,
-      source: ORDER_SOURCE_MANUAL,
       products: [
         {
           id: 3,
@@ -172,6 +166,7 @@ Default.args = {
       createdAt: "2022-05-20 18:28:56",
       updatedAt: "2022-05-20 18:28:56",
       status: "cart",
+      tickets: [],
       event: {
         id: 3,
         name: "testEvent3",
@@ -191,7 +186,6 @@ Default.args = {
     {
       id: 5,
       people: 10,
-      source: ORDER_SOURCE_IFRAME,
       products: [
         {
           id: 3,
@@ -204,6 +198,7 @@ Default.args = {
       createdAt: "2022-05-20 18:28:56",
       updatedAt: "2022-05-20 18:28:56",
       status: "cart",
+      tickets: [],
       event: {
         id: 3,
         name: "testEvent3",
@@ -219,7 +214,6 @@ Default.args = {
     {
       id: 6,
       people: 10,
-      source: ORDER_SOURCE_IFRAME,
       products: [
         {
           id: 3,
@@ -232,6 +226,7 @@ Default.args = {
       createdAt: "2022-05-20 18:28:56",
       updatedAt: "2022-05-20 18:28:56",
       status: "cart",
+      tickets: [],
       event: {
         id: 3,
         name: "testEvent3",
@@ -246,7 +241,6 @@ Default.args = {
     {
       id: 7,
       people: 10,
-      source: ORDER_SOURCE_IFRAME,
       products: [
         {
           id: 3,
@@ -259,6 +253,7 @@ Default.args = {
       createdAt: "2022-05-20 18:28:56",
       updatedAt: "2022-05-20 18:28:56",
       status: "cart",
+      tickets: [],
       event: {
         id: 3,
         name: "testEvent3",

package/src/sales/booking/results/BookingResults.tsx

@@ -1,20 +1,17 @@
 import React from "react";
 import { useTranslation } from "react-i18next";
 import { Order } from "@licklist/core/dist/DataMapper/Order/OrderDataMapper";
-import { User } from "@licklist/core/dist/DataMapper/User/UserDataMapper";
 import { ResultCard } from "./components/ResultCard";
 import { BACKGROUND_COLOR_CLASSNAMES } from "./constants";
 
 export type BookingResultsProps = {
   orders?: Order[] | null;
   onCardClick?: (id: number) => void;
-  staffMembers?: User[] | null;
 };
 
 export const BookingResults = ({
   orders,
   onCardClick,
-  staffMembers,
 }: BookingResultsProps) => {
   const { t } = useTranslation("Design");
 
@@ -25,14 +22,10 @@ export const BookingResults = ({
       ) : (
         <div className="booking-results-wrapper">
           {orders?.map((order, index) => {
-            const staffMember = staffMembers?.find(
-              (staff) => staff.id === order?.orderMetadata?.created_by
-            );
             return (
               <ResultCard
                 key={order.id}
                 order={order}
-                staffMember={staffMember}
                 className={
                   BACKGROUND_COLOR_CLASSNAMES[
                     index % BACKGROUND_COLOR_CLASSNAMES.length

package/src/sales/booking/results/components/ResultCard.tsx

@@ -2,21 +2,13 @@ import React from "react";
 import clsx from "clsx";
 import { useTranslation } from "react-i18next";
 import { DateTime } from "luxon";
-import { useIntl } from "react-intl";
 import { Order } from "@licklist/core/dist/DataMapper/Order/OrderDataMapper";
-import { User } from "@licklist/core/dist/DataMapper/User/UserDataMapper";
-import { TIME_FORMAT } from "@licklist/core/dist/Config";
-import * as Config from "@licklist/core/dist/Config";
-import { ORDER_SOURCE_MANUAL } from "@licklist/core/dist/DataMapper/Order/OrderDataMapper";
 import { formatDateStringForEvent } from "@licklist/plugins/dist/utils/formatDate";
-import { getOrderSourceTitle } from "@licklist/plugins/dist/utils/sourceTitle";
-
 import Icon from "../../../../static/Icon";
 
 export type ResultCardProps = {
   className: string;
   order: Order;
-  staffMember?: User;
   onCardClick?: (id: number) => void;
 };
 
@@ -25,28 +17,10 @@ export type ResultCardProps = {
 export const ResultCard = ({
   order,
   className,
-  staffMember,
   onCardClick,
 }: ResultCardProps) => {
   const { t } = useTranslation("Design");
-  const { formatNumber } = useIntl();
-
-  const {
-    id,
-    people,
-    user,
-    status,
-    startDate,
-    products,
-    source,
-    totalAmount,
-    event,
-    menu,
-  } = order;
-
-  const productList = products.map((product) => product.name)?.join(", ") || "";
-
-  const activityName = event?.name || menu?.name || "";
+  const { id, people, user, status, startDate } = order;
 
   const onClick = () => {
     if (!onCardClick) return;
@@ -75,35 +49,16 @@ export const ResultCard = ({
           {user.email && <p>{user.email}</p>}
           {user.userDetail?.phone && <p>{user.userDetail?.phone}</p>}
           <p>------</p>
-          <p>
-            {t("activity")}: {activityName}{" "}
-          </p>
-          {source === ORDER_SOURCE_MANUAL && staffMember && (
-            <p>
-              {t("staff")}: {`${staffMember.firstName} ${staffMember.lastName}`}
-            </p>
-          )}
+          <p>{t("activity")}: </p>
+          <p>{t("staff")}: </p>
           <p>
             {t("status")}: {t(status)}
           </p>
           <p>
-            {t("date")}: {formatDateStringForEvent(startDate, false)}
-          </p>
-          <p>
-            {t("time")}: {DateTime.fromISO(startDate).toFormat(TIME_FORMAT)}
-          </p>
-          <p className="products" title={productList}>
-            {t("products")}: {productList}
-          </p>
-          <p>
-            {t("totalAmount")}:{" "}
-            {formatNumber(totalAmount, {
-              style: "currency",
-              currency: Config.Currency.GBP,
-            })}
+            {t("date")}: {formatDateStringForEvent(startDate)}
           </p>
           <p>
-            {t("source")}: {t(getOrderSourceTitle(source))}
+            {t("time")}: {DateTime.fromISO(startDate).toFormat("hh:MM")}
           </p>
         </div>
       </div>

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

@@ -14,7 +14,6 @@ import { DateTime } from "luxon";
 import { Col, Form, Row } from "react-bootstrap";
 import { useFormContext } from "react-hook-form";
 import { useTranslation } from "react-i18next";
-import couponCodeRules from "@licklist/plugins/dist/validation/Rules/couponCodeRules";
 /* TODO: Show Recurrent date, when reccurent date bugs are fixed */
 // import { Frequency } from "rrule";
 // import { RecurrenceInput } from "../../../recurrence-input";
@@ -133,10 +132,6 @@ export const CouponFormControl = ({
                   required: t("Validation:fieldRequired", {
                     attribute: t("Design:code"),
                   }) as string,
-                  pattern: {
-                    message: `${t("Validation:fieldCouponCode")}`,
-                    value: couponCodeRules,
-                  },
                 })}
                 disabled={isLoading}
               />

package/src/sales/filters/SaleFilters.tsx

@@ -13,7 +13,6 @@ export interface Filters {
   orderable_date_from: string;
   orderable_date_to: string;
   is_in_cart: boolean;
-  isFilterOpen?: boolean;
 }
 
 export interface SaleFiltersProps {

package/src/sales/guest-profile/previous-bookings/PreviousBookings.stories.tsx

@@ -58,6 +58,7 @@ Default.args = {
       createdAt: "2022-05-20 18:28:56",
       updatedAt: "2022-05-20 18:28:56",
       status: "cart",
+      tickets: [],
       orderableType: "event",
       orderableId: 1,
       event: {
@@ -95,6 +96,7 @@ Default.args = {
       createdAt: "2022-05-20 18:28:56",
       updatedAt: "2022-05-20 18:28:56",
       status: "cart",
+      tickets: [],
       orderableType: "event",
       orderableId: 2,
       event: {
@@ -145,6 +147,7 @@ Default.args = {
       createdAt: "2022-05-20 18:28:56",
       updatedAt: "2022-05-20 18:28:56",
       status: "cart",
+      tickets: [],
       orderableType: "event",
       orderableId: 3,
       event: {
@@ -174,6 +177,7 @@ Default.args = {
       createdAt: "2022-05-20 18:28:56",
       updatedAt: "2022-05-20 18:28:56",
       status: "cart",
+      tickets: [],
       orderableType: "event",
       orderableId: 3,
       event: {
@@ -203,6 +207,7 @@ Default.args = {
       createdAt: "2022-05-20 18:28:56",
       updatedAt: "2022-05-20 18:28:56",
       status: "cart",
+      tickets: [],
       orderableType: "event",
       orderableId: 3,
       event: {
@@ -232,6 +237,7 @@ Default.args = {
       createdAt: "2022-05-20 18:28:56",
       updatedAt: "2022-05-20 18:28:56",
       status: "cart",
+      tickets: [],
       orderableType: "event",
       orderableId: 3,
       event: {
@@ -260,6 +266,7 @@ Default.args = {
       createdAt: "2022-05-20 18:28:56",
       updatedAt: "2022-05-20 18:28:56",
       status: "cart",
+      tickets: [],
       orderableType: "event",
       orderableId: 3,
       event: {

package/src/sales/manual-booking/summary/ManualBookingSummary.tsx

@@ -8,11 +8,6 @@ import {
 } from "@licklist/core/dist/Config";
 import { useIntl } from "react-intl";
 import * as Config from "@licklist/core/dist/Config";
-import {
-  RELY_ON_PEOPLE_QUANTITY,
-  RelyOnPeopleType,
-} from "@licklist/core/dist/DataMapper/Product/ProductSetDataMapper";
-import { getRelyOnPeopleMultiplier } from "@licklist/plugins/dist/utils/relyOnPeople";
 import { BlockLoader } from "../../../static/loader";
 
 export interface ManualBookingSummaryProps {
@@ -22,7 +17,6 @@ export interface ManualBookingSummaryProps {
   orderSumIncludingFee?: number | null;
   isFeeFetching: boolean;
   orderDate: string;
-  relyOnPeopleType?: RelyOnPeopleType | null;
 }
 
 export const ManualBookingSummary = ({
@@ -32,15 +26,14 @@ export const ManualBookingSummary = ({
   orderSumIncludingFee,
   isFeeFetching,
   orderDate,
-  relyOnPeopleType,
 }: ManualBookingSummaryProps) => {
   const { t } = useTranslation(["Design", "Sale"]);
   const { formatNumber } = useIntl();
-  const showRelyOnPeople =
-    relyOnPeopleType && relyOnPeopleType !== RELY_ON_PEOPLE_QUANTITY;
+
   const currentDate = DateTime.fromISO(orderDate);
   const date = currentDate.toFormat(DATE_TIME_MANUAL_BOOKING_FORMAT);
   const time = currentDate.toFormat(TIME_FORMAT);
+
   return (
     <div className="manual-booking-summary">
       <div className="receipt-title">{t("Sale:receipt")}</div>
@@ -50,23 +43,15 @@ export const ManualBookingSummary = ({
       {orders.length > 0 ? (
         <div className="summary-item-container">
           {orders.map((order: ManualBookingOrder) => {
-            const relyOnPeopleMultiplier = getRelyOnPeopleMultiplier({
-              relyOnPeopleType,
-              capacity: order?.capacity,
-            });
             return (
               <div
                 key={order.id}
                 className="d-flex justify-content-between border-summary-item"
               >
                 <div>{order.name}</div>
-                {showRelyOnPeople && relyOnPeopleMultiplier && (
-                  <div>
-                    {`x ${order.quantity * relyOnPeopleMultiplier} ${t(
-                      "people"
-                    )}`}
-                  </div>
-                )}
+                <div>
+                  {order.isRelyOnPeople ? `x ${order.quantity} People` : ""}
+                </div>
                 <div>
                   {formatNumber(order.quantity * order.price, {
                     style: "currency",

package/src/sales/source-of-sales/SourceOfSalesChart.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useMemo, useEffect } from "react";
+import React, { useEffect, useState, useMemo } from "react";
 import { useTranslation } from "react-i18next";
 import { useIntl } from "react-intl";
 
@@ -35,8 +35,7 @@ function SourceOfSalesChart({ data }: SourceOfSalesProps) {
         name: AFFILIATES,
       },
     ],
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [data.length]
+    [data]
   );
   const { t } = useTranslation("Design");
   const { formatNumber } = useIntl();
@@ -87,34 +86,32 @@ function SourceOfSalesChart({ data }: SourceOfSalesProps) {
     <div className="source-of-sales">
       <div className="source-of-sales__header">{t("sourceOfSales")}</div>
       <div className="source-of-sales__pie-chart">
-        {!!data.length && (
-          <ResponsiveContainer debounce={100} width="100%" height="100%">
-            <PieChart>
-              <Legend
-                iconType="circle"
-                wrapperStyle={{ left: 170, top: 20 }}
-                layout="vertical"
-                verticalAlign="top"
-                content={legendRenderer}
-              />
-              <Pie
-                data={extendedData}
-                cx={80}
-                cy={defaultCYPosition}
-                innerRadius={40}
-                outerRadius={48}
-                dataKey="percentage"
-              >
-                {data.map(({ source }: PieChartData, index) => (
-                  <Cell
-                    className={`colors-${index % 4}`}
-                    key={`cell-${source}`}
-                  />
-                ))}
-              </Pie>
-            </PieChart>
-          </ResponsiveContainer>
-        )}
+        <ResponsiveContainer width="100%" height="100%">
+          <PieChart>
+            <Legend
+              iconType="circle"
+              wrapperStyle={{ left: 170, top: 20 }}
+              layout="vertical"
+              verticalAlign="top"
+              content={legendRenderer}
+            />
+            <Pie
+              data={extendedData}
+              cx={80}
+              cy={defaultCYPosition}
+              innerRadius={40}
+              outerRadius={48}
+              dataKey="percentage"
+            >
+              {data.map(({ source }: PieChartData, index) => (
+                <Cell
+                  className={`colors-${index % 4}`}
+                  key={`cell-${source}`}
+                />
+              ))}
+            </Pie>
+          </PieChart>
+        </ResponsiveContainer>
       </div>
     </div>
   );

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

@@ -7,9 +7,6 @@ import {
   SNIPPET_TYPE_VENUE_MAP,
 } 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";
@@ -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
@@ -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">

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/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/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/{dist/styles/activity-card/GridActivitiesCard.scss → src/styles/iframe-customers-journey/ActivitiesCard.scss}

@@ -6,11 +6,12 @@
   color: $snippet-elements-body-color;
   border-radius: 0.5rem;
   padding: 0.375rem;
+  min-height: 12.5rem;
   width: 11.5rem;
   word-wrap: break-word;
   background-color: #fff;
   font-size: 0.8rem;
-  background-color: $snippet-product-set-background-color;
+  color: $snippet-elements-body-color;
 
   div {
     text-align: left;
@@ -20,6 +21,13 @@
     border: 2px solid #0e8be1;
   }
 
+  &-image {
+    width: 100%;
+    height: 6.3rem;
+    margin-bottom: 0.5rem;
+    border-radius: 0.3rem;
+  }
+
   &-title {
     font-weight: 600;
     line-height: 1.25rem;

package/src/styles/{activity-card/ListActivitiesCard.scss → iframe-customers-journey/ActivitiesSelectedCard.scss}

@@ -6,9 +6,8 @@
   align-items: center;
   cursor: pointer;
   height: 5rem;
-  padding: 0.375rem;
   border: 2px solid transparent;
-  border-radius: 0.5rem;
+  border: 2px solid transparent;
   background-color: $snippet-product-set-background-color;
   color: $snippet-product-set-font-color;
   transition: $color-transition;