@licklist/design 0.50.0-dev.0 → 0.50.0-dev.2

package/dist/events/event-card/EventCard.d.ts

@@ -16,6 +16,7 @@ export interface EventCardProps extends HasPermissionProp {
     onStatistic: () => void;
     titleId?: string;
     descriptionId?: string;
+    productSetName?: string;
 }
-export declare function EventCard({ name, description, date, imageUrl, sales, onPreview, onEdit, onCopy, onRemove, hasPermission, onStatistic, eventStatistic, titleId, descriptionId, }: EventCardProps): JSX.Element;
+export declare function EventCard({ name, description, date, imageUrl, sales, onPreview, onEdit, onCopy, onRemove, hasPermission, productSetName, onStatistic, eventStatistic, titleId, descriptionId, }: EventCardProps): JSX.Element;
 //# sourceMappingURL=EventCard.d.ts.map

package/dist/events/event-card/EventCard.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"EventCard.d.ts","sourceRoot":"","sources":["../../../src/events/event-card/EventCard.tsx"],"names":[],"mappings":";AAMA,OAAO,EAAE,iBAAiB,EAAE,MAAM,oDAAoD,CAAC;AACvF,OAAO,EAAE,cAAc,EAAE,MAAM,kEAAkE,CAAC;AAElG,OAAO,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAS5C,MAAM,WAAW,cAAe,SAAQ,iBAAiB;IACvD,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,EAAE,MAAM,CAAC;IACpB,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,KAAK,CAAC,EAAE,IAAI,EAAE,CAAC;IACf,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,cAAc,CAAC,EAAE,cAAc,GAAG,IAAI,CAAC;IACvC,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,wBAAgB,SAAS,CAAC,EACxB,IAAI,EACJ,WAAW,EACX,IAAI,EACJ,QAAQ,EACR,KAAK,EACL,SAAS,EACT,MAAM,EACN,MAAM,EACN,QAAQ,EACR,aAAoB,EACpB,WAAW,EACX,cAAc,EACd,OAAO,EACP,aAAa,GACd,EAAE,cAAc,eAiIhB"}
+{"version":3,"file":"EventCard.d.ts","sourceRoot":"","sources":["../../../src/events/event-card/EventCard.tsx"],"names":[],"mappings":";AAMA,OAAO,EAAE,iBAAiB,EAAE,MAAM,oDAAoD,CAAC;AACvF,OAAO,EAAE,cAAc,EAAE,MAAM,kEAAkE,CAAC;AAElG,OAAO,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAS5C,MAAM,WAAW,cAAe,SAAQ,iBAAiB;IACvD,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,EAAE,MAAM,CAAC;IACpB,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,KAAK,CAAC,EAAE,IAAI,EAAE,CAAC;IACf,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,cAAc,CAAC,EAAE,cAAc,GAAG,IAAI,CAAC;IACvC,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAED,wBAAgB,SAAS,CAAC,EACxB,IAAI,EACJ,WAAW,EACX,IAAI,EACJ,QAAQ,EACR,KAAK,EACL,SAAS,EACT,MAAM,EACN,MAAM,EACN,QAAQ,EACR,aAAoB,EACpB,cAAc,EACd,WAAW,EACX,cAAc,EACd,OAAO,EACP,aAAa,GACd,EAAE,cAAc,eAsIhB"}

package/dist/events/event-card/EventCard.js

@@ -1 +1 @@
-"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var t=require("tslib"),a=require("react"),n=e(a),r=require("@licklist/core/dist/Config"),l=require("react-i18next"),c=require("react-bootstrap"),i=require("../../static/Icon.js"),s=e(require("clsx")),m=require("react-intl"),o=require("../../tiptap-editor/TipTapEditor.js"),u=require("./utils.js"),d=require("../../assets/dashboard/chartBar.svg.js");exports.EventCard=function(e){var E=e.name,v=e.description,p=e.date,y=e.imageUrl,f=e.sales,b=e.onPreview,N=e.onEdit,C=e.onCopy,k=e.onRemove,g=e.hasPermission,x=void 0===g||g,q=e.onStatistic,w=e.eventStatistic,h=e.titleId,T=e.descriptionId,j=l.useTranslation("Design").t,I=m.useIntl(),P=I.formatNumber,_=I.formatDate,B=u.getStatisticInfo(w,p),S=B.totalViews,D=t.__rest(B,["totalViews"]),M=a.useMemo((function(){return u.formatContentWithoutTags(v,u.EVENT_DESCRIPTION_SIZE)}),[v]);return n.createElement(c.Card,{className:"d-flex flex-column event-card h-100"},n.createElement("div",{className:s("event-card-image-container",!y&&"no-image")},y&&n.createElement(c.Card.Img,{variant:"top",src:y}),n.createElement(c.Badge,{className:"event-card-date",as:"time",dateTime:p,variant:"primary"},_(new Date(p),{weekday:"short",day:"numeric",month:"short",year:"numeric",hour:"numeric",minute:"numeric"}))),n.createElement(c.Card.Body,null,n.createElement(c.Card.Title,{id:h},E),n.createElement("div",{className:"flex-grow-1"},n.createElement(o.TipTapEditor,{viewMode:!0,disabled:!0,className:s("event-description",!y&&"no-image"),content:M,id:T}),n.createElement("div",{className:"mt-2 ml-2"},Object.keys(D).map((function(e){return n.createElement("div",{className:"event-card-sale",key:e},n.createElement("span",{className:"event-card-sale-name"},j(e),":"," ","totalAmount"===e?P(D[e],{style:"currency",currency:r.Currency.GBP}):D[e]))}))),f&&f.map((function(e){return n.createElement("div",{className:"event-card-sale",key:e.id},n.createElement("div",{className:"event-card-sale-text"},n.createElement("span",{className:"event-card-sale-name"},e.name)," ",n.createElement("span",{className:"event-card-sale-quantity"},[e.current,e.max].map((function(e){return P(e)})).join(" / "))),n.createElement(c.ProgressBar,{now:e.current,max:e.max}))})))),n.createElement(c.Card.Footer,null,n.createElement("div",{className:"d-flex w-100 justify-content-between"},n.createElement("div",{className:"d-flex"},n.createElement("button",{type:"button",className:"event-card-link-button ml-3 mr-4",onClick:q},n.createElement(d.ReactComponent,null)),n.createElement("div",{className:"event-card-views"},n.createElement(i.default,{type:"eye"}),n.createElement("span",null,P(S)))),n.createElement("div",null,n.createElement("button",{type:"button",className:"event-card-link-button",onClick:b},n.createElement(i.default,{type:"external-link-alt"})),x&&n.createElement(n.Fragment,null,n.createElement("button",{type:"button",className:"event-card-link-button",onClick:N},n.createElement(i.default,{type:"edit"})),n.createElement("button",{type:"button",className:"event-card-link-button",onClick:C},n.createElement(i.default,{type:"copy"})),n.createElement("button",{type:"button",className:"event-card-link-button",onClick:k},n.createElement(i.default,{type:"trash-alt"})))))))};
+"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var t=require("tslib"),a=require("react"),n=e(a),r=require("@licklist/core/dist/Config"),c=require("react-i18next"),l=require("react-bootstrap"),s=require("../../static/Icon.js"),i=e(require("clsx")),m=require("react-intl"),o=require("../../tiptap-editor/TipTapEditor.js"),u=require("./utils.js"),d=require("../../assets/dashboard/chartBar.svg.js");exports.EventCard=function(e){var E=e.name,v=e.description,p=e.date,y=e.imageUrl,f=e.sales,N=e.onPreview,b=e.onEdit,C=e.onCopy,k=e.onRemove,x=e.hasPermission,g=void 0===x||x,q=e.productSetName,w=e.onStatistic,h=e.eventStatistic,T=e.titleId,j=e.descriptionId,I=c.useTranslation("Design").t,S=m.useIntl(),P=S.formatNumber,_=S.formatDate,B=u.getStatisticInfo(h,p),D=B.totalViews,M=t.__rest(B,["totalViews"]),O=a.useMemo((function(){return u.formatContentWithoutTags(v,u.EVENT_DESCRIPTION_SIZE)}),[v]);return n.createElement(l.Card,{className:"d-flex flex-column event-card h-100"},n.createElement("div",{className:i("event-card-image-container",!y&&"no-image")},y&&n.createElement(l.Card.Img,{variant:"top",src:y}),n.createElement(l.Badge,{className:"event-card-date",as:"time",dateTime:p,variant:"primary"},_(new Date(p),{weekday:"short",day:"numeric",month:"short",year:"numeric",hour:"numeric",minute:"numeric"}))),n.createElement(l.Card.Body,null,n.createElement(l.Card.Title,{id:T},E),n.createElement("div",{className:"flex-grow-1"},n.createElement(o.TipTapEditor,{viewMode:!0,disabled:!0,className:i("event-description",!y&&"no-image"),content:O,id:j}),n.createElement("div",{className:"mt-2 ml-2"},Object.keys(M).map((function(e){return n.createElement("div",{className:"event-card-sale",key:e},n.createElement("span",{className:"event-card-sale-name"},I(e),":"," ","totalAmount"===e?P(M[e],{style:"currency",currency:r.Currency.GBP}):M[e]))}))),f&&f.map((function(e){return n.createElement("div",{className:"event-card-sale",key:e.id},n.createElement("div",{className:"event-card-sale-text"},n.createElement("span",{className:"event-card-sale-name"},e.name)," ",n.createElement("span",{className:"event-card-sale-quantity"},[e.current,e.max].map((function(e){return P(e)})).join(" / "))),n.createElement(l.ProgressBar,{now:e.current,max:e.max}))})))),n.createElement(l.Card.Footer,{className:"flex-column"},q&&n.createElement("div",{className:"pl-3 text-truncate"},I("Design:productSet"),": ",q),n.createElement("div",{className:"d-flex w-100 justify-content-between"},n.createElement("div",{className:"d-flex"},n.createElement("button",{type:"button",className:"event-card-link-button ml-3 mr-4",onClick:w},n.createElement(d.ReactComponent,null)),n.createElement("div",{className:"event-card-views"},n.createElement(s.default,{type:"eye"}),n.createElement("span",null,P(D)))),n.createElement("div",null,n.createElement("button",{type:"button",className:"event-card-link-button",onClick:N},n.createElement(s.default,{type:"external-link-alt"})),g&&n.createElement(n.Fragment,null,n.createElement("button",{type:"button",className:"event-card-link-button",onClick:b},n.createElement(s.default,{type:"edit"})),n.createElement("button",{type:"button",className:"event-card-link-button",onClick:C},n.createElement(s.default,{type:"copy"})),n.createElement("button",{type:"button",className:"event-card-link-button",onClick:k},n.createElement(s.default,{type:"trash-alt"})))))))};

package/dist/styles/events/EventCard.scss

@@ -7,8 +7,6 @@ $event-card-title-font-weight: $font-weight-semibold !default;
 $event-card-title-font-size: sp(5) !default;
 $event-card-title-line-height: 4 / 3 !default;
 
-$event-card-footer-height: sp(6) !default;
-
 $event-card-image-container-overflow-top: sp(3) !default;
 $event-card-image-container-overflow-x: sp(3) !default;
 $event-card-image-container-aspect-ratio: 1.6 !default;
@@ -34,7 +32,7 @@ $event-card-views-gutter: sp(3) !default;
   transition: ease-in 0.25s;
   border-radius: $event-card-border-radius;
 
-  >*+* {
+  > * + * {
     margin-top: $event-card-contents-gutter;
   }
 
@@ -54,7 +52,7 @@ $event-card-views-gutter: sp(3) !default;
         min-height: 13.75rem;
         max-height: 22rem;
       }
-  }
+    }
   }
 
   .card-title {
@@ -74,7 +72,6 @@ $event-card-views-gutter: sp(3) !default;
     border: unset;
     border-radius: unset;
     padding: 0;
-    height: $event-card-footer-height;
 
     svg {
       height: 100%;
@@ -175,4 +172,4 @@ $event-card-views-gutter: sp(3) !default;
     color: #504f4f;
     width: 1.7rem;
   }
-}
+}

package/dist/styles/sales/BookingTabs.scss

@@ -29,7 +29,7 @@
   .content {
     display: flex;
     justify-content: space-between;
-    width: 90%;
+    width: 85%;
     flex-direction: row;
 
     @include media-breakpoint-down(sm) {

package/dist/styles/sales/ManualBooking.scss

@@ -413,54 +413,59 @@
 }
 
 .manual-booking-summary-mobile {
-  padding: 0 1.5rem;
-  padding-top: 2rem;
-  height: max-content;
-  margin-bottom: 1.5rem;
-  width: inherit;
-
-  .form-control {
-    margin-bottom: .5rem;
-  }
-  .receipt-title {
-    font-size: 1.125rem;
-    font-weight: 600;
-    padding-bottom: 0.4rem;
-    margin-bottom: 1rem;
-    border-bottom: 2px solid $gray-400;
-  }
-  .event-name {
-    font-size: 0.94rem;
-    font-weight: 600;
-  }
+  display: none;
 
-  .border-summary-item {
-    padding-bottom: 0.9rem;
-    margin-bottom: 1%;
-    border-bottom: 2px solid $gray-100;
-    flex-wrap: wrap;
-  }
+  @include media-breakpoint-down(sm) {
+    display: block;
+    padding: 0 1.5rem;
+    padding-top: 2rem;
+    height: max-content;
+    margin-bottom: 1.5rem;
+    width: inherit;
 
-  .total-container {
-    display: flex;
-    justify-content: space-between;
-    font-size: 1rem;
-    font-weight: 600;
+    .form-control {
+      margin-bottom: .5rem;
+    }
+    .receipt-title {
+      font-size: 1.125rem;
+      font-weight: 600;
+      padding-bottom: 0.4rem;
+      margin-bottom: 1rem;
+      border-bottom: 2px solid $gray-400;
+    }
+    .event-name {
+      font-size: 0.94rem;
+      font-weight: 600;
+    }
 
-    @include media-breakpoint-down(lg) {
+    .border-summary-item {
+      padding-bottom: 0.9rem;
+      margin-bottom: 1%;
+      border-bottom: 2px solid $gray-100;
       flex-wrap: wrap;
     }
-    .total-amount {
-      padding-left: 1rem;
+
+    .total-container {
+      display: flex;
+      justify-content: space-between;
+      font-size: 1rem;
+      font-weight: 600;
+
       @include media-breakpoint-down(lg) {
-        padding-left: 0;
+        flex-wrap: wrap;
+      }
+      .total-amount {
+        padding-left: 1rem;
+        @include media-breakpoint-down(lg) {
+          padding-left: 0;
+        }
       }
     }
-  }
 
-  .summary-item-container {
-    .border-summary-item:nth-last-child(2) {
-      border-bottom: 2px solid $gray-400;
+    .summary-item-container {
+      .border-summary-item:nth-last-child(2) {
+        border-bottom: 2px solid $gray-400;
+      }
     }
   }
 }
@@ -491,4 +496,4 @@
       color: $blue;
     }
   }
-}
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@licklist/design",
-  "version": "0.50.0-dev.0",
+  "version": "0.50.0-dev.2",
   "repository": {
     "type": "git",
     "url": "git+ssh://git@bitbucket.org/artelogicsoft/licklist_design.git"

package/src/events/event-card/EventCard.stories.tsx

@@ -33,6 +33,7 @@ export const Default: Story<EventCardProps> = () => {
           RuPaul's Drag Race UK to VINYL Cambridge! So get excited because
           the...`}
         date="2023-08-31T09:35:00.000+03:00"
+        productSetName="New product set"
         imageUrl={showImage ? `https://source.unsplash.com/random` : null}
         hasPermission={hasPermission}
         onPreview={() => undefined}

package/src/events/event-card/EventCard.tsx

@@ -30,6 +30,7 @@ export interface EventCardProps extends HasPermissionProp {
   onStatistic: () => void;
   titleId?: string;
   descriptionId?: string;
+  productSetName?: string;
 }
 
 export function EventCard({
@@ -43,6 +44,7 @@ export function EventCard({
   onCopy,
   onRemove,
   hasPermission = true,
+  productSetName,
   onStatistic,
   eventStatistic,
   titleId,
@@ -123,7 +125,12 @@ export function EventCard({
             ))}
         </div>
       </Card.Body>
-      <Card.Footer>
+      <Card.Footer className="flex-column">
+        {productSetName && (
+          <div className="pl-3 text-truncate">
+            {t("Design:productSet")}: {productSetName}
+          </div>
+        )}
         <div className="d-flex w-100 justify-content-between">
           <div className="d-flex">
             <button

package/src/styles/events/EventCard.scss

@@ -7,8 +7,6 @@ $event-card-title-font-weight: $font-weight-semibold !default;
 $event-card-title-font-size: sp(5) !default;
 $event-card-title-line-height: 4 / 3 !default;
 
-$event-card-footer-height: sp(6) !default;
-
 $event-card-image-container-overflow-top: sp(3) !default;
 $event-card-image-container-overflow-x: sp(3) !default;
 $event-card-image-container-aspect-ratio: 1.6 !default;
@@ -34,7 +32,7 @@ $event-card-views-gutter: sp(3) !default;
   transition: ease-in 0.25s;
   border-radius: $event-card-border-radius;
 
-  >*+* {
+  > * + * {
     margin-top: $event-card-contents-gutter;
   }
 
@@ -54,7 +52,7 @@ $event-card-views-gutter: sp(3) !default;
         min-height: 13.75rem;
         max-height: 22rem;
       }
-  }
+    }
   }
 
   .card-title {
@@ -74,7 +72,6 @@ $event-card-views-gutter: sp(3) !default;
     border: unset;
     border-radius: unset;
     padding: 0;
-    height: $event-card-footer-height;
 
     svg {
       height: 100%;
@@ -175,4 +172,4 @@ $event-card-views-gutter: sp(3) !default;
     color: #504f4f;
     width: 1.7rem;
   }
-}
+}

package/src/styles/sales/BookingTabs.scss

@@ -29,7 +29,7 @@
   .content {
     display: flex;
     justify-content: space-between;
-    width: 90%;
+    width: 85%;
     flex-direction: row;
 
     @include media-breakpoint-down(sm) {

package/src/styles/sales/ManualBooking.scss

@@ -413,54 +413,59 @@
 }
 
 .manual-booking-summary-mobile {
-  padding: 0 1.5rem;
-  padding-top: 2rem;
-  height: max-content;
-  margin-bottom: 1.5rem;
-  width: inherit;
-
-  .form-control {
-    margin-bottom: .5rem;
-  }
-  .receipt-title {
-    font-size: 1.125rem;
-    font-weight: 600;
-    padding-bottom: 0.4rem;
-    margin-bottom: 1rem;
-    border-bottom: 2px solid $gray-400;
-  }
-  .event-name {
-    font-size: 0.94rem;
-    font-weight: 600;
-  }
+  display: none;
 
-  .border-summary-item {
-    padding-bottom: 0.9rem;
-    margin-bottom: 1%;
-    border-bottom: 2px solid $gray-100;
-    flex-wrap: wrap;
-  }
+  @include media-breakpoint-down(sm) {
+    display: block;
+    padding: 0 1.5rem;
+    padding-top: 2rem;
+    height: max-content;
+    margin-bottom: 1.5rem;
+    width: inherit;
 
-  .total-container {
-    display: flex;
-    justify-content: space-between;
-    font-size: 1rem;
-    font-weight: 600;
+    .form-control {
+      margin-bottom: .5rem;
+    }
+    .receipt-title {
+      font-size: 1.125rem;
+      font-weight: 600;
+      padding-bottom: 0.4rem;
+      margin-bottom: 1rem;
+      border-bottom: 2px solid $gray-400;
+    }
+    .event-name {
+      font-size: 0.94rem;
+      font-weight: 600;
+    }
 
-    @include media-breakpoint-down(lg) {
+    .border-summary-item {
+      padding-bottom: 0.9rem;
+      margin-bottom: 1%;
+      border-bottom: 2px solid $gray-100;
       flex-wrap: wrap;
     }
-    .total-amount {
-      padding-left: 1rem;
+
+    .total-container {
+      display: flex;
+      justify-content: space-between;
+      font-size: 1rem;
+      font-weight: 600;
+
       @include media-breakpoint-down(lg) {
-        padding-left: 0;
+        flex-wrap: wrap;
+      }
+      .total-amount {
+        padding-left: 1rem;
+        @include media-breakpoint-down(lg) {
+          padding-left: 0;
+        }
       }
     }
-  }
 
-  .summary-item-container {
-    .border-summary-item:nth-last-child(2) {
-      border-bottom: 2px solid $gray-400;
+    .summary-item-container {
+      .border-summary-item:nth-last-child(2) {
+        border-bottom: 2px solid $gray-400;
+      }
     }
   }
 }
@@ -491,4 +496,4 @@
       color: $blue;
     }
   }
-}
+}