@riosst100/pwa-marketplace 3.0.3 → 3.0.5

package/src/overwrites/venia-ui/lib/components/OrderHistoryPage/Reviews/starInput.js

@@ -0,0 +1,33 @@
+import React, { useState } from 'react';
+
+const StarRating = ({ totalStars = 5, rating, onRatingChange }) => {
+    const [hover, setHover] = useState(0);
+
+    const handleClick = (newRating) => {
+        onRatingChange(newRating);
+    };
+
+    return (
+        <div className="star-rating flex flex-row gap-x-1">
+            {[...Array(totalStars)].map((star, index) => {
+                const ratingClass = index < (hover || rating) ? 'filled text-yellow-400' : 'empty text-gray-400';
+                return (
+                    <span
+                        key={index}
+                        className={`star ${ratingClass}`}
+                        onMouseEnter={() => setHover(index + 1)}
+                        onMouseLeave={() => setHover(0)}
+                        onClick={() => handleClick(index + 1)}
+                    >
+                        <svg className={ratingClass} width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+                            <path d="M8.00887 2.04754L9.03554 4.10087C9.17554 4.38671 9.54887 4.66087 9.86387 4.71337L11.7247 5.02254C12.9147 5.22087 13.1947 6.08421 12.3372 6.93587L10.8905 8.38254C10.6455 8.62754 10.5114 9.10004 10.5872 9.43837L11.0014 11.2292C11.328 12.6467 10.5755 13.195 9.32137 12.4542L7.5772 11.4217C7.2622 11.235 6.74304 11.235 6.4222 11.4217L4.67804 12.4542C3.4297 13.195 2.67137 12.6409 2.99804 11.2292L3.4122 9.43837C3.48804 9.10004 3.35387 8.62754 3.10887 8.38254L1.6622 6.93587C0.810536 6.08421 1.0847 5.22087 2.2747 5.02254L4.13554 4.71337C4.4447 4.66087 4.81804 4.38671 4.95804 4.10087L5.9847 2.04754C6.5447 0.933372 7.4547 0.933372 8.00887 2.04754Z" fill="currentColor" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" />
+                        </svg>
+
+                    </span>
+                );
+            })}
+        </div>
+    );
+};
+
+export default StarRating;

package/src/overwrites/venia-ui/lib/components/OrderHistoryPage/orderHistoryPage.js

@@ -1,4 +1,4 @@
-import React, { useMemo, useEffect } from 'react';
+import React, { useMemo, useEffect, useState } from 'react';
 import { useIntl, FormattedMessage } from 'react-intl';
 import {
     Search as SearchIcon,
@@ -25,6 +25,7 @@ import ResetButton from './resetButton';
 import { SearchNormal } from 'iconsax-react';
 import cn from 'classnames';
 import Pagination from '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/components/Pagination';
+import { ReviewModal } from './Reviews'
 
 const errorIcon = (
     <Icon
@@ -52,6 +53,8 @@ const OrderHistoryPage = props => {
     } = talonProps;
     const [, { addToast }] = useToasts();
     const { formatMessage } = useIntl();
+    const [reviewOrder, setReviewOrder] = useState(null);
+
     const PAGE_TITLE = formatMessage({
         id: 'orderHistoryPage.pageTitleText',
         defaultMessage: 'My Orders'
@@ -73,7 +76,7 @@ const OrderHistoryPage = props => {
 
     const orderRows = useMemo(() => {
         return orders.map(order => {
-            return <OrderRow key={order.id} order={order} />;
+            return <OrderRow setReviewOrder={setReviewOrder} key={order.id} order={order} />;
         });
     }, [orders]);
 
@@ -163,8 +166,32 @@ const OrderHistoryPage = props => {
         }
     }, [addToast, errorMessage]);
 
+    console.log('reviewOrder',reviewOrder)
+
     return (
         <OrderHistoryContextProvider>
+            <ReviewModal
+                // open={open}
+                setReviewOrder={setReviewOrder}
+                reviewOrder={reviewOrder}
+                // defaultNickname={defaultNickname}
+                // ratingsMetadata={ratingsMetadataData?.productReviewRatingsMetadata?.items || []}
+                // loadingRatingsMetadata={loadingRatingsMetadata}
+                // onSubmit={async (formValues) => {
+                //     setSubmitting(true);
+                //     const input = {
+                //         nickname: formValues.nickname,
+                //         summary: formValues.summary,
+                //         text: formValues.review,
+                //         sku: product?.sku,
+                //         ratings: formValues.ratings
+                //     };
+                //     const result = await handleSubmitReview(input);
+                //     setSubmitting(false);
+                //     if (result.success) setOpen(false);
+                // }}
+                // submitting={submitting}
+            />
             <div className={classes.root}>
                 <StoreTitle>{PAGE_TITLE}</StoreTitle>
                 <div aria-live="polite" className="text-xl font-medium text-left">

package/src/overwrites/venia-ui/lib/components/OrderHistoryPage/orderRow.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useCallback, useState } from 'react';
 import { arrayOf, number, shape, string } from 'prop-types';
 import { ChevronDown, ChevronUp } from 'react-feather';
 import { FormattedMessage, useIntl } from 'react-intl';
@@ -17,7 +17,7 @@ import PlaceholderImage from '@magento/venia-ui/lib/components/Image/placeholder
 import { Link, useHistory } from 'react-router-dom';
 
 const OrderRow = props => {
-    const { order } = props;
+    const { order, setReviewOrder } = props;
     const { formatMessage } = useIntl();
     const history = useHistory();
     const {
@@ -179,9 +179,22 @@ const OrderRow = props => {
         });
     };
 
+    const handleWriteReview = useCallback(( order ) => {
+        console.log('order',order)
+        if (order) {
+            setReviewOrder(order);
+        }
+    }, [setReviewOrder]);
+
+    
+    // ReviewModal
+
     return (
         <li className={classes.root}>
-            <div className='flex flex-col md_flex-row md_items-start justify-between mb-2.5'>
+            <div className='flex flex-col md_flex-row md_items-start justify-between mb-2.5' style={{
+                "borderBottom": "1px solid #e6e9ea",
+                "paddingBottom": "10px"
+            }}>
                 <div className='flex flex-col ml-[14px] mt-[5px]'>
                     <div className="flex gap-x-[15px] flex-col">
                         <div className='flex gap-x-[5px] items-center'>
@@ -202,13 +215,16 @@ const OrderRow = props => {
                     </div>
                 </div>
             </div>
-            <div className='flex flex-col md_flex-row justify-between mb-2.5'>
-                <div className='flex flex-col ml-[5px] gap-y-[20px]'>
+            <div className='flex flex-col md_flex-column justify-between mb-0'>
+                <div className='flex flex-col ml-[5px] gap-y-[10px]'>
                     {/* Per-item horizontal flex: image + detail */}
                     {items && items.length > 0 && items.map((it, idx) => {
                         const { url, label } = getThumbnailForSku(it.product_sku, it.product_name, idx);
                         return (
-                            <div key={it.id || idx} className='flex flex-row gap-4 mb-2'>
+                            <div key={it.id || idx} className='flex flex-row gap-4 mb-1 justify-between' style={{
+                                "borderBottom": "1px solid #e6e9ea",
+                                "paddingBottom": "10px"
+                            }}>
                                 <div className={classes.productImage}>
                                     {url ? (
                                         <img
@@ -222,15 +238,16 @@ const OrderRow = props => {
                                     )}
                                 </div>
                                 <div className='flex flex-col gap-1 pb-2 last_pb-0 max-w-[375px]'>
-                                    <div className={cn(classes.productName, 'text-[14] font-medium')}>
+                                    <div className={cn(classes.productName, 'text-[14px] font-medium')}>
                                         <span>{it.product_name}</span>
                                     </div>
-                                    <div className="text-[14] text-gray-300">
-                                        <span>Qty : {`${it.quantity_ordered}`}</span>
-                                        <br />
-                                        <span>
-                                            Price : <Price currencyCode={it?.product_sale_price?.currency} value={it?.product_sale_price?.value} />
-                                        </span>
+                                    <div className="text-[12px]">
+                                        <span>x{`${it.quantity_ordered}`}</span>
+                                    </div>
+                                </div>
+                                <div class="flex flex-col gap-1 pb-2 last_pb-0 justify-center">
+                                    <div class="text-[14px] text-blue-700">
+                                        <span><Price currencyCode={it?.product_sale_price?.currency} value={it?.product_sale_price?.value} /></span>
                                     </div>
                                 </div>
                             </div>
@@ -238,45 +255,64 @@ const OrderRow = props => {
                     })}
                 </div>
                 {/* Right column: bottom-aligned Order Total + CTA */}
-                <div className='flex flex-col items-end gap-2 md_pl-10 md_self-end mr-4 mb-1'>
-                    <div className="md_text-right">
-                        <span className="text-[14] text-gray-200 block mb-1">
+                <div className='flex flex-col items-end gap-4 md_pl-10 md_self-end mr-4 mb-1 pt-2'>
+                    <div className="md_text-right flex flex-row gap-5 items-center">
+                        <span className="text-[14px] text-gray-200 block mb-1">
                             <FormattedMessage
                                 id={'orderRow.orderTotalText'}
                                 defaultMessage={'Order Total'}
-                            />
+                            />:
                         </span>
-                        <div className="text-lg font-medium">{orderTotalPrice}</div>
+                        <div className="text-lg font-medium text-blue-700">{orderTotalPrice}</div>
                     </div>
                     <div className="flex flex-row gap-2 w-full justify-end items-center">
+                        {showNewReturnButton && (
+                            <>
+                                {/* <ReviewModal order={reviewOrder} /> */}
+                                <span className="bg-blue-700 hover:bg-white hover:text-blue-700 hover:border hover:border-blue-700 rounded-full px-[30px] py-[8px] text-[13px] font-medium text-white transition-all duration-300 ease-in-out" onClick={() => handleWriteReview(order)}>
+                                    <FormattedMessage
+                                        id={'orderRow.ViewTransactionDetail'}
+                                        defaultMessage={'Write a Review'}
+                                    />
+                                </span>
+                            </>
+                        )}
                         <Link 
                             to={{
                                 pathname: `/order-history/view/${orderNumber}`,
                                 state: { order }
                             }}
                         >
-                            <span className="bg-blue-700 hover:bg-white hover:text-blue-700 hover:border hover:border-blue-700 rounded-full px-[30px] py-[5px] text-[13px] font-medium text-white transition-all duration-300 ease-in-out">
+                            <span className="bg-blue-700 hover:bg-white hover:text-blue-700 hover:border hover:border-blue-700 rounded-full px-[30px] py-[8px] text-[13px] font-medium text-white transition-all duration-300 ease-in-out">
                                 <FormattedMessage
                                     id={'orderRow.ViewTransactionDetail'}
-                                    defaultMessage={'View Order Detail'}
+                                    defaultMessage={'View Order'}
                                 />
                             </span>
                         </Link>
                         {showNewReturnButton && (
-                            <div
-                                className={cn(
-                                    "cursor-pointer border border-blue-700 bg-white text-blue-700 hover:bg-blue-50 hover:text-blue-700 hover:border-blue-700",
-                                    "rounded-full px-[10px] py-[3px] text-[13px] font-medium transition-all duration-300 ease-in-out flex items-center gap-2"
-                                )}
-                                onClick={handleNewReturn}
-                                title={formatMessage({ id: 'orderRow.returnProduct', defaultMessage: 'Return Product' })}
-                            >
-                                <ConvertCard size={20} color="#f26313" />
-                                <FormattedMessage
-                                    id={'orderRow.ReturnItems'}
-                                    defaultMessage={'Return Items'}
-                                />
-                            </div>
+                            <>
+                                <span className="bg-white border border-blue-700 bg-white text-blue-700 hover:bg-blue-50 hover:text-blue-700 hover:border-blue-700 rounded-full px-[30px] py-[8px] text-[13px] font-medium text-white transition-all duration-300 ease-in-out">
+                                    <FormattedMessage
+                                        id={'orderRow.ReturnItems'}
+                                        defaultMessage={'Return Items'}
+                                    />
+                                </span>
+                                {/* <div
+                                    className={cn(
+                                        "cursor-pointer ",
+                                        "rounded-full px-[10px] py-[3px] text-[13px] font-medium transition-all duration-300 ease-in-out flex items-center gap-2"
+                                    )}
+                                    onClick={handleNewReturn}
+                                    title={formatMessage({ id: 'orderRow.returnProduct', defaultMessage: 'Return Product' })}
+                                >
+                                    <ConvertCard size={20} color="#f26313" />
+                                    <FormattedMessage
+                                        id={'orderRow.ReturnItems'}
+                                        defaultMessage={'Return Items'}
+                                    />
+                                </div> */}
+                            </>
                         )}
                     </div>
                 </div>

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/modalFormReview.js

@@ -9,17 +9,17 @@ import StarRating from './starInput';
 
 import { primary900 } from '@riosst100/pwa-marketplace/src/theme/vars';
 
-const modalFormReview = (props) => {
-    const { open, setOpen, ratingsMetadata = [], loadingRatingsMetadata, onSubmit, submitting, defaultNickname } = props;
+const ModalFormReview = (props) => {
+    const { reviewOrder, setReviewOrder, ratingsMetadata = [], loadingRatingsMetadata, onSubmit, submitting, defaultNickname } = props;
 
     const [formState, setFormState] = useState({ nickname: defaultNickname || '' });
 
     useEffect(() => {
-        if (open && defaultNickname && !formState.nickname) {
+        if (reviewOrder && defaultNickname && !formState.nickname) {
             setFormState(prev => ({ ...prev, nickname: defaultNickname }));
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [open, defaultNickname]);
+    }, [reviewOrder, defaultNickname]);
 
     // ratings: [{ id, value_id }]
     const [ratings, setRatings] = useState([]);
@@ -45,7 +45,7 @@ const modalFormReview = (props) => {
     return (
         <>
             <Modal
-                open={open}
+                reviewOrder={reviewOrder}
                 className="modal_form_review !p-[30px] md_min-w-[650px]"
             >
                 <div className='form_review-container'>
@@ -53,7 +53,7 @@ const modalFormReview = (props) => {
                         <div className='text-lg text-black font-medium'>
                             Write Review
                         </div>
-                        <button onClick={() => { setOpen(!open) }} >
+                        <button onClick={() => { setReviewOrder(!reviewOrder) }} >
                             <X size={24} color={primary900} />
                         </button>
                     </div>
@@ -145,7 +145,7 @@ const modalFormReview = (props) => {
                                 classes={{
                                     content: 'capitalize text-[16px] font-medium'
                                 }}
-                                onClick={() => setOpen(false)}
+                                onClick={() => setReviewOrder(false)}
                                 type="button"
                             >
                                 Cancel
@@ -168,4 +168,4 @@ const modalFormReview = (props) => {
     );
 };
 
-export default modalFormReview;
+export default ModalFormReview;

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>
         </>
     ) : ''