@riosst100/pwa-marketplace 2.9.3 → 2.9.5

package/i18n/en_US.json

@@ -333,6 +333,7 @@
     "orderRow.processingText": "Processing",
     "orderRow.readyToShipText": "Ready to ship",
     "orderRow.shippedText": "Shipped",
+    "orderRow.ViewTransactionDetails": "View Order Details",
     "Our Story": "Our Story",
     "pagination.firstPage": "move to the first page",
     "pagination.lastPage": "move to the last page",

package/i18n/id_ID.json

@@ -334,6 +334,7 @@
     "orderRow.processingText": "Processing",
     "orderRow.readyToShipText": "Ready to ship",
     "orderRow.shippedText": "Shipped",
+    "orderRow.ViewTransactionDetails": "Lihat Detail Order",
     "Our Story": "Our Story",
     "pagination.firstPage": "move to the first page",
     "pagination.lastPage": "move to the last page",

package/package.json

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

package/src/componentOverrideMapping.js

@@ -84,5 +84,6 @@ module.exports = componentOverrideMapping = {
     [`@magento/peregrine/lib/talons/MagentoRoute/useMagentoRoute.js`]: '@riosst100/pwa-marketplace/src/overwrites/peregrine/lib/talons/MagentoRoute/useMagentoRoute.js',
     [`@magento/peregrine/lib/talons/ProductOptions/useOption.js`]: '@riosst100/pwa-marketplace/src/overwrites/peregrine/lib/talons/ProductOptions/useOption.js',
     [`@magento/peregrine/lib/talons/ProductOptions/useTile.js`]: '@riosst100/pwa-marketplace/src/overwrites/peregrine/lib/talons/ProductOptions/useTile.js',
-    [`@magento/peregrine/lib/talons/ProductImageCarousel/useProductImageCarousel.js`]: '@riosst100/pwa-marketplace/src/overwrites/peregrine/lib/talons/ProductImageCarousel/useProductImageCarousel.js'
+    [`@magento/peregrine/lib/talons/ProductImageCarousel/useProductImageCarousel.js`]: '@riosst100/pwa-marketplace/src/overwrites/peregrine/lib/talons/ProductImageCarousel/useProductImageCarousel.js',
+    [`@magento/peregrine/lib/talons/OrderHistoryPage/orderHistoryPage.gql.js`]: '@riosst100/pwa-marketplace/src/overwrites/peregrine/lib/talons/OrderHistoryPage/orderHistoryPage.gql.js'
 };

package/src/components/ConfirmEmailPage/confirmEmail.js

@@ -0,0 +1,76 @@
+import React, { useMemo, useEffect } from 'react';
+import { FormattedMessage } from 'react-intl';
+import { useStyle } from '@magento/venia-ui/lib/classify';
+import defaultClasses from './confirmEmail.module.css';
+import { useHistory, Link } from 'react-router-dom';
+import { useConfirmEmailPage } from '@riosst100/pwa-marketplace/src/talons/ConfirmEmailPage/useConfirmEmailPage';
+
+const ConfirmEmailPage = props => {
+    const classes = useStyle(defaultClasses, props.classes);
+
+    const { location } = globalThis;
+
+    const query = new URLSearchParams(location.search);
+    const key = query.get('key') || null;
+    const id = query.get('id') || null;
+
+    const { handleConfirmEmail, shouldShowLoadingIndicator, isSuccess } = useConfirmEmailPage({ id, key });
+    
+    useEffect(() => {
+        handleConfirmEmail();
+    }, [handleConfirmEmail]);
+
+    return (
+        <div className={classes.root}>
+            <div className={classes.card}>
+                {shouldShowLoadingIndicator ? <><h2 className={classes.title}>
+                    <FormattedMessage
+                        id={'verifyEmail.titleVerified'}
+                        defaultMessage={'Confirming Your Email Address'}
+                    />
+                </h2>
+                <p className={classes.subtitle}>
+                    <FormattedMessage
+                        id={'verifyEmail.canSignIn'}
+                        defaultMessage={'Please wait a moment while we verify your email address. This may take a few seconds.'}
+                    />
+                </p>
+                <br /></> : (isSuccess ? <><h2 className={classes.title}>
+                    <FormattedMessage
+                        id={'verifyEmail.titleVerified'}
+                        defaultMessage={'Your email has been verified'}
+                    />
+                </h2>
+                <p className={classes.subtitle}>
+                    <FormattedMessage
+                        id={'verifyEmail.canSignIn'}
+                        defaultMessage={'You can now Sign In with your account'}
+                    />
+                </p>
+                <br />
+                <Link
+                    className={classes.resendButton}
+                    to={'/sign-in'}
+                >
+                    <FormattedMessage
+                        id={'verifyEmail.signInButton'}
+                        defaultMessage={'Sign In'}
+                    />
+                </Link></> : <><h2 className={classes.title}>
+                    <FormattedMessage
+                        id={'verifyEmail.titleExpired'}
+                        defaultMessage={'Email Confirmation Failed'}
+                    />
+                </h2>
+                <p className={classes.subtitle}>
+                    <FormattedMessage
+                        id={'verifyEmail.notValid'}
+                        defaultMessage={'The email verification link has expired or is no longer valid.'}
+                    />
+                </p></>)}
+            </div>
+        </div>
+    )
+};
+
+export default ConfirmEmailPage;

package/src/components/ConfirmEmailPage/confirmEmail.module.css

@@ -0,0 +1,71 @@
+.root {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    min-height: 80vh;
+    background: #f8f9fa;
+    font-family: inherit;
+}
+
+.card {
+    background: #fff;
+    border-radius: 8px;
+    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
+    padding: 32px 40px;
+    max-width: 700px;
+    width: 100%;
+    text-align: center;
+}
+
+.title {
+    margin-bottom: 16px;
+    color: #222;
+    font-size: 1.5rem;
+    font-weight: 600;
+}
+
+.subtitle {
+    margin-bottom: 8px;
+    color: #555;
+    font-size: 1rem;
+}
+
+.email {
+    font-weight: bold;
+    color: #eb5202;
+}
+
+.instructions {
+    margin-bottom: 16px;
+    color: #555;
+    font-size: 1rem;
+}
+
+.resendButton {
+    background: #eb5202;
+    color: #fff;
+    border: none;
+    border-radius: 4px;
+    padding: 10px 24px;
+    font-size: 16px;
+    cursor: pointer;
+    margin-bottom: 12px;
+}
+.resendButton:hover {
+    background: #ba4000;
+    border-color: #b84002;
+    box-shadow: 0 0 0 1px #b84002;
+    color: #fff;
+    text-decoration: none;
+
+}
+.contactHelp {
+    margin-top: 8px;
+    font-size: 14px;
+}
+
+.contactLink {
+    color: #eb5202;
+    text-decoration: underline;
+}

package/src/components/ConfirmEmailPage/index.js

@@ -0,0 +1 @@
+export { default } from './confirmEmail';

package/src/components/FavoriteSellerPage/favoriteSeller.js

@@ -6,7 +6,6 @@ import useFavoriteSellerList from '@riosst100/pwa-marketplace/src/talons/Favorit
 import defaultClasses from '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/RootComponents/Category/category.module.css';
 import { useStyle } from '@magento/venia-ui/lib/classify';
 import Pagination from '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/components/Pagination';
-// import Pagination from 'riosst100/pwa-marketplace/src/components/CustomPagination';
 import React, { Fragment, Suspense, useMemo, useRef } from 'react';
 
 const FavoriteSeller = (props) => {

package/src/components/FavoriteSellerPage/item.js

@@ -23,8 +23,6 @@ const Item = ({ sellerItem, refetchFavoriteSellerList }) => {
     const [, { addToast }] = useToasts();
     const { formatMessage } = useIntl();
 
-    console.log(sellerItem.seller)
-
     const handleRemoveFromFavorite = async () => {
         try {
             await remove([sellerItem.seller.seller_id]);

package/src/components/OrderDetail/components/itemsOrdered.js

@@ -2,127 +2,139 @@ import React from 'react'
 import { useIntl } from 'react-intl';
 import { Link } from 'react-router-dom';
 
-const itemsOrdered = () => {
+const ItemsOrdered = ({ order }) => {
     const { formatMessage } = useIntl();
+    const items = order?.items || [];
+    const currency = order?.total?.grand_total?.currency || '-';
+    const subtotal = order?.total?.subtotal?.value || 0;
+    const shipping = order?.total?.total_shipping?.value || 0;
+    const tax = order?.total?.total_tax?.value || 0;
+    const grandTotal = order?.total?.grand_total?.value || 0;
 
     return (
         <>
             <div className='rounded-md border border-gray-100 pb-4'>
-                <div class="hidden md_block table-wrapper order-items w-full">
-                    <table class="data table table-order-items w-full" id="my-orders-table" summary="Items Ordered">
+                <div className="hidden md_block table-wrapper order-items w-full">
+                    <table className="data table table-order-items w-full" id="my-orders-table" summary="Items Ordered">
                         <thead>
                             <tr className='bg-gray-150'>
-                                <th class="col name text-left py-3 px-2.5 rounded-tl-md">Product Name</th>
-                                <th class="col sku text-left py-3 px-2.5">SKU</th>
-                                <th class="col price text-right py-3 px-2.5">Price</th>
-                                <th class="col qty text-right py-3 px-2.5">Qty</th>
-                                <th class="col subtotal text-right py-3 px-2.5 rounded-tr-md">Subtotal</th>
+                                <th className="col name text-left py-3 px-2.5 rounded-tl-md">Product Name</th>
+                                <th className="col sku text-left py-3 px-2.5">SKU</th>
+                                <th className="col price text-right py-3 px-2.5">Price</th>
+                                <th className="col qty text-right py-3 px-2.5">Qty</th>
+                                <th className="col subtotal text-right py-3 px-2.5 rounded-tr-md">Subtotal</th>
                             </tr>
                         </thead>
                         <tbody>
-                            <tr id="order-item-row-1" className='border-b border-gray-150'>
-                                <td class="col name text-left align-top py-3 px-2.5" data-th="Product Name">
-                                    <strong class="product name product-item-name">Iris Workout Top</strong>
-                                    <dl class="item-options">
-                                        <dt>Size</dt>
-                                        <dd>
-                                            XS
-                                        </dd>
-                                        <dt>Color</dt>
-                                        <dd>
-                                            Red
-                                        </dd>
-                                    </dl>
-                                </td>
-                                <td class="col sku align-top py-3 px-2.5" data-th="SKU">
-                                    WS03-XS-Red
-                                </td>
-                                <td class="col price text-right align-top py-3 px-2.5" data-th="Price">
-                                    <span class="price-including-tax" data-label="Incl. Tax">
-                                        <span class="cart-price">
-                                            <span class="price">$31.39</span> </span>
-                                    </span>
-                                </td>
-                                <td class="col qty text-right align-top py-3 px-2.5" data-th="Qty">
-                                    <ul class="items-qty">
-                                        <li class="item">
-                                            <span class="content">
-                                                1
+                            {items.map((item, idx) => (
+                                <tr key={item.id || idx} className='border-b border-gray-150'>
+                                    <td className="col name text-left align-top py-3 px-2.5" data-th="Product Name">
+                                        <strong className="product name product-item-name">{item.product_name}</strong>
+                                        {item.selected_options && item.selected_options.length > 0 && (
+                                            <dl className="item-options">
+                                                {item.selected_options.map((opt, i) => (
+                                                    <React.Fragment key={i}>
+                                                        <dt>{opt.label}</dt>
+                                                        <dd>{opt.value}</dd>
+                                                    </React.Fragment>
+                                                ))}
+                                            </dl>
+                                        )}
+                                    </td>
+                                    <td className="col sku align-top py-3 px-2.5" data-th="SKU">
+                                        {item.product_sku}
+                                    </td>
+                                    <td className="col price text-right align-top py-3 px-2.5" data-th="Price">
+                                        <span className="price-including-tax" data-label="Incl. Tax">
+                                            <span className="cart-price">
+                                                <span className="price">{currency} {item.product_sale_price?.value?.toFixed(2)}</span>
                                             </span>
-                                        </li>
-                                    </ul>
-                                </td>
-                                <td class="col subtotal text-right align-top py-3 px-2.5" data-th="Subtotal">
-                                    <span class="price-including-tax" data-label="Incl. Tax">
-                                        <span class="cart-price">
-                                            <span class="price">$31.39</span> </span>
-                                    </span>
-                                </td>
-                            </tr>
+                                        </span>
+                                    </td>
+                                    <td className="col qty text-right align-top py-3 px-2.5" data-th="Qty">
+                                        <ul className="items-qty">
+                                            <li className="item">
+                                                <span className="content">
+                                                    {item.quantity_ordered}
+                                                </span>
+                                            </li>
+                                        </ul>
+                                    </td>
+                                    <td className="col subtotal text-right align-top py-3 px-2.5" data-th="Subtotal">
+                                        <span className="price-including-tax" data-label="Incl. Tax">
+                                            <span className="cart-price">
+                                                <span className="price">{currency} {(item.product_sale_price?.value * item.quantity_ordered).toFixed(2)}</span>
+                                            </span>
+                                        </span>
+                                    </td>
+                                </tr>
+                            ))}
                         </tbody>
                         <tfoot className='text-right'>
-                            <tr class="subtotal">
-                                <th colspan="4" class="mark py-1 px-2.5 pt-2.5" scope="row">
+                            <tr className="subtotal">
+                                <th colSpan="4" className="mark py-1 px-2.5 pt-2.5" scope="row">
                                     Subtotal
                                 </th>
-                                <td class="amount py-1 px-2.5 pt-2.5" data-th="Subtotal">
-                                    <span class="price">$31.39</span>
+                                <td className="amount py-1 px-2.5 pt-2.5" data-th="Subtotal">
+                                    <span className="price">{currency} {subtotal.toFixed(2)}</span>
                                 </td>
                             </tr>
-                            <tr class="shipping">
-                                <th colspan="4" class="mark py-1 px-2.5" scope="row">
+                            <tr className="shipping">
+                                <th colSpan="4" className="mark py-1 px-2.5" scope="row">
                                     Shipping &amp; Handling
                                 </th>
-                                <td class="amount py-1 px-2.5" data-th="Shipping &amp; Handling">
-                                    <span class="price">$5.00</span>
+                                <td className="amount py-1 px-2.5" data-th="Shipping &amp; Handling">
+                                    <span className="price">{currency} {shipping.toFixed(2)}</span>
                                 </td>
                             </tr>
-                            <tr class="totals-tax">
-                                <th colspan="4" class="mark py-1 px-2.5" scope="row">
+                            <tr className="totals-tax">
+                                <th colSpan="4" className="mark py-1 px-2.5" scope="row">
                                     Tax
                                 </th>
-                                <td class="amount py-1 px-2.5" data-th="Tax">
-                                    <span class="price">$2.39</span>
+                                <td className="amount py-1 px-2.5" data-th="Tax">
+                                    <span className="price">{currency} {tax.toFixed(2)}</span>
                                 </td>
                             </tr>
-                            <tr class="grand_total">
-                                <th colspan="4" class="mark py-1 px-2.5" scope="row">
+                            <tr className="grand_total">
+                                <th colSpan="4" className="mark py-1 px-2.5" scope="row">
                                     <strong>Grand Total</strong>
                                 </th>
-                                <td class="amount py-1 px-2.5" data-th="Grand Total">
-                                    <strong><span class="price">$36.39</span></strong>
+                                <td className="amount py-1 px-2.5" data-th="Grand Total">
+                                    <strong><span className="price">{currency} {grandTotal.toFixed(2)}</span></strong>
                                 </td>
                             </tr>
                         </tfoot>
                     </table>
                 </div>
                 <div className='md_hidden'>
-                    <div class="orderDetails-orderTotalContainer-6or m-0 max-w-none min-w-none lg_m-auto lg_max-w-[25rem] lg_min-w-[22rem]">
+                    <div className="orderDetails-orderTotalContainer-6or m-0 max-w-none min-w-none lg_m-auto lg_max-w-[25rem] lg_min-w-[22rem]">
                         <div className='product-list p-4'>
-                            <div className='order-item flex flex-col gap-2 pb-4 border-b border-gray-150 even_pt-2'>
-                                <Link to="/">
-                                    <span>
-                                        STAR WARS The Vintage Collection Luke Skywalker (Jedi Academy), The Book of Boba Fett 3.75-Inch Collectible Action Figures, Ages 4 and Up
-                                    </span>
-                                </Link>
-                                <div className='flex gap-2'>
-                                    <span className='font-semibold'>
-                                        1 X SGD 15.76
-                                    </span>
+                            {items.map((item, idx) => (
+                                <div key={item.id || idx} className='order-item flex flex-col gap-2 pb-4 border-b border-gray-150 even_pt-2'>
+                                    <Link to={"/product/" + item.product_sku}>
+                                        <span>
+                                            {item.product_name}
+                                        </span>
+                                    </Link>
+                                    <div className='flex gap-2'>
+                                        <span className='font-semibold'>
+                                            {item.quantity_ordered} X {currency} {item.product_sale_price?.value?.toFixed(2)}
+                                        </span>
+                                    </div>
                                 </div>
-                            </div>
+                            ))}
                         </div>
-                        <div class="p-4 pt-0 border-0 gap-xs grid py-xs rounded-none lg_border lg_border-solid lg_border-gray-100 lg_p-xs lg_rounded-md">
-                            <div class="orderTotal-subTotal-Eyf gap-xs grid grid-cols-autoLast"><span>Subtotal</span><span><span>SGD</span><span>&nbsp;</span><span>15</span><span>.</span><span>76</span></span></div>
-                            <div class="orderTotal-tax-DF0 gap-xs grid grid-cols-autoLast"><span>Tax</span><span><span>SGD</span><span>&nbsp;</span><span>0</span><span>.</span><span>00</span></span></div>
-                            <div class="orderTotal-shipping-dXC gap-xs grid grid-cols-autoLast"><span>Shipping</span><span><span>SGD</span><span>&nbsp;</span><span>5</span><span>.</span><span>00</span></span></div>
-                            <div class="orderTotal-total-s5t font-bold gap-xs grid grid-cols-autoLast"><span>Total</span><span><span>SGD</span><span>&nbsp;</span><span>20</span><span>.</span><span>76</span></span></div>
+                        <div className="p-4 pt-0 border-0 gap-xs grid py-xs rounded-none lg_border lg_border-solid lg_border-gray-100 lg_p-xs lg_rounded-md">
+                            <div className="orderTotal-subTotal-Eyf gap-xs grid grid-cols-autoLast"><span>Subtotal</span><span>{currency} {subtotal.toFixed(2)}</span></div>
+                            <div className="orderTotal-tax-DF0 gap-xs grid grid-cols-autoLast"><span>Tax</span><span>{currency} {tax.toFixed(2)}</span></div>
+                            <div className="orderTotal-shipping-dXC gap-xs grid grid-cols-autoLast"><span>Shipping</span><span>{currency} {shipping.toFixed(2)}</span></div>
+                            <div className="orderTotal-total-s5t font-bold gap-xs grid grid-cols-autoLast"><span>Total</span><span>{currency} {grandTotal.toFixed(2)}</span></div>
                         </div>
                     </div>
                 </div>
             </div>
         </>
-    )
-}
+    );
+};
 
-export default itemsOrdered
+export default ItemsOrdered;