@riosst100/pwa-marketplace 2.0.9 → 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/RelatedProduct/index.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import Content from './relatedProduct';
+import data from './sample.json';
+
+const index = () => {
+
+    const contetnProps = {
+        data
+    }
+
+    return (
+        <Content {...contetnProps} />
+    )
+}
+
+export default index

package/src/components/RelatedProduct/relatedProduct.js

@@ -0,0 +1,112 @@
+import React from 'react';
+import GalleryItem from '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/components/Gallery/item';
+import Slider from "react-slick";
+import { ArrowLeft2, ArrowRight2 } from 'iconsax-react';
+import cn from 'classnames';
+import { useGallery } from '@magento/peregrine/lib/talons/Gallery/useGallery';
+
+import { primary900 } from '@riosst100/pwa-marketplace/src/theme/vars';
+
+const CustomArrow = (props) => {
+    const { isNext = true, onClick, className } = props;
+    return (
+        <span
+            className={cn(
+                className,
+                'custom_arrow rounded-full w-10 h-10 p-2.5 bg-white hover_!bg-white z-[1] !border !border-solid !border-gray-100 before_hidden',
+                isNext ? 'right-2 lg_right-4' : 'left-2 lg_left-4',
+            )}
+            onClick={onClick}
+        >
+            {isNext ? (
+                <ArrowRight2 className='' size="20" color={primary900} />
+            ) : (
+                <ArrowLeft2 size="20" color={primary900} />
+            )}
+        </span>
+    )
+}
+
+const relatedProduct = (props) => {
+    const { data } = props;
+    const talonProps = useGallery();
+    const { storeConfig } = talonProps;
+
+    const settings = {
+        dots: false,
+        infinite: false,
+        speed: 500,
+        slidesToShow: 5,
+        slidesToScroll: 1,
+        nextArrow: <CustomArrow />,
+        prevArrow: <CustomArrow isNext={false} />,
+        centerPadding: "60px",
+        responsive: [
+            {
+                breakpoint: 1023,
+                settings: {
+                    slidesToShow: 3,
+                    slidesToScroll: 1,
+                }
+            },
+            {
+                breakpoint: 767,
+                settings: {
+                    slidesToShow: 3,
+                    slidesToScroll: 1,
+                }
+            },
+            {
+                breakpoint: 576,
+                settings: {
+                    slidesToShow: 2,
+                    slidesToScroll: 1
+                }
+            }
+        ]
+    };
+
+    return (
+        <>
+            <h2
+                className={cn(
+                    'bg-darkblue-900 text-lg font-medium text-white leading-6 px-6 py-3 inline-block relative',
+                    'after_border-l-[48px] after_border-t-[48px] after_border-b-0 after_border-r-0',
+                    'after_border-l-darkblue-900 after_border-t-transparent after_border-r-transparent after_border-b-transparent',
+                    'after_absolute after_right-[-48px] after_top-0'
+                )}
+            >
+                More from this store
+            </h2>
+            <div className='related_products-container flex flex-col gap-x-4 gap-y-5 py-10 mb-4'>
+                <Slider {...settings}>
+                    {data.map((item) => {
+                        return (
+                            <GalleryItem
+                                key={item.id}
+                                item={item}
+                                storeConfig={storeConfig}
+                                rootClassName="px-2 block"
+                            />
+                        )
+                    })}
+                </Slider>
+            </div>
+
+            <style global jsx>
+                {`
+                    .related_products-container .slick-slider {
+                        margin: 0 -8px;
+                    }
+                    @media only screen and (min-width: 1024px) {
+                        .related_products-container .slick-slider {
+                            margin: 0 -16px;
+                        }
+                    }
+                `}
+            </style>
+        </>
+    )
+}
+
+export default relatedProduct

package/src/components/RelatedProduct/sample.json

@@ -0,0 +1,154 @@
+[
+    {
+        "__typename": "SimpleProduct",
+        "id": 25,
+        "uid": "MjU=",
+        "name": "Test Product 13",
+        "seller": {
+            "__typename": "Seller",
+            "name": null
+        },
+        "price_range": {
+            "__typename": "PriceRange",
+            "maximum_price": {
+                "__typename": "ProductPrice",
+                "final_price": {
+                    "__typename": "Money",
+                    "currency": "SGD",
+                    "value": 120
+                },
+                "regular_price": {
+                    "__typename": "Money",
+                    "currency": "SGD",
+                    "value": 120
+                },
+                "discount": {
+                    "__typename": "ProductDiscount",
+                    "amount_off": 0
+                }
+            }
+        },
+        "sku": "Test Product 7-1-2",
+        "small_image": {
+            "__typename": "ProductImage",
+            "url": "https://seller-dev.tcgcollective.co/media/catalog/product/cache/9d2223072e07b2ec257382d238a7acb0/b/p/bp19439l_4_.jpg"
+        },
+        "stock_status": "IN_STOCK",
+        "rating_summary": 0,
+        "url_key": "test-product-13"
+    },
+    {
+        "__typename": "SimpleProduct",
+        "id": 24,
+        "uid": "MjQ=",
+        "name": "Test Product 12",
+        "seller": {
+            "__typename": "Seller",
+            "name": null
+        },
+        "price_range": {
+            "__typename": "PriceRange",
+            "maximum_price": {
+                "__typename": "ProductPrice",
+                "final_price": {
+                    "__typename": "Money",
+                    "currency": "SGD",
+                    "value": 120
+                },
+                "regular_price": {
+                    "__typename": "Money",
+                    "currency": "SGD",
+                    "value": 120
+                },
+                "discount": {
+                    "__typename": "ProductDiscount",
+                    "amount_off": 0
+                }
+            }
+        },
+        "sku": "Test Product 11-1",
+        "small_image": {
+            "__typename": "ProductImage",
+            "url": "https://seller-dev.tcgcollective.co/static/frontend/Magento/luma/en_US/Magento_Catalog/images/product/placeholder/small_image.jpg"
+        },
+        "stock_status": "IN_STOCK",
+        "rating_summary": 0,
+        "url_key": "test-product-12"
+    },
+    {
+        "__typename": "SimpleProduct",
+        "id": 23,
+        "uid": "MjM=",
+        "name": "Test Product 11",
+        "seller": {
+            "__typename": "Seller",
+            "name": null
+        },
+        "price_range": {
+            "__typename": "PriceRange",
+            "maximum_price": {
+                "__typename": "ProductPrice",
+                "final_price": {
+                    "__typename": "Money",
+                    "currency": "SGD",
+                    "value": 120
+                },
+                "regular_price": {
+                    "__typename": "Money",
+                    "currency": "SGD",
+                    "value": 120
+                },
+                "discount": {
+                    "__typename": "ProductDiscount",
+                    "amount_off": 0
+                }
+            }
+        },
+        "sku": "Test Product 11",
+        "small_image": {
+            "__typename": "ProductImage",
+            "url": "https://seller-dev.tcgcollective.co/static/frontend/Magento/luma/en_US/Magento_Catalog/images/product/placeholder/small_image.jpg"
+        },
+        "stock_status": "IN_STOCK",
+        "rating_summary": 0,
+        "url_key": "test-product-11"
+    },
+    {
+        "__typename": "SimpleProduct",
+        "id": 21,
+        "uid": "MjE=",
+        "name": "Test Product 9",
+        "seller": {
+            "__typename": "Seller",
+            "name": null
+        },
+        "price_range": {
+            "__typename": "PriceRange",
+            "maximum_price": {
+                "__typename": "ProductPrice",
+                "final_price": {
+                    "__typename": "Money",
+                    "currency": "SGD",
+                    "value": 98
+                },
+                "regular_price": {
+                    "__typename": "Money",
+                    "currency": "SGD",
+                    "value": 120
+                },
+                "discount": {
+                    "__typename": "ProductDiscount",
+                    "amount_off": 22
+                }
+            }
+        },
+        "sku": "Test Product 7-1-1",
+        "small_image": {
+            "__typename": "ProductImage",
+            "url": "https://seller-dev.tcgcollective.co/media/catalog/product/cache/9d2223072e07b2ec257382d238a7acb0/f/4/f4f14229_14.jpg"
+        },
+        "stock_status": "IN_STOCK",
+        "rating_summary": 0,
+        "url_key": "test-product-9"
+    }
+]

package/src/components/SellerCountry/index.js

@@ -1 +1 @@
-export { default } from './sellerCountry';
+export { default } from './sellerCountry';