@riosst100/pwa-marketplace 2.0.8 → 2.1.0

package/package.json

@@ -1,22 +1,18 @@
-{
-  "name": "@riosst100/pwa-marketplace",
-  "author": "riosst100@gmail.com",
-  "version": "2.0.8",
-  "main": "src/index.js",
-  "pwa-studio": {
-    "targets": {
-      "intercept": "src/intercept.js"
-    }
-  },
-  "dependencies": {
-    "axios": "^1.6.5",
-    "iconsax-react": "^0.0.8",
-    "react-countdown": "^2.3.5",
-    "react-datepicker": "4.10.0",
-    "react-dropzone": "^14.2.3",
-    "react-phone-number-input": "^3.3.9",
-    "react-slick": "^0.30.2"
-  },
-  "license": "MIT",
-  "private": false
-}
+{
+  "name": "@riosst100/pwa-marketplace",
+  "author": "riosst100@gmail.com",
+  "version": "2.1.0",
+  "main": "src/index.js",
+  "pwa-studio": {
+    "targets": {
+      "intercept": "src/intercept.js"
+    }
+  },
+  "dependencies": {
+    "axios": "^1.6.5",
+    "iconsax-react": "^0.0.8",
+    "react-phone-number-input": "^3.3.9"
+  },
+  "license": "MIT",
+  "private": false
+}

package/src/componentOverrideMapping.js

@@ -64,4 +64,5 @@ module.exports = componentOverrideMapping = {
     [`@magento/venia-ui/lib/components/Dialog/index.js`]: '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/components/Dialog/index.js',
     [`@magento/venia-ui/lib/components/OrderHistoryPage/index.js`]: '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/components/OrderHistoryPage/index.js',
     [`@magento/venia-ui/lib/components/TextArea/index.js`]: '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/components/TextArea/index.js',
+    [`@magento/venia-ui/lib/components/WishlistPage/index.js`]: '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/components/WishlistPage/index.js',
 };

package/src/components/AccountLayout/index.js

@@ -105,6 +105,21 @@ const AccountLayout = (props) => {
 
                             </Link>
                         </li>
+                        <li className="list-none">
+                            <Link
+                                to="/return"
+                                className={cn(
+                                    "text-[14px] font-medium p-2.5 block w-full hover_bg-gray-150 rounded-md",
+                                    activeMenu === '/return' ? 'bg-gray-150' : ''
+                                )}
+                            >
+                                <FormattedMessage
+                                    id={'myaccount.return'}
+                                    defaultMessage={'Return Request'}
+                                />
+
+                            </Link>
+                        </li>
                         <li className="list-none">
                             <Link
                                 to="/favorite-seller"

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

@@ -0,0 +1,128 @@
+import React from 'react'
+import { useIntl } from 'react-intl';
+import { Link } from 'react-router-dom';
+
+const itemsOrdered = () => {
+    const { formatMessage } = useIntl();
+
+    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">
+                        <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>
+                            </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
+                                            </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>
+                        </tbody>
+                        <tfoot className='text-right'>
+                            <tr class="subtotal">
+                                <th colspan="4" class="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>
+                            </tr>
+                            <tr class="shipping">
+                                <th colspan="4" class="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>
+                            </tr>
+                            <tr class="totals-tax">
+                                <th colspan="4" class="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>
+                            </tr>
+                            <tr class="grand_total">
+                                <th colspan="4" class="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>
+                            </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='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>
+                                </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>
+                    </div>
+                </div>
+            </div>
+        </>
+    )
+}
+
+export default itemsOrdered

package/src/components/OrderDetail/components/rmaList.js

@@ -0,0 +1,114 @@
+import React from 'react'
+import { useIntl } from 'react-intl';
+import { Link } from 'react-router-dom';
+
+const rmaList = () => {
+    const { formatMessage } = useIntl();
+
+    return (
+        <>
+            <div className='rounded-md border border-gray-100'>
+                <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">
+                        <thead>
+                            <tr className='bg-gray-150'>
+                                <th class="col text-left py-3 px-2.5 rounded-tl-md">RMA</th>
+                                <th class="col text-left py-3 px-2.5">Date</th>
+                                <th class="col text-left py-3 px-2.5">Order</th>
+                                <th class="col text-left py-3 px-2.5">Status</th>
+                                <th class="col text-left py-3 px-2.5 rounded-tr-md">Action</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            <tr id="order-item-row-1" className='border-b border-gray-150 last-of-type_border-0'>
+                                <td class="col rma text-left align-top py-3 px-2.5" data-th="Product Name">
+                                    <span className='font-semibold'>
+                                        3000000011-2
+                                    </span>
+                                </td>
+                                <td class="col date align-top py-3 px-2.5" data-th="SKU">
+                                    <span className='font-normal'>
+                                        Jun 29, 2024
+                                    </span>
+                                </td>
+                                <td class="col order text-left align-top py-3 px-2.5" data-th="Price">
+                                    <Link to={'/order/123123'} className="underline">
+                                        3000000011
+                                    </Link>
+                                </td>
+                                <td class="col qty text-left align-top py-3 px-2.5" data-th="Qty">
+                                    <p className='p-1 bg-[#F1EFF6] rounded-md flex items-center px-5 w-fit'>
+                                        <span className='font-medium block text-blue-700'>
+                                            Pending Approval
+                                        </span>
+                                    </p>
+                                </td>
+                                <td class="col subtotal text-left align-top py-3 px-2.5" data-th="Subtotal">
+                                    <Link to={'/return/123123'} className="underline">
+                                        View Return
+                                    </Link>
+                                </td>
+                            </tr>
+                        </tbody>
+                    </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='item flex flex-col gap-2 p-4 odd_border border-gray-150 last-of-type_border-0'>
+                            <div className='flex gap-3'>
+                                <div className='min-w-[60px] text-[14px] font-semibold'>
+                                    RMA
+                                </div>
+                                <div className='min-w-[60px] text-[14px]'>
+                                    3000000011-2
+                                </div>
+                            </div>
+                            <div className='flex gap-3'>
+                                <div className='min-w-[60px] text-[14px] font-semibold'>
+                                    Date
+                                </div>
+                                <div className='min-w-[60px] text-[14px]'>
+                                    Jun 29, 2024
+                                </div>
+                            </div>
+                            <div className='flex gap-3'>
+                                <div className='min-w-[60px] text-[14px] font-semibold'>
+                                    Order
+                                </div>
+                                <div className='min-w-[60px] text-[14px]'>
+                                    <Link to={'/order-history/view/123123'} className="underline">
+                                        3000000011
+                                    </Link>
+                                </div>
+                            </div>
+                            <div className='flex gap-3'>
+                                <div className='min-w-[60px] text-[14px] font-semibold self-center'>
+                                    Status
+                                </div>
+                                <div className='min-w-[60px] text-[14px]'>
+                                    <p className='p-1 bg-[#F1EFF6] rounded-md flex items-center px-5 w-fit'>
+                                        <span className='font-medium block text-blue-700'>
+                                            Pending Approval
+                                        </span>
+                                    </p>
+                                </div>
+                            </div>
+                            <div className='flex gap-3'>
+                                <div className='min-w-[60px] text-[14px] font-semibold self-center'>
+                                    Action
+                                </div>
+                                <div className='min-w-[60px] text-[14px]'>
+                                    <Link to={'/return/view/123123'} className="underline">
+                                        View Return
+                                    </Link>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </>
+    )
+}
+
+export default rmaList

package/src/components/OrderDetail/orderDetail.js

@@ -0,0 +1,204 @@
+import React from 'react';
+import { useIntl } from 'react-intl';
+import { StoreTitle } from '@magento/venia-ui/lib/components/Head';
+import Button from '@magento/venia-ui/lib/components/Button';
+import cn from 'classnames';
+import { Printer } from 'iconsax-react';
+// import Tabs from '@riosst100/pwa-marketplace/src/components/commons/Tabs';
+import ItemsOrdered from './components/itemsOrdered';
+import RMAList from './components/rmaList';
+
+const OrderDetail = () => {
+    const { formatMessage } = useIntl();
+    const PAGE_TITLE = formatMessage({
+        id: 'Quotes.pageTitleTextRMADetail',
+        defaultMessage: 'Order Detail'
+    });
+
+    // const dataTabs =
+    //     [
+    //         {
+    //             id: 'items-ordered',
+    //             title: 'Items Ordered',
+    //             content: <ItemsOrdered />
+    //         },
+    //         {
+    //             id: 'invoices',
+    //             title: 'Invoices',
+    //             content: <><h2>invoices</h2></>
+    //         },
+    //         {
+    //             id: 'order-shipments',
+    //             title: 'Order Shipments',
+    //             content: <><h2>Order shipments</h2></>
+    //         }
+    //     ];
+
+    return (
+        <div className='relative grid gap-y-md'>
+            <StoreTitle>{PAGE_TITLE}</StoreTitle>
+            <div aria-live="polite" className="text-xl font-medium text-left">
+                {PAGE_TITLE} - DEV123123123
+            </div>
+            <div className='block relative'>
+                <div className='flex gap-2 mb-4 flex-col'>
+                    <div class="box box-order-shipping-method flex gap-4">
+                        <p class="box-title block min-w-[90px] font-semibold text-[14px]">
+                            <span>Invoice</span>
+                        </p>
+                        <div class="box-content text-[14px]">
+                            INV/20240705/MPL/4007072581
+                        </div>
+                    </div>
+                    <div class="box box-order-shipping-method flex gap-4 text-[14px]">
+                        <p class="box-title block min-w-[90px] font-semibold">
+                            <span>Order Date</span>
+                        </p>
+                        <div class="box-content text-[14px]">
+                            February 23, 2024
+                        </div>
+                    </div>
+                    <div class="box box-order-shipping-method flex gap-4 text-[14px]">
+                        <p class="box-title block min-w-[90px] font-semibold self-center">
+                            <span>Status</span>
+                        </p>
+                        <div class="box-content text-[14px]">
+                            <div className='p-1 bg-[#F1EFF6] rounded-md flex items-center px-5'>
+                                <p className='text-[14px] text-blue-700 flex justify-between'>
+                                    <span className='font-medium block text-blue-700'>
+                                        Processing
+                                    </span>
+                                </p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div className='flex flex-col md_flex-row gap-x-4 justify-end'>
+                    <Button
+                        priority='high'
+                        classes={{
+                            content: "flex justify-center gap-x-2.5 items-center text-[14px] font-medium capitalize"
+                        }}
+                        className={cn(
+                            "bg-white px-6 py-2 rounded-md text-gray-900 hover_!text-white border border-solid",
+                            "border-gray-900 focus-visible_outline-none hover_bg-gray-900 min-h-[40px]"
+                        )}
+                    >
+                        <span className='flex gap-x-3 justify-center group-hover_!text-white'>
+                            <Printer
+                                size="24"
+                                className=''
+                            />
+                            {
+                                formatMessage({
+                                    id: 'order.PrintInvoices',
+                                    defaultMessage: 'Print Invoices'
+                                })
+                            }
+                        </span>
+                    </Button>
+                </div>
+            </div>
+
+            {/* <Tabs
+                data={dataTabs}
+                tabContentWrapperClassName='!p-0'
+                hasContent
+                tabWrapperClassName='xl_gap-x-[60px]'
+                rootClassName="mb-0"
+            /> */}
+            <div class="block block-order-details-view">
+                <div aria-live="polite" className="text-lg font-medium text-left mb-4 block-title">
+                    {
+                        formatMessage({
+                            id: 'order.productInfomarion',
+                            defaultMessage: 'Product Information'
+                        })
+                    }
+                </div>
+
+                <ItemsOrdered />
+            </div>
+
+            <div class="block block-order-details-view">
+                <div aria-live="polite" className="text-lg font-medium text-left mb-4 block-title">
+                    {
+                        formatMessage({
+                            id: 'order.rmaInformation',
+                            defaultMessage: 'RMA Information'
+                        })
+                    }
+                </div>
+
+                <RMAList />
+            </div>
+
+            <div class="block block-order-details-view">
+                <div aria-live="polite" className="text-lg font-medium text-left mb-4 block-title">
+                    {
+                        formatMessage({
+                            id: 'order.OrderInformation',
+                            defaultMessage: 'Order Information'
+                        })
+                    }
+                </div>
+                <div class="block-content flex flex-col gap-y-4 rounded-md border border-gray-100 px-4 py-6 justify-between gap-x-10">
+                    <div class="box box-order-shipping-method flex gap-4">
+                        <strong class="box-title block min-w-[140px]">
+                            <span>Shipping Method</span>
+                        </strong>
+                        <div class="box-content">
+                            Flat Rate - Fixed
+                        </div>
+                    </div>
+                    <div class="box box-order-shipping-method flex gap-4">
+                        <strong class="box-title block min-w-[140px]">
+                            <span>Tracking Number</span>
+                        </strong>
+                        <div class="box-content">
+                            TX8971239123
+                        </div>
+                    </div>
+                    <div class="box box-order-shipping-address flex gap-4">
+                        <strong class="box-title block min-w-[140px]"><span>Shipping Address</span></strong>
+                        <div class="box-content">
+                            <div className=' whitespace-pre-wrap'>
+                                Veronica Costello{'\n'}
+                                6146 Honey Bluff Parkway{'\n'}
+                                Calder, Michigan, 49628-7978{'\n'}
+                                United States{'\n'}
+                                T: <a href="tel:(555) 229-3326">(555) 229-3326</a>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="box box-order-billing-method flex gap-4">
+                        <strong class="box-title block min-w-[140px]">
+                            <span>Payment Method</span>
+                        </strong>
+                        <div class="box-content">
+                            <dl class="payment-method checkmemo">
+                                <dt class="title">Check / Money order</dt>
+                            </dl>
+                        </div>
+                    </div>
+                    <div class="box box-order-billing-address flex gap-4">
+                        <strong class="box-title block min-w-[140px]">
+                            <span>Billing Address</span>
+                        </strong>
+                        <div class="box-content">
+                            <div className='whitespace-pre-wrap'>
+                                Veronica Costello{'\n'}
+                                6146 Honey Bluff Parkway{'\n'}
+                                Calder, Michigan, 49628-7978{'\n'}
+                                United States{'\n'}
+                                T: <a href="tel:(555) 229-3326">(555) 229-3326</a>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    )
+}
+
+export default OrderDetail;

package/src/components/OrderDetail/orderDetailPage.js

@@ -0,0 +1,14 @@
+import AccountLayout from '@riosst100/pwa-marketplace/src/components/AccountLayout';
+import OrderDetail from '@riosst100/pwa-marketplace/src/components/OrderDetail/orderDetail';
+
+import React from 'react'
+
+const index = () => {
+    return (
+        <AccountLayout>
+            <OrderDetail />
+        </AccountLayout>
+    )
+}
+
+export default index;