@licklist/design 0.58.4-dev.2 → 0.58.5

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

@@ -1,5 +1,4 @@
 @import "../snippet-templates/snippetVariables";
-@import "../themes//bookedit/variables";
 
 .iframe-event-card {
   position: relative;
@@ -19,27 +18,12 @@
     background-size: cover;
     background-position: center;
     cursor: pointer;
+    border: 1px solid transparent;
     border-radius: 0.5rem;
   }
 
   .card-body {
-    padding: 0.5rem 0 0.875rem 0;
-
-    @include media-breakpoint-down(sm) {
-      padding: 1rem 0;
-    }
-  }
-
-  &__info-icon {
-    position: absolute;
-    right: 1rem;
-    top: 1rem;
-    background-color: "#ffffff";
-    border-radius: 1.5rem;
-    padding: 0 0.5rem;
-    font-size: 0.75rem;
-    font-weight: $white;
-    border: 1px solid $black;
+    padding: 0.5rem 0 0.875rem;
   }
 
   &__title {
@@ -49,7 +33,7 @@
     line-height: 1.25rem;
     cursor: pointer;
     margin-bottom: 0.5rem;
-    font-size: 0.95rem;
+    font-size: 1.125rem;
   }
 
   &__label {
@@ -98,8 +82,7 @@
         color: $snippet-elements-button-color;
         border: none;
         background-color: $snippet-elements-button-background-color;
-        box-shadow: 0 0 0 $input-btn-focus-width
-          $snippet-elements-button-background-color;
+        box-shadow: 0 0 0 $input-btn-focus-width $snippet-elements-button-background-color;
       }
 
       &:disabled {
@@ -112,14 +95,14 @@
     &:focus,
     &.focus {
       &:not(:disabled) {
-        opacity: 0.7;
+        opacity: .7;
       }
     }
 
     &:active,
     &.active {
       &:not(:disabled) {
-        opacity: 0.8;
+        opacity: .8;
       }
     }
   }
@@ -140,7 +123,7 @@
   }
 
   .card-text {
-    font-size: 0.82rem;
+    font-size: 0.875rem;
   }
 
   &.event-info {
@@ -219,6 +202,7 @@
 
   @media (max-width: 576px) {
     &.list-view {
+
       .card-image {
         margin-right: 0.5rem;
       }

package/dist/styles/iframe-events/PoweredBy.scss

@@ -3,7 +3,7 @@
     display: flex;
     align-items: center;
     justify-content: space-between;
-    padding: 0 0.75rem 0 2rem;
+    padding: 0 0.75rem;
     height: 2rem;
     width: 100%;
     font-size: 0.75rem;
@@ -27,4 +27,4 @@
       color: $blue;
     }
   }
-}
+}

package/dist/styles/iframe-order-process/IframeOrderProcess.scss

@@ -58,6 +58,8 @@
 
 .payment-booking-summary {
   transition: $color-transition;
+  background-color: transparent;
+  border: 1px solid transparent;
   border-radius: $iframe-border-radius;
   font-weight: 400;
   font-size: 0.875rem;

package/dist/styles/iframe-page/Page.scss

@@ -21,7 +21,6 @@
 
   @include media-breakpoint-down(sm) {
     height: 100svh;
-    min-width: auto;
   }
 
   .header-block {

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

@@ -12,6 +12,9 @@
   .left-block {
     flex: 1;
     align-items: stretch;
+    border-radius: 0.5rem;
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
     padding: 1rem;
     background-color: $snippet-page-body-left-block-background-color;
     border: 0;
@@ -30,6 +33,7 @@
       display: flex;
       align-items: flex-start;
       justify-content: space-between;
+
       .title {
         color: $snippet-elements-body-color;
         margin: 0;
@@ -60,7 +64,7 @@
       overflow-x: hidden;
       scrollbar-width: thin;
       .iframe-event-card {
-        border-bottom: 1px solid $separator-color;
+        border-bottom: 2px solid $separator-color;
       }
 
       @include media-breakpoint-down(sm) {
@@ -77,6 +81,8 @@
   }
 
   .right-block {
+    margin-left: 1rem;
+    border-radius: 0.5rem;
     height: calc(100% - 1rem);
     max-width: 17.5rem;
     min-width: 17.5rem;
@@ -109,7 +115,7 @@
       }
 
       .collapse {
-        max-height: calc(100vh - 15rem);
+        max-height: calc(100vh - 19rem);
         transition: none 0s ease 0s;
 
         &.show {
@@ -119,7 +125,7 @@
         }
 
         @include media-breakpoint-down(sm) {
-          max-height: 100%;
+          max-height: 7.5rem;
         }
       }
       .collapse-with-people-input {
@@ -145,14 +151,8 @@
     }
 
     .iframe-event-card {
-      border: none;
-
-      .card-image {
-        border-radius: 0;
-      }
-      .card-body {
-        padding-left: 1rem;
-      }
+      background-color: transparent;
+      border-color: transparent;
     }
 
     .price {
@@ -262,24 +262,3 @@
     }
   }
 }
-
-.event-list-page-body {
-  overflow: auto;
-  .left-block {
-    .navigation {
-      font-size: 1.125rem;
-      font-weight: 500;
-      padding-bottom: 2.625rem;
-      display: flex;
-      align-items: flex-start;
-      justify-content: space-between;
-      margin-top: 0.125rem;
-
-      .title {
-        position: absolute;
-        color: $snippet-elements-body-color;
-        margin: 0;
-      }
-    }
-  }
-}

package/dist/styles/iframe-page/PageHeader.scss

@@ -20,57 +20,55 @@ $base-height: 2.5rem;
       transition: $color-transition;
       border: 0;
     }
-  }
-}
-
-.iframe-page {
-  .button-wrapper {
-    background-color: $snippet-page-header-steps-close-button-background-color;
-    height: $base-height;
-    width: $base-height;
-    border-radius: $base-height;
-    transition: $color-transition;
 
-    .close-button {
-      font-size: 1.25rem;
-      width: $base-height;
+    .button-wrapper {
+      background-color: $snippet-page-header-steps-close-button-background-color;
       height: $base-height;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      color: $snippet-page-header-steps-close-button-border-color;
+      width: $base-height;
+      border-radius: $base-height;
       transition: $color-transition;
 
-      &:hover {
-        cursor: pointer;
+      .close-button {
+        font-size: 1.25rem;
+        width: $base-height;
+        height: $base-height;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        color: $snippet-page-header-steps-close-button-border-color;
+        transition: $color-transition;
+
+        &:hover {
+          cursor: pointer;
+        }
       }
-    }
 
-    &.close-button {
-      margin-left: 1rem;
-    }
+      &.close-button {
+        margin-left: 1rem;
+      }
 
-    .back-button {
-      font-size: 2rem;
-      width: $base-height;
-      height: $base-height;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      font-weight: lighter;
-      color: $snippet-page-header-steps-close-button-border-color;
-      transition: $color-transition;
+      .back-button {
+        font-size: 2rem;
+        width: $base-height;
+        height: $base-height;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-weight: lighter;
+        color: $snippet-page-header-steps-close-button-border-color;
+        transition: $color-transition;
 
-      &:hover {
-        cursor: pointer;
+        &:hover {
+          cursor: pointer;
+        }
       }
-    }
 
-    &.back-button {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      margin-right: 1rem;
+      &.back-button {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin-right: 1rem;
+      }
     }
   }
 }

package/dist/styles/product-set/EditVenueMapSetModal.scss

@@ -91,7 +91,7 @@
   }
 
   @include media-breakpoint-down(sm) {
-    top: 100%;
+    top: 50%;
   
     .step-save-btn {
       width: 100%;

package/dist/styles/sales/BookingResults.scss

@@ -5,7 +5,7 @@
     flex-wrap: wrap;
 
     .result-card {
-      height: 14rem;
+      height: 14.25rem;
       border: 1px solid $gray-400;
       max-width: calc(50% - 0.75rem);
       flex: 0 0 calc(50% - 0.75rem);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@licklist/design",
-  "version": "0.58.4-dev.2",
+  "version": "0.58.5",
   "repository": {
     "type": "git",
     "url": "git+ssh://git@bitbucket.org/artelogicsoft/licklist_design.git"
@@ -53,9 +53,9 @@
     "@fortawesome/free-brands-svg-icons": "5.15.2",
     "@fortawesome/free-solid-svg-icons": "5.15.2",
     "@fortawesome/react-fontawesome": "0.1.9",
-    "@licklist/core": ">=0.22.1-dev.3 < 0.22.1",
+    "@licklist/core": "^0.23.1",
     "@licklist/eslint-config": "0.3.4",
-    "@licklist/plugins": ">=0.27.1-dev.0 < 0.27.1",
+    "@licklist/plugins": "^0.27.2",
     "@mdx-js/react": "1.6.22",
     "@popperjs/core": "2.11.8",
     "@react-aria/utils": "3.9.0",

package/src/calendar/Calendar.stories.tsx

@@ -2,7 +2,6 @@ import React from "react";
 import { DateTime } from "luxon";
 import { Meta, Story } from "@storybook/react";
 import { Calendar, CalendarProps } from "./Calendar";
-import { getMonthCalendarDates } from "./utils/index";
 
 export default {
   title: "Iframe/Event/Calendar",
@@ -25,16 +24,10 @@ const now = DateTime.now().set({
 });
 
 Default.args = {
+  disabledDates: [now.minus({ day: 2 }), now, now.plus({ day: 2 })],
   isLoading: false,
   fromPrice: "from £10",
   selectedDate: null,
   setSelectedDate: () => null,
-  calendarDates: getMonthCalendarDates(now),
-  currentDate: now,
-  getDateTimeButtonProps: () => ({
-    resources: [],
-    showResources: false,
-    shouldCalculateResources: false,
-    isDisabled: false,
-  }),
+  calendarDates: [],
 };

package/src/iframe/event/event-card/IframeEventCard.stories.tsx

@@ -16,7 +16,6 @@ export function Default() {
   return (
     <div>
       <IframeEventCard
-        showMoreInfo
         imageSrc={
           showImage
             ? // eslint-disable-next-line max-len

package/src/iframe/event/event-card/IframeEventCard.tsx

@@ -29,7 +29,6 @@ interface IframeEventCardProps {
   titleId?: string;
   descriptionId?: string;
   imageClassName?: string;
-  showMoreInfo?: boolean;
 }
 
 export function IframeEventCard({
@@ -47,7 +46,6 @@ export function IframeEventCard({
   titleId,
   descriptionId,
   imageClassName,
-  showMoreInfo,
 }: IframeEventCardProps) {
   const { formatNumber } = useIntl();
   const { t } = useTranslation("Design");
@@ -72,7 +70,6 @@ export function IframeEventCard({
       )}
       onClick={goToDetails ? onClick : undefined}
     >
-      {showMoreInfo && <div className="iframe-event-card__info-icon">i</div>}
       {imageSrc && (
         <Card.Img
           className={imageClassName ?? "card-image"}
@@ -94,8 +91,12 @@ export function IframeEventCard({
               <div className="icon-wrapper">
                 <CalendarSvg />
               </div>
-              <p className="m-0 list-view-hided">{date}</p>
-              <p className="m-0 grid-view-hided">{shortDate}</p>
+              <p className="iframe-event-card__bold m-0 list-view-hided">
+                {date}
+              </p>
+              <p className="iframe-event-card__bold m-0 grid-view-hided">
+                {shortDate}
+              </p>
             </div>
           </Card.Text>
 
@@ -105,7 +106,7 @@ export function IframeEventCard({
                 <div className="icon-wrapper">
                   <ClockSvg />
                 </div>
-                <p className="m-0">{type}</p>
+                <p className="iframe-event-card__bold m-0">{type}</p>
               </div>
             </Card.Text>
           )}
@@ -116,7 +117,7 @@ export function IframeEventCard({
                 <div className="icon-wrapper">
                   <TicketSvg />
                 </div>
-                <p className="m-0">
+                <p className="iframe-event-card__bold m-0">
                   {t("from")}{" "}
                   {formatNumber(cost, { style: "currency", currency: "GBP" })}
                 </p>

package/src/iframe/order-process/components/CategoryProduct/components/NumberInput/NumberInput.tsx

@@ -90,7 +90,7 @@ export const NumberInput = forwardRef<HTMLInputElement, NumberInputProps>(
           type="number"
           onChange={(e) => handleChangeValue(Number(e.target.value))}
           value={value}
-          min={0}
+          min={min}
           max={max}
           defaultValue={defaultValue}
           placeholder={placeholder}

package/src/iframe/page/components/PageBody/components/LeftBlock/LeftBlock.tsx

@@ -28,9 +28,7 @@ export const LeftBlock = ({
         {pageTitle && (
           <>
             {typeof pageTitle === "string" ? (
-              <div className="title" id="navigation-title">
-                {pageTitle}
-              </div>
+              <div className="title">{pageTitle}</div>
             ) : (
               pageTitle
             )}

package/src/iframe/payment/order-items-table/utils/paymentSummary.tsx

@@ -63,12 +63,7 @@ const processedPaymentSummary = ({
   const total = calculateTotalPrice(order, externalPaymentDetail);
 
   const totalDiscount = calculateTotalDiscount(order.payments);
-
-  const totalWithDiscount = order.orderPayments.reduce(
-    (acc, payment) => acc + payment.amount + payment.discountAmount,
-    0
-  );
-
+  const totalWithDiscount = total - Number(totalDiscount);
   let summaryItems: SummaryItem[] = [
     {
       translateKey: AMOUNT_TOTAL,

package/src/product-set/card/ProductSetCard.tsx

@@ -18,7 +18,6 @@ export interface ProductSetCardProps extends HasPermissionProp {
   onCopy: () => void;
   onRemove: () => void;
   className?: string;
-  override?: number;
 }
 
 export function ProductSetCard({
@@ -29,7 +28,6 @@ export function ProductSetCard({
   onRemove,
   className = "",
   hasPermission = true,
-  override = 0,
 }: ProductSetCardProps) {
   const { t } = useTranslation("Design");
   const popoverId = useId();
@@ -46,14 +44,7 @@ export function ProductSetCard({
     >
       <div className={productSetCardClasses}>
         <div className="product-set-card-link">
-          <div className="d-flex flex-column">
-            <div>
-              {name} {rrule && `(${RRule.fromString(rrule).toText()})`}
-            </div>
-            <div className="h6 bold ml-1">
-              {!!override && t("overridesAmount", { amount: override })}
-            </div>
-          </div>
+          {name} {rrule && `(${RRule.fromString(rrule).toText()})`}
         </div>
         <div className="d-flex">
           <div className="product-set-card-menu-eye-container">

package/src/product-set/control/ProductSetControl.tsx

@@ -34,7 +34,6 @@ import TutorialGifCard from "./TutorialGifCard";
 import { Step } from "../types";
 import { StepsControl } from "../form/StepsControl";
 import { Typeahead } from "../../typeahead";
-import { DateInput } from "./DateInput";
 
 const OPERATIONAL_COST_TITLES = {
   [OPERATIONAL_COST_PROVIDER]: "operationalCostProvider",
@@ -87,7 +86,6 @@ export interface ProductSetControlProps {
   showSmsTemplate?: boolean;
   workHours?: WorkHour[];
   providerHasBookingManagement?: boolean;
-  isOverrides?: boolean;
 }
 
 export function ProductSetControl({
@@ -103,7 +101,6 @@ export function ProductSetControl({
   showSmsTemplate,
   workHours,
   providerHasBookingManagement = false,
-  isOverrides = false,
 }: ProductSetControlProps) {
   const { t } = useTranslation(["Design", "Validation", "Notification"]);
   const {
@@ -121,9 +118,6 @@ export function ProductSetControl({
   const termsAndConditionsId = useId();
   const relyOnPeopleTypeId = useId();
 
-  const showSmsTemplateSelector = showSmsTemplate && !isOverrides;
-  const showEmailTemplateSelector = showEmailTemplate && !isOverrides;
-
   return (
     <Row
       className={`product-set-form ${
@@ -165,30 +159,20 @@ export function ProductSetControl({
           </Form.Control.Feedback>
         </Form.Group>
 
-        {isOverrides ? (
-          <DateInput
+        {isCreateAction && (
+          <DateAndRecurrenceInput
+            isEventEditProductSet={isEventEditProductSet}
             workHours={workHours}
             isLoading={isLoading}
             providerHasBookingManagement={providerHasBookingManagement}
           />
-        ) : (
-          <>
-            {isCreateAction && (
-              <DateAndRecurrenceInput
-                isEventEditProductSet={isEventEditProductSet}
-                workHours={workHours}
-                isLoading={isLoading}
-                providerHasBookingManagement={providerHasBookingManagement}
-              />
-            )}
-          </>
         )}
 
         <div className="divider" />
 
-        <TutorialGifCard isOverrides={isOverrides} />
+        <TutorialGifCard />
 
-        <StepsControl isLoading={isLoading} isOverrides={isOverrides} />
+        <StepsControl isLoading={isLoading} />
       </Col>
       <Col md={6} sm={12}>
         <div className="second-column">
@@ -228,7 +212,6 @@ export function ProductSetControl({
               {...register("operationalCost", { required: true })}
               as="select"
               defaultValue={OPERATIONAL_COST_PROVIDER}
-              disabled={isOverrides}
               isInvalid={HookFormService.isInvalid("operationalCost", errors)}
             >
               {Object.keys(OPERATIONAL_COST_TYPES).map((operationalCost) => (
@@ -258,7 +241,6 @@ export function ProductSetControl({
               {...register("relyOnPeopleType")}
               as="select"
               defaultValue={null}
-              disabled={isOverrides}
               isInvalid={HookFormService.isInvalid("relyOnPeopleType", errors)}
             >
               <option value="">{t("notRequired")} </option>
@@ -286,7 +268,7 @@ export function ProductSetControl({
               {...register("termsAndConditions")}
               as="textarea"
               rows={2}
-              disabled={isLoading || isOverrides}
+              disabled={isLoading}
               isInvalid={HookFormService.isInvalid(
                 "termsAndConditions",
                 errors
@@ -301,32 +283,30 @@ export function ProductSetControl({
             <Form.Label className="mt-4">
               {t("Design:emailTemplate")}
             </Form.Label>
-            <>
-              {showEmailTemplateSelector ? (
-                <Typeahead
-                  name="emailTemplates"
-                  options={emailTemplates}
-                  isMultipleChoise
-                  placeholder={t("Design:choose")}
-                  noOptionsMessage={t("Design:noActiveTemplates", {
-                    notification: t("Design:email"),
-                  })}
-                />
-              ) : (
-                <WarningMessage
-                  message={t("Design:noActiveTemplates", {
-                    notification: t("Design:email"),
-                  })}
-                />
-              )}
-            </>
+            {showEmailTemplate ? (
+              <Typeahead
+                name="emailTemplates"
+                options={emailTemplates}
+                isMultipleChoise
+                placeholder={t("Design:choose")}
+                noOptionsMessage={t("Design:noActiveTemplates", {
+                  notification: t("Design:email"),
+                })}
+              />
+            ) : (
+              <WarningMessage
+                message={t("Design:noActiveTemplates", {
+                  notification: t("Design:email"),
+                })}
+              />
+            )}
 
             <Form.Label
               className={clsx(emailTemplates.length > 0 ? "mt-4" : "mt-1")}
             >
               {t("Design:smsTemplate")}
             </Form.Label>
-            {showSmsTemplateSelector ? (
+            {showSmsTemplate ? (
               <Typeahead
                 name="smsTemplates"
                 options={smsTemplates}
@@ -359,7 +339,6 @@ export function ProductSetControl({
                       onChange={field.onChange}
                       value={fieldValue}
                       as="select"
-                      disabled={isOverrides}
                       isInvalid={HookFormService.isInvalid(
                         "fieldSetId",
                         errors
@@ -396,7 +375,6 @@ export function ProductSetControl({
                   }) as string;
                 },
               })}
-              disabled={isOverrides}
               isInvalid={HookFormService.isInvalid("thankYouPageUrl", errors)}
             />