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

package/dist/events/edit-event-modal/component/EditEventForm/EditEventForm.d.ts

@@ -19,7 +19,7 @@ export interface EditEventFormValues extends IntervalInputValues {
     saleDeadline: number | null;
     integrationUrl: string | null;
     recurrenceEndAt?: string;
-    duplicatedFromId?: number;
+    duplicatedFromId?: number | null;
     editedProductSet?: ProductSetFormValues;
 }
 export interface EditEventFormProps extends HasPermissionProp {

package/dist/events/edit-event-modal/component/EditEventForm/EditEventForm.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"EditEventForm.d.ts","sourceRoot":"","sources":["../../../../../src/events/edit-event-modal/component/EditEventForm/EditEventForm.tsx"],"names":[],"mappings":"AAEA,OAAO,EAIL,KAAK,EACN,MAAM,sDAAsD,CAAA;AAO7D,OAAO,EAAE,iBAAiB,EAAE,MAAM,oDAAoD,CAAA;AAGtF,OAAO,EAAE,WAAW,EAAE,MAAM,+CAA+C,CAAA;AAG3E,OAAO,EAAE,UAAU,EAAE,MAAM,6DAA6D,CAAA;AAExF,OAAO,EAAE,aAAa,EAAE,MAAM,8BAA8B,CAAA;AAS5D,OAAO,EAAiB,mBAAmB,EAAE,MAAM,qBAAqB,CAAA;AAGxE,OAAO,EAAE,oBAAoB,EAAE,MAAM,6CAA6C,CAAA;AAIlF,MAAM,WAAW,mBAAoB,SAAQ,mBAAmB;IAC9D,IAAI,EAAE,MAAM,CAAA;IACZ,OAAO,EAAE,MAAM,CAAA;IACf,KAAK,EAAE,MAAM,CAAA;IACb,WAAW,EAAE,MAAM,GAAG,IAAI,CAAA;IAC1B,UAAU,EAAE,MAAM,EAAE,CAAA;IACpB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,kBAAkB,EAAE,MAAM,GAAG,IAAI,CAAA;IACjC,OAAO,EAAE,OAAO,GAAG,MAAM,CAAA;IACzB,mBAAmB,EAAE,MAAM,GAAG,IAAI,CAAA;IAClC,MAAM,EAAE,KAAK,EAAE,GAAG,IAAI,CAAA;IACtB,YAAY,EAAE,MAAM,GAAG,IAAI,CAAA;IAC3B,cAAc,EAAE,MAAM,GAAG,IAAI,CAAA;IAC7B,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,gBAAgB,CAAC,EAAE,oBAAoB,CAAA;CACxC;AAED,MAAM,WAAW,kBAAmB,SAAQ,iBAAiB;IAC3D,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,UAAU,EAAE,aAAa,EAAE,CAAA;IAC3B,KAAK,EAAE,MAAM,CAAA;IACb,kBAAkB,CAAC,EAAE,OAAO,CAAC,mBAAmB,CAAC,CAAA;IACjD,YAAY,CAAC,EAAE,WAAW,CAAA;IAC1B,WAAW,EAAE,CAAC,MAAM,EAAE,mBAAmB,KAAK,IAAI,CAAA;IAClD,WAAW,CAAC,EAAE,UAAU,EAAE,GAAG,IAAI,CAAA;IACjC,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,gBAAgB,EAAE,CAAC,KAAK,EAAE,mBAAmB,KAAK,IAAI,CAAA;IACtD,mBAAmB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAC5C,4BAA4B,CAAC,EAAE,OAAO,CAAA;IACtC,QAAQ,EAAE,MAAM,CAAA;IAChB,eAAe,CAAC,EAAE,UAAU,CAAA;IAC5B,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,iBAAiB,CAAC,EAAE,OAAO,CAAA;IAC3B,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,cAAc,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;CAC/B;AAOD,eAAO,MAAM,aAAa,8RAmBvB,kBAAkB,4CAmZpB,CAAA"}
+{"version":3,"file":"EditEventForm.d.ts","sourceRoot":"","sources":["../../../../../src/events/edit-event-modal/component/EditEventForm/EditEventForm.tsx"],"names":[],"mappings":"AAEA,OAAO,EAIL,KAAK,EACN,MAAM,sDAAsD,CAAA;AAO7D,OAAO,EAAE,iBAAiB,EAAE,MAAM,oDAAoD,CAAA;AAGtF,OAAO,EAAE,WAAW,EAAE,MAAM,+CAA+C,CAAA;AAG3E,OAAO,EAAE,UAAU,EAAE,MAAM,6DAA6D,CAAA;AAExF,OAAO,EAAE,aAAa,EAAE,MAAM,8BAA8B,CAAA;AAS5D,OAAO,EAAiB,mBAAmB,EAAE,MAAM,qBAAqB,CAAA;AAGxE,OAAO,EAAE,oBAAoB,EAAE,MAAM,6CAA6C,CAAA;AAIlF,MAAM,WAAW,mBAAoB,SAAQ,mBAAmB;IAC9D,IAAI,EAAE,MAAM,CAAA;IACZ,OAAO,EAAE,MAAM,CAAA;IACf,KAAK,EAAE,MAAM,CAAA;IACb,WAAW,EAAE,MAAM,GAAG,IAAI,CAAA;IAC1B,UAAU,EAAE,MAAM,EAAE,CAAA;IACpB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,kBAAkB,EAAE,MAAM,GAAG,IAAI,CAAA;IACjC,OAAO,EAAE,OAAO,GAAG,MAAM,CAAA;IACzB,mBAAmB,EAAE,MAAM,GAAG,IAAI,CAAA;IAClC,MAAM,EAAE,KAAK,EAAE,GAAG,IAAI,CAAA;IACtB,YAAY,EAAE,MAAM,GAAG,IAAI,CAAA;IAC3B,cAAc,EAAE,MAAM,GAAG,IAAI,CAAA;IAC7B,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,gBAAgB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAChC,gBAAgB,CAAC,EAAE,oBAAoB,CAAA;CACxC;AAED,MAAM,WAAW,kBAAmB,SAAQ,iBAAiB;IAC3D,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,UAAU,EAAE,aAAa,EAAE,CAAA;IAC3B,KAAK,EAAE,MAAM,CAAA;IACb,kBAAkB,CAAC,EAAE,OAAO,CAAC,mBAAmB,CAAC,CAAA;IACjD,YAAY,CAAC,EAAE,WAAW,CAAA;IAC1B,WAAW,EAAE,CAAC,MAAM,EAAE,mBAAmB,KAAK,IAAI,CAAA;IAClD,WAAW,CAAC,EAAE,UAAU,EAAE,GAAG,IAAI,CAAA;IACjC,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,gBAAgB,EAAE,CAAC,KAAK,EAAE,mBAAmB,KAAK,IAAI,CAAA;IACtD,mBAAmB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAC5C,4BAA4B,CAAC,EAAE,OAAO,CAAA;IACtC,QAAQ,EAAE,MAAM,CAAA;IAChB,eAAe,CAAC,EAAE,UAAU,CAAA;IAC5B,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,iBAAiB,CAAC,EAAE,OAAO,CAAA;IAC3B,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,cAAc,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;CAC/B;AAOD,eAAO,MAAM,aAAa,8RAmBvB,kBAAkB,4CAqZpB,CAAA"}

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

@@ -17,9 +17,8 @@ export interface EventCardProps extends HasPermissionProp {
     eventMetadata?: EventMetadata | null;
     onStatistic: () => void;
     titleId?: string;
-    descriptionId?: string;
     productSetName?: string;
     eventID?: string;
 }
-export declare function EventCard({ name, description, date, imageUrl, sales, onPreview, onEdit, onCopy, eventMetadata, onRemove, onOpenQrCode, hasPermission, productSetName, onStatistic, eventStatistic, titleId, descriptionId, eventID, }: EventCardProps): import("react/jsx-runtime").JSX.Element;
+export declare function EventCard({ name, date, imageUrl, sales, onPreview, onEdit, onCopy, eventMetadata, onRemove, onOpenQrCode, hasPermission, productSetName, onStatistic, eventStatistic, titleId, eventID, }: EventCardProps): import("react/jsx-runtime").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":"AAYA,OAAO,EAAE,iBAAiB,EAAE,MAAM,oDAAoD,CAAA;AACtF,OAAO,EAAE,cAAc,EAAE,MAAM,kEAAkE,CAAA;AACjG,OAAO,EAAE,aAAa,EAAE,MAAM,4DAA4D,CAAA;AAS1F,OAAO,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAA;AAS3C,MAAM,WAAW,cAAe,SAAQ,iBAAiB;IACvD,IAAI,EAAE,MAAM,CAAA;IACZ,WAAW,EAAE,MAAM,CAAA;IACnB,IAAI,EAAE,MAAM,CAAA;IACZ,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACxB,KAAK,CAAC,EAAE,IAAI,EAAE,CAAA;IACd,SAAS,EAAE,MAAM,IAAI,CAAA;IACrB,MAAM,EAAE,MAAM,IAAI,CAAA;IAClB,MAAM,EAAE,MAAM,IAAI,CAAA;IAClB,QAAQ,EAAE,MAAM,IAAI,CAAA;IACpB,YAAY,EAAE,MAAM,IAAI,CAAA;IACxB,cAAc,CAAC,EAAE,cAAc,GAAG,IAAI,CAAA;IACtC,aAAa,CAAC,EAAE,aAAa,GAAG,IAAI,CAAA;IACpC,WAAW,EAAE,MAAM,IAAI,CAAA;IACvB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,OAAO,CAAC,EAAE,MAAM,CAAA;CACjB;AAED,wBAAgB,SAAS,CAAC,EACxB,IAAI,EACJ,WAAW,EACX,IAAI,EACJ,QAAQ,EACR,KAAK,EACL,SAAS,EACT,MAAM,EACN,MAAM,EACN,aAAa,EACb,QAAQ,EACR,YAAY,EACZ,aAAoB,EACpB,cAAc,EACd,WAAW,EACX,cAAc,EACd,OAAO,EACP,aAAa,EACb,OAAO,GACR,EAAE,cAAc,2CA0KhB"}
+{"version":3,"file":"EventCard.d.ts","sourceRoot":"","sources":["../../../src/events/event-card/EventCard.tsx"],"names":[],"mappings":"AAWA,OAAO,EAAE,iBAAiB,EAAE,MAAM,oDAAoD,CAAA;AACtF,OAAO,EAAE,cAAc,EAAE,MAAM,kEAAkE,CAAA;AACjG,OAAO,EAAE,aAAa,EAAE,MAAM,4DAA4D,CAAA;AAS1F,OAAO,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAA;AAI3C,MAAM,WAAW,cAAe,SAAQ,iBAAiB;IACvD,IAAI,EAAE,MAAM,CAAA;IACZ,WAAW,EAAE,MAAM,CAAA;IACnB,IAAI,EAAE,MAAM,CAAA;IACZ,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACxB,KAAK,CAAC,EAAE,IAAI,EAAE,CAAA;IACd,SAAS,EAAE,MAAM,IAAI,CAAA;IACrB,MAAM,EAAE,MAAM,IAAI,CAAA;IAClB,MAAM,EAAE,MAAM,IAAI,CAAA;IAClB,QAAQ,EAAE,MAAM,IAAI,CAAA;IACpB,YAAY,EAAE,MAAM,IAAI,CAAA;IACxB,cAAc,CAAC,EAAE,cAAc,GAAG,IAAI,CAAA;IACtC,aAAa,CAAC,EAAE,aAAa,GAAG,IAAI,CAAA;IACpC,WAAW,EAAE,MAAM,IAAI,CAAA;IACvB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,OAAO,CAAC,EAAE,MAAM,CAAA;CACjB;AAED,wBAAgB,SAAS,CAAC,EACxB,IAAI,EACJ,IAAI,EACJ,QAAQ,EACR,KAAK,EACL,SAAS,EACT,MAAM,EACN,MAAM,EACN,aAAa,EACb,QAAQ,EACR,YAAY,EACZ,aAAoB,EACpB,cAAc,EACd,WAAW,EACX,cAAc,EACd,OAAO,EACP,OAAO,GACR,EAAE,cAAc,2CAsKhB"}

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

@@ -1,12 +1,11 @@
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import { useMemo } from 'react';
 import { Card, Badge, ProgressBar, OverlayTrigger, Popover } from 'react-bootstrap';
 import { useIntl } from 'react-intl';
 import clsx from 'clsx';
 import { useTranslation } from 'react-i18next';
 import * as Config from '@licklist/core/dist/Config';
 import { FaEye, FaQrcode, FaExternalLinkAlt, FaEdit, FaCopy, FaTrashAlt } from 'react-icons/fa';
-import { getStatisticInfo, formatContent, EVENT_DESCRIPTION_SIZE } from './utils.js';
+import { getStatisticInfo } from './utils.js';
 import { ReactComponent as SvgChartBar } from '../../assets/dashboard/chartBar.svg.js';
 
 function _object_without_properties(source, excluded) {
@@ -37,21 +36,16 @@ function _object_without_properties_loose(source, excluded) {
     return target;
 }
 function EventCard(param) {
-    var name = param.name, description = param.description, date = param.date, imageUrl = param.imageUrl, sales = param.sales, onPreview = param.onPreview, onEdit = param.onEdit, onCopy = param.onCopy, eventMetadata = param.eventMetadata, onRemove = param.onRemove, onOpenQrCode = param.onOpenQrCode, _param_hasPermission = param.hasPermission, hasPermission = _param_hasPermission === void 0 ? true : _param_hasPermission, productSetName = param.productSetName, onStatistic = param.onStatistic, eventStatistic = param.eventStatistic, titleId = param.titleId; param.descriptionId; var eventID = param.eventID;
+    var name = param.name, date = param.date, imageUrl = param.imageUrl, sales = param.sales, onPreview = param.onPreview, onEdit = param.onEdit, onCopy = param.onCopy, eventMetadata = param.eventMetadata, onRemove = param.onRemove, onOpenQrCode = param.onOpenQrCode, _param_hasPermission = param.hasPermission, hasPermission = _param_hasPermission === void 0 ? true : _param_hasPermission, productSetName = param.productSetName, onStatistic = param.onStatistic, eventStatistic = param.eventStatistic, titleId = param.titleId, eventID = param.eventID;
     var t = useTranslation('Design').t;
     var _useIntl = useIntl(), formatNumber = _useIntl.formatNumber, formatDate = _useIntl.formatDate;
     var _getStatisticInfo = getStatisticInfo(eventStatistic, date), totalViews = _getStatisticInfo.totalViews, statistics = _object_without_properties(_getStatisticInfo, [
         "totalViews"
     ]);
-    var duplicatedInfo = (eventMetadata === null || eventMetadata === void 0 ? void 0 : eventMetadata.editorName) && (eventMetadata === null || eventMetadata === void 0 ? void 0 : eventMetadata.duplicatedFromId) ? t('Design:duplicatedInfo', {
+    var duplicatedInfo = (eventMetadata === null || eventMetadata === void 0 ? void 0 : eventMetadata.duplicatedFromId) ? t('Design:duplicatedInfo', {
         ID: eventMetadata === null || eventMetadata === void 0 ? void 0 : eventMetadata.duplicatedFromId,
         name: eventMetadata === null || eventMetadata === void 0 ? void 0 : eventMetadata.editorName
     }) : null;
-    useMemo(function() {
-        return formatContent(description, EVENT_DESCRIPTION_SIZE);
-    }, [
-        description
-    ]);
     return /*#__PURE__*/ jsxs(Card, {
         className: "d-flex flex-column event-card h-100",
         children: [
@@ -128,7 +122,7 @@ function EventCard(param) {
                                     }, key);
                                 })
                             }),
-                            sales && sales.map(function(sale) {
+                            sales === null || sales === void 0 ? void 0 : sales.map(function(sale) {
                                 return /*#__PURE__*/ jsxs("div", {
                                     className: "event-card-sale",
                                     children: [

package/package.json

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

package/src/events/edit-event-modal/component/EditEventForm/EditEventForm.tsx

@@ -50,7 +50,7 @@ export interface EditEventFormValues extends IntervalInputValues {
   saleDeadline: number | null
   integrationUrl: string | null
   recurrenceEndAt?: string
-  duplicatedFromId?: number
+  duplicatedFromId?: number | null
   editedProductSet?: ProductSetFormValues
 }
 
@@ -208,7 +208,7 @@ export const EditEventForm = ({
   )
   const isChangedTime =
     watchedValues?.start !==
-    toSimpleDateTime(defaultEventValues?.startAt || '') ||
+      toSimpleDateTime(defaultEventValues?.startAt || '') ||
     watchedValues?.end !== toSimpleDateTime(defaultEventValues?.endAt || '')
   const isSinglEventWithBooked = !rrule && isBooked && isChangedTime
 
@@ -221,18 +221,20 @@ export const EditEventForm = ({
         onApprove={onApproveDialog}
         onDecline={onDeclineDialog}
       />
-      {
-        duplicatedInfo ? (<div className='d-flex justify-content-between'>
+      {duplicatedInfo ? (
+        <div className='d-flex justify-content-between'>
           <h5 className='edit-event-modal-title highlited-primary-title'>
             {title}
           </h5>
-          <Badge className='duplicate-badge' variant='success'>{duplicatedInfo}</Badge>
-        </div>) : (
-          <h5 className='edit-event-modal-title highlited-primary-title'>
-            {title}
-          </h5>
-        )
-      }
+          <Badge className='duplicate-badge' variant='success'>
+            {duplicatedInfo}
+          </Badge>
+        </div>
+      ) : (
+        <h5 className='edit-event-modal-title highlited-primary-title'>
+          {title}
+        </h5>
+      )}
 
       <FormProvider {...form}>
         <Modal.Body

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

@@ -69,16 +69,13 @@ export const Default: Story<EventCardProps> = () => {
           console.log('onStatistic')
         }}
         titleId='titleId'
-        descriptionId='descriptionId'
       />
     </div>
   )
 }
 
-export const Skeleton: Story<EventCardProps> = () => {
-  return (
-    <div style={{ maxWidth: '34rem' }}>
-      <EventCardSkeleton />
-    </div>
-  )
-}
+export const Skeleton: Story<EventCardProps> = () => (
+  <div style={{ maxWidth: '34rem' }}>
+    <EventCardSkeleton />
+  </div>
+)

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

@@ -1,4 +1,3 @@
-import { useMemo } from 'react'
 import {
   Badge,
   Card,
@@ -22,12 +21,7 @@ import {
   FaQrcode,
 } from 'react-icons/fa'
 import { Sale } from '../../types/bookings'
-import { TipTapEditor } from '../../tiptap-editor/TipTapEditor'
-import {
-  EVENT_DESCRIPTION_SIZE,
-  formatContent,
-  getStatisticInfo,
-} from './utils'
+import { getStatisticInfo } from './utils'
 import { ReactComponent as ChartBarIcon } from '../../assets/dashboard/chartBar.svg'
 
 export interface EventCardProps extends HasPermissionProp {
@@ -45,14 +39,12 @@ export interface EventCardProps extends HasPermissionProp {
   eventMetadata?: EventMetadata | null
   onStatistic: () => void
   titleId?: string
-  descriptionId?: string
   productSetName?: string
   eventID?: string
 }
 
 export function EventCard({
   name,
-  description,
   date,
   imageUrl,
   sales,
@@ -67,25 +59,18 @@ export function EventCard({
   onStatistic,
   eventStatistic,
   titleId,
-  descriptionId,
   eventID,
 }: EventCardProps) {
   const { t } = useTranslation('Design')
   const { formatNumber, formatDate } = useIntl()
   const { totalViews, ...statistics } = getStatisticInfo(eventStatistic, date)
 
-  const duplicatedInfo =
-    eventMetadata?.editorName && eventMetadata?.duplicatedFromId
-      ? t('Design:duplicatedInfo', {
-          ID: eventMetadata?.duplicatedFromId,
-          name: eventMetadata?.editorName,
-        })
-      : null
-      
-  const memoedContent = useMemo(
-    () => formatContent(description, EVENT_DESCRIPTION_SIZE),
-    [description],
-  )
+  const duplicatedInfo = eventMetadata?.duplicatedFromId
+    ? t('Design:duplicatedInfo', {
+        ID: eventMetadata?.duplicatedFromId,
+        name: eventMetadata?.editorName,
+      })
+    : null
 
   return (
     <Card className='d-flex flex-column event-card h-100'>
@@ -119,13 +104,15 @@ export function EventCard({
           ) : (
             name
           )}
-          {duplicatedInfo &&    <div className='mt-2 ml-2'>
+          {duplicatedInfo && (
+            <div className='mt-2 ml-2'>
               <div className='event-card-sale'>
                 <span className='event-card-sale-name text-success'>
                   {duplicatedInfo}
                 </span>
               </div>
-          </div>}
+            </div>
+          )}
         </Card.Title>
         <div className='flex-grow-1'>
           <div className='mt-2 ml-2'>
@@ -144,23 +131,23 @@ export function EventCard({
             ))}
           </div>
 
-          {sales &&
-            sales.map((sale) => (
-              <div className='event-card-sale' key={sale.id}>
-                {/* TODO: make it an i18n message instead */}
-                <div className='event-card-sale-text'>
-                  <span className='event-card-sale-name'>{sale.name}</span>{' '}
-                  <span className='event-card-sale-quantity'>
-                    {[sale.current, sale.max]
-                      .map((value) => formatNumber(value))
-                      .join(' / ')}
-                  </span>
-                </div>
-                <ProgressBar now={sale.current} max={sale.max} />
+          {sales?.map((sale) => (
+            <div className='event-card-sale' key={sale.id}>
+              {/* TODO: make it an i18n message instead */}
+              <div className='event-card-sale-text'>
+                <span className='event-card-sale-name'>{sale.name}</span>{' '}
+                <span className='event-card-sale-quantity'>
+                  {[sale.current, sale.max]
+                    .map((value) => formatNumber(value))
+                    .join(' / ')}
+                </span>
               </div>
-            ))}
+              <ProgressBar now={sale.current} max={sale.max} />
+            </div>
+          ))}
         </div>
       </Card.Body>
+
       <Card.Footer className='flex-column'>
         {productSetName && (
           <OverlayTrigger
@@ -190,7 +177,6 @@ export function EventCard({
             </button>
             <div className='event-card-views'>
               <FaEye />
-
               <span>{formatNumber(totalViews)}</span>
             </div>
           </div>
@@ -209,6 +195,7 @@ export function EventCard({
             >
               <FaExternalLinkAlt />
             </button>
+
             {hasPermission && (
               <>
                 <button