@riosst100/pwa-marketplace 3.0.4 → 3.0.6

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 {

package/src/overwrites/venia-ui/lib/components/ProductFullDetail/CustomAttributes/customAttributes.js

@@ -13,14 +13,22 @@ const CustomAttributes = props => {
     const { customAttributes, showLabels } = props;
     const classes = useStyle(defaultClasses, props.classes);
 
+    const systemAttributes = [
+        'term_and_conditions',
+        'sale',
+        'sku'
+    ];
+
     const list = useMemo(
         () =>
             customAttributes.reduce((previousAttribute, currentAttribute) => {
+                console.log('currentAttribute',currentAttribute)
+                const attrCode = currentAttribute.attribute_metadata?.code;
                 const usedInComponents =
                     currentAttribute.attribute_metadata?.used_in_components ||
                     [];
                 // Visible on front attributes only
-                if (usedInComponents.includes(IS_VISIBLE_ON_FRONT)) {
+                if (!systemAttributes.includes(attrCode) && usedInComponents.includes(IS_VISIBLE_ON_FRONT)) {
                     const attributeContent = (
                         <li
                             key={currentAttribute.attribute_metadata.uid}
@@ -38,7 +46,7 @@ const CustomAttributes = props => {
 
                 return previousAttribute;
             }, []),
-        [classes, customAttributes, showLabels]
+        [classes, customAttributes, showLabels, systemAttributes]
     );
 
     if (list.length === 0) {

package/src/overwrites/venia-ui/lib/components/ProductFullDetail/components/preOrderDetail.js

@@ -1,58 +1,216 @@
-import React, { useMemo } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import cn from 'classnames';
 import Divider from '@riosst100/pwa-marketplace/src/components/Divider';
+import Select from '@riosst100/pwa-marketplace/src/components/commons/Select';
 
 const preOrderInfo = (props) => {
-    const { className, productDetails } = props
-
-    const preorderData = productDetails ? productDetails.preorder : null;
+    const { className, preOrder, preOrderDate, preOrderDeposite, preOrderNote, preOrderPaymentType, releaseDate, onPaymentTypeChange, paymentTypeOptions = [] } = props;
     
-    const isPreOrder = preorderData && preorderData.is_preorder ? true : false;
-    const preOrderNotes = preorderData ? preorderData.preorder_notes : null;
-    const preOrderAvailableDate = preorderData ? new Date(preorderData.preorder_availability) : null;
+    const isPreOrder = typeof preOrder === 'string'
+        ? preOrder.trim().toLowerCase() === 'pre orders'
+        : !!(preOrder && preOrder.is_preorder);
+
+    const normalizePaymentType = (value = '') => {
+        const normalized = value.toString().trim().toLowerCase();
+
+        if (normalized === 'full payment') {
+            return 'full';
+        }
+
+        if (normalized === 'deposit' || normalized === 'full') {
+            return normalized;
+        }
+
+        return '';
+    };
+
+    const initialPaymentType = useMemo(
+        () => normalizePaymentType(preOrderPaymentType),
+        [preOrderPaymentType]
+    );
+
+    const [selectedPaymentType, setSelectedPaymentType] = useState(initialPaymentType || 'full');
+
+    useEffect(() => {
+        setSelectedPaymentType(initialPaymentType || 'full');
+    }, [initialPaymentType]);
+
+    // Propagate initial and subsequent selection to parent so submit has value
+    useEffect(() => {
+        if (typeof onPaymentTypeChange === 'function' && selectedPaymentType) {
+            onPaymentTypeChange(selectedPaymentType);
+        }
+    }, [selectedPaymentType, onPaymentTypeChange]);
+
+    const normalizedPaymentOptions = useMemo(() => {
+        return paymentTypeOptions.reduce((acc, option) => {
+            const normalizedValue = normalizePaymentType(option.value);
+            if (!normalizedValue) {
+                return acc;
+            }
+
+            if (acc.find(item => item.value === normalizedValue)) {
+                return acc;
+            }
+
+            const label = option.label || (normalizedValue === 'full' ? 'Full Payment' : 'Deposit');
+            acc.push({ label, value: normalizedValue });
+            return acc;
+        }, []);
+    }, [paymentTypeOptions]);
+
+    const paymentOptions = useMemo(() => {
+        const optionsToUse = normalizedPaymentOptions;
+
+        if (!optionsToUse.length) {
+            return [];
+        }
+
+        if (initialPaymentType === 'full') {
+            return optionsToUse.filter(option => option.value === 'full');
+        }
+
+        if (initialPaymentType === 'deposit') {
+            return optionsToUse;
+        }
+
+        return optionsToUse;
+    }, [initialPaymentType, normalizedPaymentOptions]);
+
+    const handlePaymentTypeChange = (event) => {
+        if (!paymentOptions.length) {
+            return;
+        }
+
+        const nextValue = event.target.value;
+        const availableValues = paymentOptions.map(option => option.value);
+        const appliedValue = availableValues.includes(nextValue)
+            ? nextValue
+            : availableValues[0];
+
+        setSelectedPaymentType(appliedValue);
+
+        if (typeof onPaymentTypeChange === 'function') {
+            onPaymentTypeChange(appliedValue);
+        }
+    };
+
+    const formatDate = (value) => {
+        if (!value) {
+            return '-';
+        }
 
-    const month = ["January","February","March","April","May","June","July","August","September","October","November","December"];
+        const parsed = value instanceof Date ? value : new Date(value);
+        if (Number.isNaN(parsed.getTime())) {
+            return '-';
+        }
+
+        const day = String(parsed.getDate()).padStart(2, '0');
+        const month = String(parsed.getMonth() + 1).padStart(2, '0');
+        const year = parsed.getFullYear();
+
+        return `${day}/${month}/${year}`;
+    };
+
+    const preOrderNotes = preOrderNote || null;
+    const preOrderAvailableDate = releaseDate || null;
+    const preOrderClosingDate = preOrderDate || null;
+
+    const normalizeDeposit = (value) => {
+        if (!value && value !== 0) {
+            return '-';
+        }
+
+        const numeric = typeof value === 'number'
+            ? value
+            : Number.parseFloat(value.toString().replace(/[^0-9.-]/g, ''));
+
+        if (Number.isNaN(numeric)) {
+            return value;
+        }
+
+        // Tampilkan sebagai persentase tanpa 0 di belakang koma dan tambahkan '%'
+        // Contoh: 10.00 -> '10%'; 12.5 -> '12.5%'; 12.50 -> '12.5%'
+        let str = numeric.toString();
+        if (str.includes('.')) {
+            // hapus trailing zeros di desimal
+            str = str.replace(/\.0+$/,'');
+            str = str.replace(/\.(\d*[1-9])0+$/,'.$1');
+        }
+        return `${str}%`;
+    };
+
+    const depositValue = normalizeDeposit(preOrderDeposite);
+    const showDepositRow = selectedPaymentType === 'deposit';
+
+    const isPreOrderClosed = (() => {
+        if (!preOrderClosingDate) return false;
+
+        const parsed = preOrderClosingDate instanceof Date
+            ? preOrderClosingDate
+            : new Date(preOrderClosingDate);
+
+        if (Number.isNaN(parsed.getTime())) return false;
+
+        parsed.setHours(23, 59, 59, 999);
+        return new Date().getTime() > parsed.getTime();
+    })();
 
     return isPreOrder ? (
         <>
             <div
                 className={cn(
-                    'flex flex-col border border-gray-100 rounded-lg p-5 gap-2.5',
+                    'flex flex-col border border-gray-100 rounded-lg p-5 m-4 gap-4 bg-white',
                     className
                 )}
             >
-                <div className='flex flex-row justify-between gap-[20px]'>
-                    <div className='flex flex-col gap-2.5'>
-                        <div className='text-[14px] font-medium text-gray-500'>
-                            Release Date
-                        </div>
-                        <div className='text-[16px] font-medium text-colorDefault text-center'>
-                            {preOrderAvailableDate ? preOrderAvailableDate.getDate() + ', ' + month[preOrderAvailableDate.getMonth()] + ' ' + preOrderAvailableDate.getFullYear() : 'No Release Date.'}
-                            {/* 27, February 2024 */}
-                        </div>
+                <div className='text-[16px] font-semibold text-colorDefault'>
+                    Pre Order Details
+                </div>
+                <div className='flex flex-col gap-3'>
+                    {showDepositRow && (
+                        <>
+                            <div className='flex justify-between text-[13px] text-gray-600'>
+                                <span className='font-medium text-gray-500'>Deposit:</span>
+                                <span className='font-medium text-colorDefault'>{depositValue}</span>
+                            </div>
+                            <Divider className='h-px w-full bg-gray-100' />
+                        </>
+                    )}
+                    <div className='flex justify-between items-center text-[13px] text-gray-600 gap-4'>
+                        <span className='font-medium text-gray-500'>Payment Type:</span>
+                        <Select
+                            wrapperClassname='justify-end w-full max-w-[180px]'
+                            className='w-full text-[13px]'
+                            options={paymentOptions}
+                            value={selectedPaymentType}
+                            onChange={handlePaymentTypeChange}
+                            showPlaceholder={false}
+                        />
                     </div>
-                    <Divider className="w-[1px] h-[50px]" />
-                    <div className='flex flex-col gap-2.5'>
-                        <div className='text-[14px] font-medium text-gray-500'>
-                            Last Date
-                        </div>
-                        <div className='text-[16px] font-medium text-colorDefault text-center'>
-                            31, March 2024
-                        </div>
+                    <Divider className='h-px w-full bg-gray-100' />
+                    <div className='flex justify-between text-[13px] text-gray-600'>
+                        <span className='font-medium text-gray-500'>Pre Order Closing Date:</span>
+                        <span className='font-medium text-colorDefault'>{formatDate(preOrderClosingDate)}</span>
                     </div>
-                    <Divider className="w-[1px] h-[50px]" />
-                    <div className='flex flex-col gap-2.5'>
-                        <div className='text-[14px] font-medium text-gray-500'>
-                            Deposite
-                        </div>
-                        <div className='text-[16px] font-medium text-colorDefault text-center'>
-                            40%
-                        </div>
+                    <Divider className='h-px w-full bg-gray-100' />
+                    <div className='flex justify-between text-[13px] text-gray-600'>
+                        <span className='font-medium text-gray-500'>Release Date:</span>
+                        <span className='font-medium text-colorDefault'>{formatDate(preOrderAvailableDate)}</span>
                     </div>
+                    <Divider className='h-px w-full bg-gray-100' />
+                    <div className='flex justify-between text-[13px] text-gray-600'>
+                        <span className='font-medium text-gray-500'>Note:</span>
+                        <span className='font-medium text-colorDefault text-right'>
+                            {preOrderNotes || '-'}
+                        </span>
+                    </div>
+                    {isPreOrderClosed && (
+                        <div className='mt-1 text-[12px] text-red-500 font-medium'>
+                            Pre order is closed. You can no longer place a pre-order for this product.
+                        </div>
+                    )}
                 </div>
-                {preOrderNotes && <p>
-                    Notes : {preOrderNotes}
-                </p>}
             </div>
         </>
     ) : ''