@riosst100/pwa-marketplace 2.0.8 → 2.1.0

package/src/components/RMAPage/index.js

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

package/src/components/RMAPage/orderRow.js

@@ -0,0 +1,318 @@
+import React from 'react';
+import { arrayOf, number, shape, string } from 'prop-types';
+import { ChevronDown, ChevronUp } from 'react-feather';
+import { FormattedMessage, useIntl } from 'react-intl';
+import Price from '@magento/venia-ui/lib/components/Price';
+import { useOrderRow } from '@magento/peregrine/lib/talons/OrderHistoryPage/useOrderRow';
+
+import { useStyle } from '@magento/venia-ui/lib/classify';
+import Icon from '@magento/venia-ui/lib/components/Icon';
+import CollapsedImageGallery from '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/components/OrderHistoryPage/collapsedImageGallery';
+import OrderDetails from '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/components/OrderHistoryPage/OrderDetails';
+import defaultClasses from '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/components/OrderHistoryPage/orderRow.module.css';
+import cn from 'classnames';
+import { Verify } from 'iconsax-react';
+import PlaceholderImage from '@magento/venia-ui/lib/components/Image/placeholderImage';
+import { Link } from 'react-router-dom';
+
+const OrderRow = props => {
+    const { order } = props;
+    const { formatMessage } = useIntl();
+    const {
+        invoices,
+        items,
+        number: orderNumber,
+        order_date: orderDate,
+        shipments,
+        status,
+        total
+    } = order;
+    const { grand_total: grandTotal } = total;
+    const { currency, value: orderTotal } = grandTotal;
+
+    // Convert date to ISO-8601 format so Safari can also parse it
+    const isoFormattedDate = orderDate.replace(' ', 'T');
+    const formattedDate = new Date(isoFormattedDate).toLocaleDateString(
+        undefined,
+        {
+            year: 'numeric',
+            month: 'short',
+            day: 'numeric'
+        }
+    );
+
+    const hasInvoice = !!invoices.length;
+    const hasShipment = !!shipments.length;
+    let derivedStatus;
+    if (status === 'Complete') {
+        derivedStatus = formatMessage({
+            id: 'Quotes.deliveredText',
+            defaultMessage: 'Delivered'
+        });
+    } else if (hasShipment) {
+        derivedStatus = formatMessage({
+            id: 'Quotes.shippedText',
+            defaultMessage: 'Shipped'
+        });
+    } else if (hasInvoice) {
+        derivedStatus = formatMessage({
+            id: 'Quotes.readyToShipText',
+            defaultMessage: 'Ready to ship'
+        });
+    } else {
+        derivedStatus = formatMessage({
+            id: 'Quotes.new',
+            defaultMessage: 'New'
+        });
+    }
+
+    const talonProps = useOrderRow({ items });
+    const { loading, isOpen, imagesData } = talonProps;
+
+    const classes = useStyle(defaultClasses, props.classes);
+
+    const contentClass = isOpen ? classes.content : classes.content_collapsed;
+
+    const contentToggleIconSrc = isOpen ? ChevronUp : ChevronDown;
+
+    const contentToggleIcon = <Icon src={contentToggleIconSrc} size={24} />;
+
+    const collapsedImageGalleryElement = isOpen ? null : (
+        <CollapsedImageGallery items={imagesData} />
+    );
+
+    const orderDetails = loading ? null : (
+        <OrderDetails orderData={order} imagesData={imagesData} />
+    );
+
+    const orderTotalPrice =
+        currency && orderTotal !== null ? (
+            <Price currencyCode={currency} value={orderTotal} />
+        ) : (
+            '-'
+        );
+
+    const badgeStatusStyle = () => {
+        return 'bg-[#F1EFF6] text-blue-700 text-[14px] font-semibold rounded-full px-[30px] py-[5px] border-none';
+    }
+
+    const thumbnailProps = {
+        alt: items[0].product_name,
+        classes: { root: classes.thumbnail },
+        width: 50
+    };
+
+    return (
+        <li className={classes.root}>
+            <div className='flex flex-col md_flex-row justify-between mb-2.5'>
+                <div className='flex flex-col'>
+                    <div className="flex gap-x-[15px] flex-row">
+                        <span className="text-[14px] text-colorDefault">{formattedDate}</span>
+                        <span className="text-gray-200 text-[14px]">{orderNumber}</span>
+                    </div>
+                </div>
+                <div className='flex flex-col'>
+                    <div className='flex w-full justify-start mt-2.5 md_mt-0 md_justify-end'>
+                        <span className={cn(classes.orderStatusBadge, badgeStatusStyle())}>
+                            {derivedStatus}
+                        </span>
+                    </div>
+                </div>
+            </div>
+            <div className='flex flex-col md_flex-row justify-between mb-2.5'>
+                <div className='flex flex-col'>
+                    <div className='flex gap-x-[5px] mb-2.5'>
+                        <Verify size={17} className='text-blue-700' variant="Bold" />
+                        <span className='text-xs font-medium text-[rgba(25, 34, 42, 0.7)]'>
+                            Gundam Info
+                        </span>
+                    </div>
+                    <div className='flex flex-row'>
+                        <div>
+                            <PlaceholderImage {...thumbnailProps} />
+                        </div>
+                        <div className='flex flex-col max-w-[260px] gap-2.5'>
+                            <div className={cn(classes.productName, 'text-[14] font-medium')}>
+                                <span>
+                                    {items[0]?.product_name}
+                                </span>
+                            </div>
+                            <div className="text-[14] text-gray-200">
+                                <span>
+                                    {`${items[0]?.quantity_ordered}X`}
+                                </span>
+                                {' '}
+                                <span>
+                                    <Price currencyCode={items[0]?.product_sale_price?.currency} value={items[0]?.product_sale_price?.value} />
+                                </span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div className='flex flex-col'>
+                    <div className="md_px-10 py-3 md_border-l border-gray-100">
+                        <span className="text-[14] text-gray-200 text-left md_text-center block mb-2">
+                            <FormattedMessage
+                                id={'orderRow.orderTotalText'}
+                                defaultMessage={'Order Total'}
+                            />
+                        </span>
+                        <div className="text-lg font-semibold text-left md_text-center block">{orderTotalPrice}</div>
+                    </div>
+                </div>
+            </div>
+            <div className='flex flex-row justify-end py-[5px]'>
+                <Link to="/return/view/DEV123123123">
+                    <span className="text-[13px] font-medium text-blue-700 underline">
+                        <FormattedMessage
+                            id={'orderRow.ViewTransactionDetail'}
+                            defaultMessage={'View Transaction Detail'}
+                        />
+                    </span>
+                </Link>
+            </div>
+
+            {/* <div className={classes.orderDateContainer}>
+                <span className={classes.orderDateLabel}>
+                    <FormattedMessage
+                        id={'orderRow.orderDateText'}
+                        defaultMessage={'Order Date'}
+                    />
+                </span>
+                <span className={classes.orderDate}>{formattedDate}</span>
+            </div> */}
+            {/* <div className={classes.orderItemsContainer}>
+                {collapsedImageGalleryElement}
+            </div> */}
+            {/* <div className={classes.orderStatusContainer}>
+                <span className={classes.orderStatusBadge}>
+                    {derivedStatus}
+                </span>
+                <OrderProgressBar status={derivedStatus} />
+            </div> */}
+            <div className={cn(contentClass, '!py-4 mt-4')}>{orderDetails}</div>
+        </li>
+    );
+};
+
+export default OrderRow;
+
+OrderRow.propTypes = {
+    classes: shape({
+        root: string,
+        cell: string,
+        stackedCell: string,
+        label: string,
+        value: string,
+        orderNumberContainer: string,
+        orderDateContainer: string,
+        orderTotalContainer: string,
+        orderStatusContainer: string,
+        orderItemsContainer: string,
+        contentToggleContainer: string,
+        orderNumberLabel: string,
+        orderDateLabel: string,
+        orderTotalLabel: string,
+        orderNumber: string,
+        orderDate: string,
+        orderTotal: string,
+        orderStatusBadge: string,
+        content: string,
+        content_collapsed: string
+    }),
+    order: shape({
+        billing_address: shape({
+            city: string,
+            country_code: string,
+            firstname: string,
+            lastname: string,
+            postcode: string,
+            region_id: string,
+            street: arrayOf(string)
+        }),
+        items: arrayOf(
+            shape({
+                id: string,
+                product_name: string,
+                product_sale_price: shape({
+                    currency: string,
+                    value: number
+                }),
+                product_sku: string,
+                selected_options: arrayOf(
+                    shape({
+                        label: string,
+                        value: string
+                    })
+                ),
+                quantity_ordered: number
+            })
+        ),
+        invoices: arrayOf(
+            shape({
+                id: string
+            })
+        ),
+        number: string,
+        order_date: string,
+        payment_methods: arrayOf(
+            shape({
+                type: string,
+                additional_data: arrayOf(
+                    shape({
+                        name: string,
+                        value: string
+                    })
+                )
+            })
+        ),
+        shipping_address: shape({
+            city: string,
+            country_code: string,
+            firstname: string,
+            lastname: string,
+            postcode: string,
+            region_id: string,
+            street: arrayOf(string),
+            telephone: string
+        }),
+        shipping_method: string,
+        shipments: arrayOf(
+            shape({
+                id: string,
+                tracking: arrayOf(
+                    shape({
+                        number: string
+                    })
+                )
+            })
+        ),
+        status: string,
+        total: shape({
+            discounts: arrayOf(
+                shape({
+                    amount: shape({
+                        currency: string,
+                        value: number
+                    })
+                })
+            ),
+            grand_total: shape({
+                currency: string,
+                value: number
+            }),
+            subtotal: shape({
+                currency: string,
+                value: number
+            }),
+            total_tax: shape({
+                currency: string,
+                value: number
+            }),
+            total_shipping: shape({
+                currency: string,
+                value: number
+            })
+        })
+    })
+};

package/src/components/commons/Checkbox/index.js

@@ -0,0 +1,57 @@
+import React, { useState } from 'react';
+import cn from 'classnames';
+
+const Checkbox = (props) => {
+    const {
+        onChange = () => { },
+        className = '',
+        id = '',
+        defaultChecked = false,
+        width = 20,
+        height = 20,
+        color = '#4E31DB',
+        colorUncheked = '#E6E9EA'
+    } = props;
+
+    const [checked, setChecked] = useState(defaultChecked);
+
+    const handleChange = (e) => {
+        if (e.target.checked) {
+            setChecked(true);
+        } else {
+            setChecked(false);
+        }
+        onChange(e);
+    }
+
+    return (
+        <>
+            <div className={cn('relative', className)}>
+                {checked ? (
+                    <>
+                        <svg xmlns="http://www.w3.org/2000/svg" width={width} height={height} viewBox={`0 0 ${width + 4} ${height + 4}`} fill="none">
+                            <path d="M9 22H15C20 22 22 20 22 15V9C22 4 20 2 15 2H9C4 2 2 4 2 9V15C2 20 4 22 9 22Z" stroke={color} stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
+                            <path d="M7.75 12L10.58 14.83L16.25 9.17004" stroke={color} stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
+                        </svg>
+                    </>
+                ) : (
+                    <>
+                        <svg xmlns="http://www.w3.org/2000/svg" width={width} height={height} viewBox={`0 0 ${width + 4} ${height + 4}`} fill="none">
+                            <path d="M9 22H15C20 22 22 20 22 15V9C22 4 20 2 15 2H9C4 2 2 4 2 9V15C2 20 4 22 9 22Z" stroke={colorUncheked} stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
+                        </svg>
+                    </>
+                )}
+                <input
+                    type="checkbox"
+                    onChange={(e) => handleChange(e)}
+                    className='opacity-0 absolute top-0'
+                    checked={checked}
+                    style={{ width: width, height: height }}
+                    id={id}
+                />
+            </div>
+        </>
+    )
+}
+
+export default Checkbox

package/src/components/commons/Collapsible/index.js

@@ -0,0 +1,51 @@
+import React, { useState } from 'react';
+import { ArrowDown2 } from 'iconsax-react';
+import cn from 'classnames';
+
+const Collapsible = (props) => {
+    const {
+        rootClassName,
+        expanded = false,
+        children = '',
+        content = '',
+        title = 'title',
+        contentWrapperClassName,
+    } = props
+    const [expand, setExpand] = useState(expanded);
+
+    return (
+        <>
+            <div className={cn('w-full border-t border-gray-100', rootClassName)}>
+                <div
+                    className={cn(
+                        'flex justify-between items-center',
+                        'px-2.5 py-[18px] cursor-pointer'
+                    )}
+                    onClick={() => setExpand(!expand)}
+                >
+                    <span className='text-[16px] font-semibold'>
+                        {title}
+                    </span>
+                    <ArrowDown2
+                        className={cn(
+                            'transition-all',
+                            expand ? 'rotate-180' : 'rotate-0',
+                        )}
+                        size={16}
+                    />
+                </div>
+                <div
+                    className={cn(
+                        ' transition-all mt-2.5 duration-300 ease-in-out overflow-hidden border-b border-gray-100',
+                        expand ? 'h-auto opacity-100' : 'h-0 opacity-0',
+                        contentWrapperClassName,
+                    )}
+                >
+                    {children ? children : content}
+                </div>
+            </div>
+        </>
+    )
+}
+
+export default Collapsible

package/src/components/commons/Select/index.js

@@ -0,0 +1,29 @@
+import React from 'react';
+import cx from 'classnames';
+
+const Select = (props) => {
+    const {
+        wrapperClassname,
+        className,
+        options = []
+    } = props;
+
+    return (
+        <div className={cx('flex', wrapperClassname)}>
+            <select
+                className={cx('border rounded-md border-gray-100 p-2 focus-visible_outline-none', className)}
+            >
+                <option value=''>
+                    Choose Option
+                </option>
+                {options.map((item) => (
+                    <option value={item.value}>
+                        {item.label}
+                    </option>
+                ))}
+            </select>
+        </div>
+    )
+}
+
+export default Select

package/src/components/commons/Textfield/index.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import cx from 'classnames';
+
+const index = (props) => {
+    const {
+        wrapperClassname,
+        className,
+        value
+    } = props;
+    return (
+        <div className={cx('flex', wrapperClassname)}>
+            <input
+                className={cx('w-full p-2 border border-gray-100 rounded-md focus-visible_outline-none', className)}
+                value={value}
+            />
+        </div>
+    )
+}
+
+export default index

package/src/intercept.js

@@ -149,6 +149,41 @@ module.exports = targets => {
       pattern: "/quotes/:urlKey",
       path: require.resolve("./components/RFQPage/quoteDetailPage.js"),
       authed: true,
+    },
+    {
+      exact: true,
+      name: "RMA",
+      pattern: "/return",
+      path: require.resolve("./components/RMAPage/index.js"),
+      authed: true,
+    },
+    {
+      exact: true,
+      name: "RMA Select",
+      pattern: "/return/select",
+      path: require.resolve("./components/RMAPage/RMASelectPage.js"),
+      authed: true,
+    },
+    {
+      exact: true,
+      name: "RMA Detail",
+      pattern: "/return/view/:urlKey",
+      path: require.resolve("./components/RMAPage/RMADetailPage.js"),
+      authed: true,
+    },
+    {
+      exact: true,
+      name: "New Return",
+      pattern: "/return/create/:urlKey",
+      path: require.resolve("./components/RMAPage/RMACreatePage.js"),
+      authed: true,
+    },
+    {
+      exact: true,
+      name: "Order Detail",
+      pattern: "/order-history/view/:urlKey",
+      path: require.resolve("./components/OrderDetail/orderDetailPage.js"),
+      authed: true,
     }
   ];
 

package/src/overwrites/venia-ui/lib/components/AccountMenu/accountMenu.js

@@ -8,6 +8,7 @@ import SignIn from '@magento/venia-ui/lib/components/SignIn/signIn';
 import AccountMenuItems from './accountMenuItems';
 import ForgotPassword from '@magento/venia-ui/lib/components/ForgotPassword';
 import defaultClasses from './accountMenu.module.css';
+import cn from 'classnames';
 
 const AccountMenu = React.forwardRef((props, ref) => {
     const {
@@ -86,7 +87,7 @@ const AccountMenu = React.forwardRef((props, ref) => {
     }
 
     return (
-        <aside className={rootClass} data-cy="AccountMenu-root">
+        <aside className={cn(rootClass, '!top-[57px] max-w-[1210px]')} data-cy="AccountMenu-root">
             <div ref={ref} className={contentsClass}>
                 {accountMenuIsOpen ? dropdownContents : null}
             </div>

package/src/overwrites/venia-ui/lib/components/Breadcrumbs/breadcrumbs.module.css

@@ -4,6 +4,8 @@
     composes: flex from global;
     composes: items-center from global;
     composes: gap-[6px] from global;
+    composes: mt-[10px] from global;
+    composes: mb-[24px] from global;
     composes: my-[10px] from global;
     padding-top: 20px;
     margin-bottom: 40px;
@@ -30,4 +32,40 @@
 .currentCategory {
     composes: text-base from global;
     composes: leading-[13px] from global;
+}
+
+@media only screen and (max-width: 1023px) {
+    .text {
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
+        -webkit-line-clamp: 1;
+        overflow: hidden;
+        max-width: 160px;
+    }
+
+    .link {
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
+        -webkit-line-clamp: 1;
+        overflow: hidden;
+        max-width: 160px;
+    }
+}
+
+@media only screen and (max-width: 767px) {
+    .text {
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
+        -webkit-line-clamp: 1;
+        overflow: hidden;
+        max-width: 100px;
+    }
+
+    .link {
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
+        -webkit-line-clamp: 1;
+        overflow: hidden;
+        max-width: 100px;
+    }
 }

package/src/overwrites/venia-ui/lib/components/CartPage/ProductListing/product.js

@@ -146,7 +146,7 @@ const Product = props => {
                             defaultMessage={' ea.'}
                         /> */}
                     </span>
-                    <div className={classes.quantity}>
+                    <div className={cn(classes.quantity, 'hidden sm_flex')}>
                         <Quantity
                             itemId={item.id}
                             initialValue={quantity}
@@ -186,7 +186,14 @@ const Product = props => {
                 </Kebab> */}
 
             </div>
-            <div className='flex justify-end gap-2.5'>
+            <div className='flex justify-end gap-2.5 items-center mt-2 sm_mt-0'>
+                <div className={cn(classes.quantity, 'flex-auto sm_hidden')}>
+                    <Quantity
+                        itemId={item.id}
+                        initialValue={quantity}
+                        onChange={handleUpdateItemQuantity}
+                    />
+                </div>
                 {editItemSection}
                 <li>
                     <AddToListButton

package/src/overwrites/venia-ui/lib/components/Footer/footer.js

@@ -62,7 +62,7 @@ const Footer = props => {
             data-cy="Footer-root"
             className={cn(
                 classes.root,
-                '!pt-[50px] !px-0'
+                '!pt-[50px] !px-6 lg_!px-4'
             )}
         >
             <div className={classes.links}>

package/src/overwrites/venia-ui/lib/components/Header/header.js

@@ -24,6 +24,7 @@ import { useIntl } from 'react-intl';
 import cn from 'classnames';
 // const SearchBar = React.lazy(() => import('@magento/venia-ui/lib/components/SearchBar'));
 const SearchBar = React.lazy(() => import('@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/components/SearchBar'));
+import { SearchNormal } from 'iconsax-react';
 
 import { useLogo } from '@riosst100/pwa-marketplace/src/talons/Header/useLogo';
 import Image from '@magento/venia-ui/lib/components/Image';
@@ -85,7 +86,7 @@ const Header = props => {
             <header className={cn(rootClass, '!flex flex-col !px-0 border-gray-100 ')} data-cy="Header-root">
                 <div className={cn('middle-header border-b border-gray-100')}>
                     <div className={cn('w-full max-w-[1210px] px-[15px] py-[10px] mx-[auto] flex justify-between items-center')}>
-                        <div className='flex'>
+                        <div className='flex items-center'>
                             <NavTrigger />
 
                             <Link
@@ -114,6 +115,16 @@ const Header = props => {
                             </Link>
                         </div>
                         <div className='flex flex-auto max-w-[700px]'>
+                            <div className=' hidden lg_flex w-full'>
+                                <Suspense fallback={searchBarFallback}>
+                                    <Route>
+                                        <SearchBar isOpen={true} ref={searchRef} />
+                                    </Route>
+                                </Suspense>
+                            </div>
+                            <div className='flex w-full justify-end lg_hidden'>
+                                <SearchNormal size="25" color="#280135" variant="Outline" className='mr-4' />
+                            </div>
                             <Suspense fallback={searchBarFallback}>
                                 <Route>
                                     <SearchBar isOpen={true} ref={searchRef} />

package/src/overwrites/venia-ui/lib/components/Newsletter/newsletter.js

@@ -66,7 +66,7 @@ const Newsletter = props => {
     ) : null;
 
     return (
-        <div className={classes.root} data-cy={'Newsletter-root'}>
+        <div className='col-span-6 gap-none grid items-start max-w-[20rem] mx-0 lg_mx-auto relative sm_col-span-3' data-cy={'Newsletter-root'}>
             {maybeLoadingIndicator}
             <span data-cy="Newsletter-title" className={classes.title}>
                 <FormattedMessage