@riosst100/pwa-marketplace 3.0.4 → 3.0.5

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@riosst100/pwa-marketplace",
   "author": "riosst100@gmail.com",
-  "version": "3.0.4",
+  "version": "3.0.5",
   "main": "src/index.js",
   "pwa-studio": {
     "targets": {

package/src/components/CrossSeller/item.js

@@ -9,7 +9,7 @@ import logoImage from './logo_seller.png';
 
 const Item = ({ sellerName, sales, price, condition }) => {
     return (
-        <div className='flex flex-col items-center text-center lg_text-left md_text-left lg_flex-row md_flex-row bg-white rounded-lg border border-gray-100 p-[15px] gap-y-4'>
+        <div className='flex flex-col items-center text-center justify-around lg_text-left md_text-left lg_flex-row md_flex-row bg-white rounded-lg border border-gray-100 p-[15px] gap-y-4'>
             <div className='seller_info-container flex flex-row gap-x-[15px] lg_w-1/3 md_w-1/3'>
                 <div className='flex flex-col gap-y-[15px]'>
                     <div className='seller_summary-wrapper flex flex-row gap-x-2.5 items-center'>
@@ -41,16 +41,15 @@ const Item = ({ sellerName, sales, price, condition }) => {
                     onSubmit={() => { }}
                     className="flex flex-col gap-x-7 gap-y-7 items-center lg_flex-row md_flex-row"
                 >
-                    <QuantityStepper min={1} />
                     <Button
-                        data-cy="addToCartButton"
+                        data-cy="viewProductButton"
                         classes={{
                             content: 'normal-case font-medium text-[16px]'
                         }}
                         priority="high"
                         type="button"
                     >
-                        Add To Cart
+                        View Product
                     </Button>
                 </Form>
             </div>

package/src/components/LinkToOtherStores/index.js

@@ -18,10 +18,10 @@ const LinkToOtherStores = (props) => {
             'product_link': 'https://tokopedia.com',
             'stores': 'Tokopedia'
         },
-        {
-            'product_link': 'https://lazada.sg',
-            'stores': 'Lazada'
-        }
+        // {
+        //     'product_link': 'https://lazada.sg',
+        //     'stores': 'Lazada'
+        // }
     ];
 
     const getLogo = (stores) => {

package/src/components/ProductListTab/productListTab.js

@@ -37,7 +37,7 @@ const ProductListTab = props => {
         },
         {
             'label': 'Pre Order',
-            'value': 'lof_preorder'
+            'value': 'card_pre_orders'
         },
         // {
         //     'label': 'Auction',

package/src/components/commons/Select/index.js

@@ -7,7 +7,9 @@ const Select = (props) => {
         className,
         options = [],
         value,
-        onChange
+        onChange,
+        showPlaceholder = true,
+        placeholder = 'Choose Option'
     } = props;
 
     return (
@@ -17,9 +19,11 @@ const Select = (props) => {
                 value={value}
                 onChange={onChange}
             >
-                <option value=''>
-                    Choose Option
-                </option>
+                {showPlaceholder && (
+                    <option value=''>
+                        {placeholder}
+                    </option>
+                )}
                 {options.map((item) => (
                     <option key={item.value} value={item.value}>
                         {item.label}

package/src/overwrites/peregrine/lib/talons/CartPage/PriceSummary/priceSummaryFragments.gql.js

@@ -22,6 +22,9 @@ export const PriceSummaryFragment = gql`
         items {
             uid
             quantity
+            is_preorder
+            pre_order_payment_type
+            pre_order_deposit
         }
         ...ShippingSummaryFragment
         prices {

package/src/overwrites/peregrine/lib/talons/CartPage/ProductListing/productListingFragments.gql.js

@@ -6,6 +6,9 @@ export const ProductListingFragment = gql`
         # eslint-disable-next-line @graphql-eslint/require-id-when-available
         items {
             uid
+            is_preorder
+            pre_order_payment_type
+            pre_order_deposit
             # eslint-disable-next-line @graphql-eslint/require-id-when-available
             seller {
                 seller_name
@@ -17,6 +20,7 @@ export const ProductListingFragment = gql`
                 name
                 sku
                 url_key
+                release_date
                 thumbnail {
                     url
                 }

package/src/overwrites/peregrine/lib/talons/CheckoutPage/checkoutPage.extended.gql.js

@@ -13,6 +13,20 @@ export const ITEM_SELLER_FRAGMENT = gql`
     }
 `;
 
+// Extend items to include preorder fields used in ItemsReview/item.js overwrite
+export const ITEM_PREORDER_FRAGMENT = gql`
+    fragment ItemPreorderFragment on Cart {
+        items {
+            is_preorder
+            pre_order_payment_type
+            pre_order_deposit
+            product {
+                release_date
+            }
+        }
+    }
+`;
+
 export const CREATE_CART = gql`
     mutation createCart {
         cartId: createEmptyCart
@@ -64,10 +78,12 @@ export const GET_ORDER_DETAILS = gql`
             }
             ...ItemsReviewFragment
             ...ItemSellerFragment
+            ...ItemPreorderFragment
         }
     }
     ${ItemsReviewFragment}
     ${ITEM_SELLER_FRAGMENT}
+    ${ITEM_PREORDER_FRAGMENT}
 `;
 
 export const GET_CHECKOUT_DETAILS = gql`
@@ -77,11 +93,13 @@ export const GET_CHECKOUT_DETAILS = gql`
             ...CheckoutPageFragment
             ...ItemsReviewFragment
             ...ItemSellerFragment
+            ...ItemPreorderFragment
         }
     }
     ${CheckoutPageFragment}
     ${ItemsReviewFragment}
     ${ITEM_SELLER_FRAGMENT}
+    ${ITEM_PREORDER_FRAGMENT}
 `;
 
 export const GET_CUSTOMER = gql`
@@ -100,5 +118,6 @@ export default {
     getCustomerQuery: GET_CUSTOMER,
     getOrderDetailsQuery: GET_ORDER_DETAILS,
     placeOrderMutation: PLACE_ORDER,
-    itemSellerFragment: ITEM_SELLER_FRAGMENT
+    itemSellerFragment: ITEM_SELLER_FRAGMENT,
+    itemPreorderFragment: ITEM_PREORDER_FRAGMENT
 };

package/src/overwrites/peregrine/lib/talons/FilterSidebar/useFilterSidebar.js

@@ -189,11 +189,11 @@ export const useFilterSidebar = props => {
             },
             {
                 'label': 'Preorder',
-                'value': 'lof_preorder',
+                'value': 'card_pre_orders',
                 'path': '',
                 'options': [
-                    {'value':'0','label':'No','title':'No'},
-                    {'value':'1','label':'Yes','title':'Yes'}
+                    {'value':'0','label':'','title':''},
+                    {'value':'1','label':'Pre Orders','title':'Pre Orders'}
                 ]
             },
             {

package/src/overwrites/peregrine/lib/talons/ProductFullDetail/useProductFullDetail.js

@@ -579,7 +579,7 @@ export const useProductFullDetail = props => {
 
     const handleAddToCart = useCallback(
         async formValues => {
-            const { quantity } = formValues;
+            const { quantity, preorder } = formValues;
 
             /*
                 @deprecated in favor of general addProductsToCart mutation. Will support until the next MAJOR.
@@ -636,15 +636,13 @@ export const useProductFullDetail = props => {
                     product: {
                         sku: product.sku,
                         quantity
-                    },
-                    entered_options: [
-                        {
-                            uid: product.uid,
-                            value: product.name
-                        }
-                    ]
+                    }
                 };
 
+                if (preorder && Object.keys(preorder).length) {
+                    variables.product.preorder = preorder;
+                }
+
                 if (selectedOptionsArray.length) {
                     variables.product.selected_options = selectedOptionsArray;
                 }
@@ -721,6 +719,7 @@ export const useProductFullDetail = props => {
         price_range: product?.price_range,
         sku: productSku,
         publish_status: product.publish_status,
+        custom_table_metadata: product.custom_table_metadata,
         term_and_conditions: product.term_and_conditions,
         link_to_other_stores: product.link_to_other_stores,
         shipping_policy: product.shipping_policy,

package/src/overwrites/peregrine/lib/talons/RootComponents/Product/productDetailFragment.gql.js

@@ -116,6 +116,11 @@ export const ProductDetailsFragment = gql`
             pre_order_date
         }
         term_and_conditions
+        custom_table_metadata {
+            mainAttrCode
+            mainAttrVal
+            mainAttrLabel
+        }
         shipping_policy
         return_policy
         small_image {

package/src/overwrites/venia-ui/lib/components/Breadcrumbs/breadcrumbs.js

@@ -22,7 +22,7 @@ import { useLocation } from 'react-router-dom';
 const Breadcrumbs = props => {
     const classes = useStyle(defaultClasses, props.classes);
 
-    const { categoryId, currentProduct, customPage, currentFilter } = props;
+    const { categoryId, currentProduct, customPage, currentFilter, currentProductCustomTableMetadata, customAttributesDetails } = props;
 
     const talonProps = useBreadcrumbs({ categoryId });
 
@@ -103,6 +103,25 @@ const Breadcrumbs = props => {
 
     const params = removeShopbyParam(search);
 
+    if (currentProductCustomTableMetadata) {
+        const mainAttrCode = currentProductCustomTableMetadata.mainAttrCode;
+        const mainAttrVal = currentProductCustomTableMetadata.mainAttrVal;
+        const mainAttrLabel = currentProductCustomTableMetadata.mainAttrLabel;
+
+        filterBreadcrumbsElement.push(
+            <Fragment>
+                <span className={classes.divider}>{DELIMITER}</span>
+                <Link
+                    className={classes.link}
+                    to={resourceUrl('/' + currentCategoryPath + '?' + mainAttrCode + '[filter]=' + mainAttrLabel + ',' + mainAttrVal)}
+                    onClick={handleClick}
+                >
+                    {mainAttrLabel}
+                </Link>
+            </Fragment>
+        )
+    }
+
     currentFilter && currentFilter.length && currentFilter.map((filter, index) => {
         currentProduct ? (
             filterBreadcrumbsElement.push(

package/src/overwrites/venia-ui/lib/components/CartPage/ProductListing/product.js

@@ -30,7 +30,6 @@ const HeartIcon = <Heart size="16" color="#909090" />;
 
 const Product = props => {
     const { item } = props;
-
     const { formatMessage } = useIntl();
     const talonProps = useProduct({
         operations: {
@@ -123,8 +122,49 @@ const Product = props => {
                     </Link>
                     <div className='flex flex-col'>
                         <div className={cn(classes.name, 'text-[14px] font-normal max-w-[260px]')} data-cy="Product-name">
+                            {item.is_preorder && (
+                                <span className="inline-flex items-center gap-1 px-2 py-[2px] mb-3 rounded-full bg-blue-600 text-white border border-blue-700 text-[11px] font-medium">
+                                    Preorder
+                                </span>
+                            )}
+                            <br/>
                             <Link to={itemLink}>{name}</Link>
                         </div>
+                        {item.is_preorder && (
+                            <div className="mt-2 flex flex-col gap-1" aria-label="Preorder information">
+                                <div className="flex flex-wrap items-center gap-2">
+                                    <span className="text-[11px] text-amber-800">
+                                        Release: {(() => {
+                                            const rd = item?.product?.release_date;
+                                            if (!rd) return '-';
+                                            const d = new Date(rd);
+                                            if (isNaN(d.getTime())) return rd;
+                                            const dd = String(d.getDate()).padStart(2, '0');
+                                            const mm = String(d.getMonth() + 1).padStart(2, '0');
+                                            const yyyy = d.getFullYear();
+                                            return `${dd}/${mm}/${yyyy}`;
+                                        })()}
+                                    </span>
+                                    {item.pre_order_payment_type === 'deposit' && item.pre_order_deposit != null && (
+                                        <span className="text-[11px] text-amber-800">
+                                            {(() => {
+                                                const raw = item.pre_order_deposit;
+                                                const n = typeof raw === 'number' ? raw : Number.parseFloat(String(raw).replace(/[^0-9.-]/g,''));
+                                                if (!Number.isFinite(n)) {
+                                                    return `Deposit: ${raw}`;
+                                                }
+                                                let str = n.toString();
+                                                if (str.includes('.')) {
+                                                    str = str.replace(/\.0+$/,'');
+                                                    str = str.replace(/\.(\d*[1-9])0+$/,'.$1');
+                                                }
+                                                return `Deposit: ${str}%`;
+                                            })()}
+                                        </span>
+                                    )}
+                                </div>
+                            </div>
+                        )}
                         <ProductOptions
                             options={options}
                             classes={{

package/src/overwrites/venia-ui/lib/components/CartPage/ProductListing/product.module.css

@@ -71,7 +71,7 @@
     /* composes: font-medium from global; */
     grid-area: name;
     display: -webkit-box;
-    -webkit-line-clamp: 2;
+    -webkit-line-clamp: 3;
     -webkit-box-orient: vertical;
     overflow: hidden;
     line-height: normal;

package/src/overwrites/venia-ui/lib/components/CartPage/ProductListingBySeller/productListingBySeller.js

@@ -80,7 +80,46 @@ const ProductListingBySeller = props => {
                 wishlistConfig={wishlistConfig}
             />
         ));
- 
+        // Helpers for currency + subtotal formatting
+        const aggregateSubtotal = items => {
+            let total = 0;
+            let currency = null;
+            for (const it of items) {
+                const priceObj = it?.prices?.price;
+                if (priceObj) {
+                    if (!currency) currency = priceObj.currency;
+                    const unit = Number(priceObj.value) || 0;
+                    const qty = Number(it?.quantity) || 0;
+                    total += unit * qty;
+                }
+            }
+            return { total, currency };
+        };
+
+        const formatMoney = (value, currency) => {
+            if (value == null || !isFinite(value)) return '-';
+            if (!currency) return value.toFixed(2);
+            try {
+                const locale = currency === 'IDR' ? 'id-ID' : (currency === 'SGD' ? 'en-SG' : 'en-US');
+                const opts = currency === 'IDR'
+                    ? { style: 'currency', currency, minimumFractionDigits: 0, maximumFractionDigits: 0 }
+                    : { style: 'currency', currency, minimumFractionDigits: 2, maximumFractionDigits: 2 };
+                let formatted = new Intl.NumberFormat(locale, opts).format(value);
+                if (currency === 'SGD') {
+                    formatted = 'SGD ' + formatted
+                        .replace(/^S?\$/,'')
+                        .replace(/^SGD\s*/,'')
+                        .trim();
+                }
+                return formatted;
+            } catch (e) {
+                return currency + ' ' + value.toFixed(2);
+            }
+        };
+
+        const { total: subtotalValue, currency: detectedCurrency } = aggregateSubtotal(items);
+        const displayCurrency = detectedCurrency || seller.seller_currency || 'SGD';
+        const formattedSubtotal = formatMoney(subtotalValue, displayCurrency);
         const priceSummary = hasItems ? (
             <PriceSummary isProceedToCheckout={isProceedToCheckout} setIsProceedToCheckout={setIsProceedToCheckout} setIsCartUpdating={setIsCartUpdating} isUpdating={isCartUpdating} sellerUrl={seller.seller_url} />
         ) : null;
@@ -103,13 +142,7 @@ const ProductListingBySeller = props => {
                         {productComponents}
                         <div className={classes.subtotalContainer}>
                             <div className={classes.subtotalLabel}>Subtotal:</div>
-                            <div className={classes.subtotalAmount}>
-                                {seller.seller_currency || 'SGD'} {items.reduce((total, item) => {
-                                    const itemPrice = item?.prices?.price?.value || 0;
-                                    const quantity = item?.quantity || 0;
-                                    return total + (itemPrice * quantity);
-                                }, 0).toFixed(2)}
-                            </div>
+                            <div className={classes.subtotalAmount}>{formattedSubtotal}</div>
                         </div>
                         <div className={classes.summary_container}>
                             <div className={classes.summary_contents}>

package/src/overwrites/venia-ui/lib/components/CheckoutPage/ItemsReview/item.js

@@ -15,11 +15,35 @@ const Item = props => {
         quantity,
         configurable_options,
         isHidden,
-        configurableThumbnailSource
+        configurableThumbnailSource,
+        // Preorder-related fields passed via {...item}
+        is_preorder,
+        pre_order_payment_type,
+        pre_order_deposit,
+        release_date
     } = props;
     const classes = useStyle(defaultClasses, propClasses);
     const className = isHidden ? classes.root_hidden : classes.root_visible;
     const configured_variant = configuredVariant(configurable_options, product);
+    const formatDate = value => {
+        if (!value) return '-';
+        const d = value instanceof Date ? value : new Date(value);
+        if (Number.isNaN(d.getTime())) return '-';
+        const dd = String(d.getDate()).padStart(2, '0');
+        const mm = String(d.getMonth() + 1).padStart(2, '0');
+        const yyyy = d.getFullYear();
+        return `${dd}/${mm}/${yyyy}`;
+    };
+    const formatDepositPercent = raw => {
+        const n = typeof raw === 'number' ? raw : Number.parseFloat(String(raw).replace(/[^0-9.-]/g,''));
+        if (!Number.isFinite(n)) return raw;
+        let str = n.toString();
+        if (str.includes('.')) {
+            str = str.replace(/\.0+$/,'');
+            str = str.replace(/\.(\d*[1-9])0+$/,'.$1');
+        }
+        return `${str}%`;
+    };
     return (
         <div className={className}>
             <Image
@@ -33,7 +57,24 @@ const Item = props => {
                         : product.thumbnail.url
                 }
             />
-            <span className={classes.name}>{product.name}</span>
+            <div className={classes.headerRow}>
+                {is_preorder && (
+                    <span className={classes.preorderBadge}>Preorder</span>
+                )}
+                <span className={classes.name}>{product.name}</span>
+            </div>
+            {is_preorder && (
+                <div className={classes.preorderMeta} aria-label="Preorder information">
+                    <span className={classes.metaItem}>
+                        Release: {formatDate(typeof release_date !== 'undefined' ? release_date : product?.release_date)}
+                    </span>
+                    {pre_order_payment_type === 'deposit' && pre_order_deposit != null && (
+                        <span className={classes.metaItem}>
+                            Deposit: {formatDepositPercent(pre_order_deposit)}
+                        </span>
+                    )}
+                </div>
+            )}
             <ProductOptions
                 options={configurable_options}
                 classes={{

package/src/overwrites/venia-ui/lib/components/CheckoutPage/ItemsReview/item.module.css

@@ -63,3 +63,39 @@
     grid-column: 2 / span 1;
     grid-row: 2 / span 1;
 }
+
+.headerRow {
+    grid-column: 2 / span 1;
+    grid-row: 1 / span 1;
+    align-items: center;
+    gap: 8px;
+}
+
+.preorderBadge {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    padding: 2px 8px;
+    border-radius: 9999px;
+    background: #f26313; /* orange accent for visibility */
+    color: #fff;
+    border: 1px solid #f26313;
+    font-size: 10px;
+    font-weight: 600;
+    margin-bottom: 5px;
+}
+
+.preorderMeta {
+    grid-column: 2 / span 1;
+    grid-row: 2 / span 1;
+    margin-top: 4px;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 12px;
+    color: #000; /* amber-ish */
+    font-size: 11px;
+}
+
+.metaItem {
+    display: inline-block;
+}

package/src/overwrites/venia-ui/lib/components/CheckoutPage/ItemsReview/itemsReview.js

@@ -15,8 +15,8 @@ import defaultClasses from './itemsReview.module.css';
  * @param {Object} props.data an optional static data object to render instead of making a query for data.
  */
 const ItemsReview = props => {
-    const { classes: propClasses } = props;
-
+    const { classes: propClasses, isPreorder, preOrderDeposit, preOrderPaymentType, releaseDate } = props;
+    
     const classes = useStyle(defaultClasses, propClasses);
 
     const talonProps = useItemsReview({
@@ -38,6 +38,12 @@ const ItemsReview = props => {
             {...item}
             isHidden={!showAllItems && index >= 2}
             configurableThumbnailSource={configurableThumbnailSource}
+            // Forward explicit preorder values from parent if provided
+            is_preorder={typeof isPreorder !== 'undefined' ? isPreorder : item.is_preorder}
+            pre_order_payment_type={typeof preOrderPaymentType !== 'undefined' ? preOrderPaymentType : item.pre_order_payment_type}
+            pre_order_deposit={typeof preOrderDeposit !== 'undefined' ? preOrderDeposit : item.pre_order_deposit}
+            // release_date may come from parent or item.product
+            release_date={typeof releaseDate !== 'undefined' ? releaseDate : (item?.product?.release_date)}
         />
     ));
 

package/src/overwrites/venia-ui/lib/components/CheckoutPage/checkoutPage.js

@@ -84,7 +84,7 @@ const CheckoutPage = props => {
         toggleAddressBookContent,
         toggleSignInContent
     } = talonProps;
-
+    
     const [, { addToast }] = useToasts();
 
     const history = useHistory();
@@ -301,7 +301,12 @@ const CheckoutPage = props => {
         // Show ItemsReview from the beginning, not only at the REVIEW step
         const itemsReview = (
             <div className={classes.items_review_container}>
-                <ItemsReview />
+                <ItemsReview
+                    isPreorder={cartItems?.[0]?.is_preorder}
+                    preOrderDeposit={cartItems?.[0]?.pre_order_deposit}
+                    preOrderPaymentType={cartItems?.[0]?.pre_order_payment_type}
+                    releaseDate={cartItems?.[0]?.product?.release_date} 
+                />
             </div>
         );
 

package/src/overwrites/venia-ui/lib/components/FilterModal/CurrentFilters/currentFilters.js

@@ -20,7 +20,7 @@ const CurrentFilters = props => {
                 const { title, value } = item || {};
                 const key = `${group}::${title}_${value}`;
 
-                const customAttributeLandingPage = ['bricks_categories','sc_sports_categories','card_game', 'sc_baseball_release','auction','special_price','lof_preorder','sc_baseball_inserts','sc_baseball_parallel','sc_set_type'];
+                const customAttributeLandingPage = ['bricks_categories','sc_sports_categories','card_game', 'sc_baseball_release','auction','special_price','lof_preorder','card_pre_orders','sc_baseball_inserts','sc_baseball_parallel','sc_set_type'];
 
                 if (!customAttributeLandingPage.includes(group)) {
                     elements.push(

package/src/overwrites/venia-ui/lib/components/FilterSidebar/filterSidebar.js

@@ -125,7 +125,7 @@ const FilterSidebar = props => {
                 const groupName = filterNames.get(group);
                 const frontendInput = filterFrontendInput.get(group);
 
-                const hideFilters = ['card_game','bricks_categories','sc_sports_categories','trains','trains_locomotives','trains_supplies_type','lof_preorder','auction','special_price','sc_baseball_inserts','sc_baseball_parallel','sale','sc_set_type','sc_brands'];
+                const hideFilters = ['card_game','bricks_categories','sc_sports_categories','trains','trains_locomotives','trains_supplies_type','lof_preorder','card_pre_orders','auction','special_price','sc_baseball_inserts','sc_baseball_parallel','sale','sc_set_type','sc_brands'];
                 if (!allowedFiltersArr?.length || filterState.size && allowedFiltersArr.length || !filterState.size && allowedFiltersArr.length && allowedFiltersArr.includes(group)) {
                     if (!hideFilters.includes(group) && groupName && !group.includes('card_release') && !group.includes('card_set') && !group.includes('sc_set_name')) {
                     

package/src/overwrites/venia-ui/lib/components/Gallery/item.js

@@ -140,7 +140,7 @@ const GalleryItem = props => {
                         data-cy="GalleryItem-name">{name}</span>
                     {/* </Link> */}
                     <div data-cy="GalleryItem-price" className={cn(classes.price, 'mb-2.5 pt-2.5')}>
-                        <p className='font-medium !text-[#f76b1c] text-[1.1rem] !mb-1 !leading-[14px]'>
+                        <p className='font-medium !text-[#f76b1c] !mb-1'>
                             <Price
                                 value={priceSource.value}
                                 currencyCode={priceSource.currency}
@@ -154,16 +154,8 @@ const GalleryItem = props => {
                         </p> */}
                     </div>
 
-                    <div data-cy="GalleryItem-Rating" className={cn('flex gap-[5px] items-center mb-2')}>
-                        <Star />
-                        <span className='text-[12px] leading-normal'>
-                            {rating_summary}
-                        </span>
-                    </div>
-
                     <div data-cy="GalleryItem-Seller" className={cn('flex gap-[5px] items-center')}>
-                        <Verify size={17} className='text-blue-700' variant="Bold" />
-                        <span className='text-[12px] text-gray-300 leading-normal'>
+                        <span className='text-[12px] text-gray-400 leading-normal'>
                             {seller}
                         </span>
                     </div>

package/src/overwrites/venia-ui/lib/components/Gallery/item.module.css

@@ -74,11 +74,11 @@
 }
 
 .name {
-    composes: font-medium from global;
+    /* composes: font-medium from global; */
     composes: text-base from global;
     composes: mb-1 from global;
     display: -webkit-box;
-    -webkit-line-clamp: 2;
+    -webkit-line-clamp: 3;
     -webkit-box-orient: vertical;
     overflow: hidden;
     line-height: normal;
@@ -87,13 +87,14 @@
 .name,
 .price {
     composes: text-colorDefault from global;
-    composes: text-[14px] from global;
-    composes: font-medium from global;
+    /* composes: text-[14px] from global; */
+    /* composes: font-medium from global; */
     min-height: 1rem;
 }
 
 .price {
     padding-top: 2.5;
+    composes: font-medium from global;
 }
 
 .unavailableContainer {