@riosst100/pwa-marketplace 2.0.9 → 2.1.1

package/src/components/NonSportCardsSets/nonSportCardsSets.module.css

@@ -0,0 +1,76 @@
+.nav {
+    composes: flex from global;
+    composes: flex-wrap from global;
+    margin: 50px 0 30px 0;
+    composes: gap-[10px] from global;
+}
+
+.nav_item {
+    composes: px-4 from global;
+    composes: py-2 from global;
+    composes: transition-colors from global;
+    composes: duration-150 from global;
+    composes: border from global;
+    composes: border-solid from global;
+    composes: leading-normal from global;
+    composes: text-base from global;
+    composes: text-colorDefault from global;
+    composes: bg-white from global;
+    composes: border-gray-100 from global;
+    border-radius: 5px;
+}
+
+.toolbar {
+    composes: relative from global;
+    composes: ml-2xs from global;
+    display: flex;
+    justify-content: space-between;
+    margin-top: 20px;
+}
+
+.tabs {
+    composes: flex from global;
+    composes: flex-wrap from global;
+    composes: mt-3 from global;
+    composes: gap-[15px] from global;
+    margin-bottom: 30px;
+}
+
+.tabs_item {
+    composes: px-4 from global;
+    composes: py-2 from global;
+    composes: transition-colors from global;
+    composes: duration-150 from global;
+    composes: border from global;
+    composes: border-solid from global;
+    composes: leading-normal from global;
+    composes: text-base from global;
+    composes: text-colorDefault from global;
+    composes: bg-white from global;
+    composes: border-gray-100 from global;
+    border-radius: 5px;
+}
+
+.singlesWrapper {
+    column-count: 1;
+    display: flex;
+    width: 100%;
+    flex-wrap: wrap;
+    flex-direction: row;
+}
+
+.singlesGroupWrapper {
+    width: 100%;
+}
+
+@media screen and (min-width: 768px) {
+    .singlesGroupWrapper {
+        width: 50%;
+    }
+}
+
+@media screen and (min-width: 1023px) {
+    .singlesGroupWrapper {
+        width: 33.33%;
+    }
+}

package/src/components/NonSportCardsSets/nonSportCardsSets.shimmer.js

@@ -0,0 +1,50 @@
+import React from 'react';
+import { shape, string } from 'prop-types';
+import { useStyle } from '@magento/venia-ui/lib/classify';
+
+import Shimmer from '@magento/venia-ui/lib/components/Shimmer';
+import defaultClasses from './nonSportCardsSets.module.css';
+import cn from 'classnames';
+import Divider from '@riosst100/pwa-marketplace/src/components/Divider';
+
+const NonSportCardsSets = props => {
+    const classes = useStyle(defaultClasses, props.classes);
+
+    return (
+        <>
+            <h1 className='mx-auto relative block text-xl font-bold text-center pt-10 pb-4'><Shimmer width="25%" height="6vh" /></h1>
+            <div className='border border-gray-100 px-6'>
+                <center>
+                    <section className='single_list-indexing-container relative m-auto pt-5'>
+                        <Shimmer width="95%" height="6vh" />
+                    </section>
+                </center>
+                <Divider className="mb-5 px-4" />
+                <section className='singles-container'>
+                    <div className={cn('singles-wrapper block -mx-4', classes.singlesWrapper)}>
+                        <div className='singles_group-wrapper mb-4 px-2 inline-block w-full'>
+                            <div className='singles_item_group_letter text-xl font-medium border-b border-gray-100 pb-1 mb-2' ><Shimmer width="95%" height="100vh" /></div>
+                        </div>
+                        <div className='singles_group-wrapper mb-4 px-2 inline-block w-full'>
+                            <div className='singles_item_group_letter text-xl font-medium border-b border-gray-100 pb-1 mb-2' ><Shimmer width="95%" height="100vh" /></div>
+                        </div>
+                        <div className='singles_group-wrapper mb-4 px-2 inline-block w-full'>
+                            <div className='singles_item_group_letter text-xl font-medium border-b border-gray-100 pb-1 mb-2' ><Shimmer width="95%" height="100vh" /></div>
+                        </div>
+                        <div className='singles_group-wrapper mb-4 px-2 inline-block w-full'>
+                            <div className='singles_item_group_letter text-xl font-medium border-b border-gray-100 pb-1 mb-2' ><Shimmer width="95%" height="100vh" /></div>
+                        </div>
+                        <div className='singles_group-wrapper mb-4 px-2 inline-block w-full'>
+                            <div className='singles_item_group_letter text-xl font-medium border-b border-gray-100 pb-1 mb-2' ><Shimmer width="95%" height="100vh" /></div>
+                        </div>
+                        <div className='singles_group-wrapper mb-4 px-2 inline-block w-full'>
+                            <div className='singles_item_group_letter text-xl font-medium border-b border-gray-100 pb-1 mb-2' ><Shimmer width="95%" height="100vh" /></div>
+                        </div>
+                    </div>
+                </section>
+            </div>
+        </>
+    );
+};
+
+export default NonSportCardsSets;

package/src/components/OperatingHours/operatingHours.js

@@ -10,25 +10,23 @@ const OperatingHours = ({ values }) => {
 
 const Hours = ({ values }) => {
     return values && values.map((value, index) => 
-        <>
+        <span key={index}>
             <tr>
                 <td style={{"verticalAlign":"top"}}>{value.day}</td>
                 <td style={{"paddingLeft":"20px"}}>{value.status == "open" && value.time ? <Time times={value.time} /> : 'Closed'}</td>
             </tr>
             <br />
-        </>
+        </span>
     )
 }
 
 const Time = ({ times }) => {
     return times ? times.map((value, index) => 
-        <>
-            <tr>
-                <td style={{"paddingBottom": times.length > 1 && index != times.length ? "10px" : "0px"}}>
-                    {value.opening_time} - {value.closing_time}
-                </td>
-            </tr>
-        </>
+        <tr key={index}>
+            <td style={{"paddingBottom": times.length > 1 && index != times.length ? "10px" : "0px"}}>
+                {value.opening_time} - {value.closing_time}
+            </td>
+        </tr>
     ) : ''
 }
 

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;