@riosst100/pwa-marketplace 2.7.5 → 2.7.8

package/package.json

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

package/src/components/CrossSeller/crossSellerBuy.js

@@ -1,19 +1,29 @@
+// crossSellerBuy.js
 import React from 'react';
 import Item from './item';
 
-const crossSellerBuy = () => {
+export const listings = [
+    { id: 1, sellerName: 'SuperGamesInc', sales: 3329, condition: 'Near Mint 1st Edition', price: 34.19 },
+    { id: 2, sellerName: 'GameWorld', sales: 1520, condition: 'Near Mint 1st Edition', price: 28.49 },
+    { id: 3, sellerName: 'MegaPlay', sales: 980, condition: 'Near Mint 1st Edition', price: 31.00 }
+];
+
+export const totalListings = listings.length;
+export const lowestPrice = Math.min(...listings.map(item => item.price));
+
+const CrossSellerBuy = () => {
     return (
         <>
-            <h3 className='capitalize font-medium text-xl mb-[30px]'>
-                Also Available
-            </h3>
-            <div className='flex flex-col gap-y-5'>
-                {[...Array(6)].map(() => (
-                    <Item />
+            <h3 className="font-semibold text-sm sm_text-base md_text-lg lg_text-xl xl_text-2xl mb-1">{totalListings} Listings</h3>
+            <p className="text-[16px] mb-6">As low as ${lowestPrice.toFixed(2)}</p>
+
+            <div className="flex flex-col gap-y-4">
+                {listings.map(item => (
+                    <Item key={item.id} {...item} />
                 ))}
             </div>
         </>
-    )
-}
+    );
+};
 
-export default crossSellerBuy
+export default CrossSellerBuy;

package/src/components/CrossSeller/item.js

@@ -7,73 +7,55 @@ import Verify from './verifyIcon';
 import Star from './starIcon';
 import logoImage from './logo_seller.png';
 
-const item = () => {
+const Item = ({ sellerName, sales, price, condition }) => {
     return (
-        <>
-            <div className='flex flex-col gap-y-4 lg_flex-row justify-between bg-white rounded-lg border border-gray-100 p-[15px]'>
-                <div className='seller_info-container flex flex-row gap-x-[15px]'>
-                    <div className='logo_wrapper w-[100px] h-[100px]'>
-                        <Image
-                            alt='seller name'
-                            className="relative mt-[-5px]"
-                            src={logoImage}
-                        />
-                    </div>
-                    <div className='flex flex-col gap-y-[15px]'>
-                        <div className='seller_summary-wrapper flex flex-row gap-x-2.5 items-center'>
-                            <div className='seller_name text-lg font-medium leading-6'>
-                                Zen Market
-                            </div>
-                            <div className='seller_badge flex flex-row gap-x-[5px] items-center leading-6'>
-                                <Verify />
-                                <span className='text-xs font-medium text-gray-600-transparent capitalize'>
-                                    Verified
-                                </span>
-                            </div>
-                        </div>
-                        <div className='rating_sales flex flex-row gap-x-[5px] items-center'>
-                            <Star />
-                            <span className='font-normal text-[14px] text-gray-200'>
-                                4.7 (Sales 120)
-                            </span>
+        <div className='flex flex-col items-center text-center lg_text-left md_text-left lg_flex-row md_flex-row bg-white rounded-lg border border-gray-100 p-[15px] gap-y-4'>
+            <div className='seller_info-container flex flex-row gap-x-[15px] lg_w-1/3 md_w-1/3'>
+                <div className='flex flex-col gap-y-[15px]'>
+                    <div className='seller_summary-wrapper flex flex-row gap-x-2.5 items-center'>
+                        <div className='seller_name text-lg font-semibold leading-6'>
+                            {sellerName}
                         </div>
                     </div>
+                    <div className='rating_sales flex flex-row gap-x-[5px] items-center'>
+                        <span className='font-normal text-[14px] text-gray-200'>
+                            {sales}+ Sales
+                        </span>
+                    </div>
                 </div>
+            </div>
 
-                <div className='price_container'>
-                    <div className='price text-lg font-medium'>
-                        $34.19
-                    </div>
-                    <span className='shipping_note text-xs text-gray-200'>
-                        Shipping method is calculated on checkout
-                    </span>
+            <div className='price_container lg_w-1/3 md_w-1/3'>
+                <div className="text-sm font-medium text-gray-800">{condition}</div>
+                <div className='price text-lg font-medium text-[#f76b1c]'>
+                    ${price}
                 </div>
+                <span className='shipping_note text-xs text-gray-200'>
+                    Shipping method is calculated on checkout
+                </span>
+            </div>
 
-                <div className='form_wrapper'>
-                    <Form
-                        data-cy="FormAddToCartCrossSeller"
-                        onSubmit={() => { }}
-                        className="flex flex-row gap-x-7"
+            <div className='form_wrapper'>
+                <Form
+                    data-cy="FormAddToCartCrossSeller"
+                    onSubmit={() => { }}
+                    className="flex flex-col gap-x-7 gap-y-7 items-center lg_flex-row md_flex-row"
+                >
+                    <QuantityStepper min={1} />
+                    <Button
+                        data-cy="addToCartButton"
+                        classes={{
+                            content: 'normal-case font-medium text-[16px]'
+                        }}
+                        priority="high"
+                        type="button"
                     >
-                        <QuantityStepper
-                            min={1}
-                        // message={'error quantity'}
-                        />
-                        <Button
-                            data-cy="addToCartButton"
-                            classes={{
-                                content: 'normal-case font-medium text-[16px]'
-                            }}
-                            priority="high"
-                            type="button"
-                        >
-                            Add To Cart
-                        </Button>
-                    </Form>
-                </div>
+                        Add To Cart
+                    </Button>
+                </Form>
             </div>
-        </>
-    )
-}
+        </div>
+    );
+};
 
-export default item
+export default Item;

package/src/components/LinkToOtherStores/index.js

@@ -46,7 +46,7 @@ const LinkToOtherStores = (props) => {
             if (store.product_link) {
                 const logo = getLogo(store.stores);
                 finalLinkToOtherStores.push(
-                    <a href={store.product_link} className='platform_logo-wrapper rounded-md px-5 py-2.5 border border-gray-100 flex items-center' target="_blank">
+                    <a href={store.product_link} className='platform_logo-wrapper rounded-md px-5 py-2.5 border border-gray-100 flex items-center w-full justify-center' target="_blank">
                         {logo ? <img
                             alt={store.stores}
                             width={60}
@@ -61,14 +61,13 @@ const LinkToOtherStores = (props) => {
 
     return finalLinkToOtherStores && finalLinkToOtherStores.length ? <>
         <section className='product_from-other-platform py-xs'>
-            <div className='text-sm flex mb-3'>
+            <div className='title-section text-gray-400 text-sm flex mb-3 px-[15px]'>
                 Also available in
             </div>
-            <div className='platform-container flex gap-x-2.5'>
+            <div className='content-section platform-container flex gap-x-2.5 pl-[1rem] px-[15px] justify-between'>
                 {finalLinkToOtherStores}
             </div>
         </section>
-        <Divider />
     </> : '';
 }
 

package/src/components/RFQ/index.js

@@ -2,41 +2,33 @@ import React, { useState } from 'react';
 import Button from '@magento/venia-ui/lib/components/Button';
 import { useIntl } from 'react-intl';
 import ModalRFQ from './modalRfq';
+import cn from 'classnames';
 
-const RFQ = (props) => {
+const RFQ = ({ disabled, classes: customClasses = {} }) => {
+  const [open, setOpen] = useState(false);
+  const { formatMessage } = useIntl();
 
-    const { disabled } = props;
+  return (
+    <>
+      <ModalRFQ open={open} setOpen={setOpen} />
 
-    const [open, setOpen] = useState(false);
-    const { formatMessage } = useIntl();
+      <Button
+        data-cy="ProductFullDetail-RFQ"
+        disabled={disabled}
+        classes={{
+          rootClass: cn(customClasses.rfqButton),
+          content: cn('normal-case font-medium text-[16px]', customClasses.content)
+        }}
+        priority="low"
+        onClick={() => setOpen(true)}
+      >
+        {formatMessage({
+          id: 'productFullDetail.RequestQuote',
+          defaultMessage: 'Make An Offer'
+        })}
+      </Button>
+    </>
+  );
+};
 
-    return (
-        <>
-            <ModalRFQ
-                open={open}
-                setOpen={setOpen}
-            />
-
-            <Button
-                data-cy="ProductFullDetail-RFQ"
-                disabled={disabled}
-                classes={{
-                    content: 'normal-case font-medium text-[16px]'
-                }}
-                priority="low"
-                type="submit"
-                onClick={() => { setOpen(true) }}
-            >
-                {
-                    formatMessage({
-                        id: 'productFullDetail.RequestQuote',
-                        defaultMessage:
-                            'Make An Offer'
-                    })
-                }
-            </Button>
-        </>
-    )
-}
-
-export default RFQ;
+export default RFQ;

package/src/components/SellerProducts/productContent.js

@@ -249,7 +249,7 @@ const ProductContent = props => {
         <>
             <div className='w-full mb-[30px]'>
                 <SellerMegaMenu
-                    rootClassName={cn('nav-menu w-full max-w-[1210px] px-[15px] mx-[auto] flex-row gap-x-[40px]')}
+                    rootClassName={cn('nav-menu w-full max-w-[1300px] px-[15px] mx-[auto] flex-row gap-x-[40px]')}
                     sellerMegaMenuItemClassname={cn('px-0 py-[10px] leading-[20px]')}
                     seller={seller}
                     titleClassName={cn('font-normal leading-[20px]')}

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

@@ -87,7 +87,7 @@ const AccountMenu = React.forwardRef((props, ref) => {
     }
 
     return (
-        <aside className={cn(rootClass, '!top-[57px] max-w-[1210px]')} data-cy="AccountMenu-root">
+        <aside className={cn(rootClass, '!top-[57px] max-w-[1300px]')} data-cy="AccountMenu-root">
             <div ref={ref} className={contentsClass}>
                 {accountMenuIsOpen ? dropdownContents : null}
             </div>

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

@@ -7,8 +7,8 @@
     composes: mt-[10px] from global;
     composes: mb-[24px] from global;
     composes: my-[10px] from global;
-    padding-top: 20px;
-    margin-bottom: 40px;
+    padding-top: 10px;
+    margin-bottom: 25px;
 }
 
 .text {

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

@@ -12,7 +12,7 @@ import { useHeader } from '@magento/peregrine/lib/talons/Header/useHeader';
 import resourceUrl from '@magento/peregrine/lib/util/makeUrl';
 
 import { useStyle } from '@magento/venia-ui/lib/classify';
-import defaultClasses from '@magento/venia-ui/lib/components/Header/header.module.css';
+import defaultClasses from './header.module.css';
 import StoreSwitcher from '@magento/venia-ui/lib/components/Header/storeSwitcher';
 import WebsiteSwitcher from '@riosst100/pwa-marketplace/src/components/WebsiteSwitcher/websiteSwitcher';
 // import CurrencySwitcher from '@magento/venia-ui/lib/components/Header/currencySwitcher';
@@ -76,7 +76,7 @@ const Header = props => {
         <Fragment>
             <PageLoadingIndicator absolute />
             <div className={cn(classes.switchersContainer, '!bg-white border-b border-gray-100')}>
-                <div className={cn(classes.switchers, 'flex flex-row gap-x-[25px] !py-2')} data-cy="Header-switchers">
+                <div className={cn(classes.switchers, 'max-w-[1300px] flex flex-row gap-x-[25px] !py-2')} data-cy="Header-switchers">
                     <BecomeSellerLink />
                     <WebsiteSwitcher />
                     <StoreSwitcher />
@@ -85,7 +85,7 @@ const Header = props => {
             </div>
             <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={cn('w-full max-w-[1300px] px-[15px] py-[10px] mx-[auto] flex justify-between items-center')}>
                         <div className='flex items-center'>
                             <NavTrigger />
 
@@ -138,7 +138,7 @@ const Header = props => {
                     </div>
                 </div>
                 <MegaMenu
-                    rootClassName={cn('nav-menu w-full max-w-[1210px] px-[15px] mx-[auto] flex-row gap-x-[40px]')}
+                    rootClassName={cn('nav-menu w-full max-w-[1300px] px-[15px] mx-[auto] flex-row gap-x-[40px]')}
                     megaMenuItemClassname={cn('px-0 py-[10px] leading-[20px]')}
                     titleClassName={cn('font-normal leading-[20px]')}
                 />

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

@@ -0,0 +1,173 @@
+.root {
+    composes: auto-cols-fr from global;
+    composes: bg-header from global;
+    composes: border-b from global;
+    composes: border-subtle from global;
+    composes: grid from global;
+    composes: h-auto from global;
+    composes: justify-center from global;
+    composes: px-4 from global;
+    composes: top-0 from global;
+    composes: sticky from global;
+    composes: w-full from global;
+    composes: z-header from global;
+
+    composes: lg_px-8 from global;
+}
+
+.switchers {
+    composes: auto-cols-max from global;
+    composes: grid from global;
+    composes: grid-flow-col from global;
+    composes: justify-end from global;
+    /* composes: max-w-site from global; */
+    composes: mx-auto from global;
+    composes: relative from global;
+    composes: w-full from global;
+    composes: z-menu from global;
+}
+
+.switchersContainer {
+    composes: bg-gray-100 from global;
+    composes: hidden from global;
+    composes: px-8 from global;
+    composes: w-full from global;
+}
+
+/* Large screen styles */
+.switchersContainer {
+    composes: sm_block from global;
+}
+
+.open {
+    composes: root;
+}
+
+.closed {
+    composes: root;
+}
+
+.toolbar {
+    composes: border-0 from global;
+    composes: content-center from global;
+    composes: gap-x-4 from global;
+    composes: grid from global;
+    composes: grid-cols-3 from global;
+    composes: grid-rows-header from global;
+    composes: h-14 from global;
+    composes: items-center from global;
+    composes: justify-self-center from global;
+    composes: max-w-site from global;
+    composes: w-full from global;
+    composes: z-header from global;
+
+    composes: lg_h-20 from global;
+    composes: lg_gap-x-8 from global;
+    composes: lg_grid-cols-12 from global;
+}
+
+.logo {
+    height: var(--height);
+    width: var(--width);
+}
+
+.primaryActions {
+    composes: col-start-1 from global;
+    composes: grid from global;
+    composes: grid-flow-col from global;
+    composes: justify-self-start from global;
+    composes: row-start-1 from global;
+    composes: self-center from global;
+}
+
+.logoContainer {
+    composes: col-start-2 from global;
+    composes: justify-self-center from global;
+
+    composes: lg_col-end-3 from global;
+    composes: lg_col-start-1 from global;
+    composes: lg_justify-self-start from global;
+    composes: lg_mr-8 from global;
+    composes: lg_row-start-1 from global;
+}
+
+.secondaryActions {
+    composes: col-start-3 from global;
+    composes: grid from global;
+    composes: grid-flow-col from global;
+    composes: items-center from global;
+    composes: justify-items-end from global;
+    composes: justify-self-end from global;
+    composes: w-max from global;
+
+    composes: lg_col-end-13 from global;
+    composes: lg_col-start-10 from global;
+    composes: lg_gap-x-4 from global;
+}
+
+.searchFallback {
+    composes: flex from global;
+    composes: justify-center from global;
+    composes: mb-2 from global;
+    composes: px-4 from global;
+}
+
+.input {
+    composes: input from '../TextInput/textInput.module.css';
+
+    @apply max-w-sm;
+}
+
+.loader,
+.loaderBefore,
+.loaderAfter {
+    --dot-size: 2em;
+    --dot-font-size: 6px;
+    --dot-shadow-offset: calc(-1 * var(--dot-size) + var(--dot-font-size));
+
+    composes: rounded-full from global;
+    width: var(--dot-size);
+    height: var(--dot-size);
+    animation: pulse 1.8s infinite ease-in-out;
+    animation-fill-mode: both;
+}
+
+.loader {
+    composes: mb-0 from global;
+    composes: mx-auto from global;
+    composes: relative from global;
+    composes: text-subtle from global;
+    font-size: var(--dot-font-size);
+    margin-top: var(--dot-shadow-offset);
+    transform: translateZ(0);
+    animation-delay: -0.16s;
+}
+
+.loaderBefore,
+.loaderAfter {
+    composes: content-empty from global;
+    composes: absolute from global;
+    composes: top-0 from global;
+}
+
+.loaderBefore {
+    composes: left-[-3.5em] from global;
+    composes: text-gray-100 from global;
+    animation-delay: -0.32s;
+}
+
+.loaderAfter {
+    composes: left-[3.5em] from global;
+    composes: text-gray-600 from global;
+}
+
+@keyframes pulse {
+    0%,
+    80%,
+    100% {
+        box-shadow: 0 var(--dot-size) 0 -1.3em;
+    }
+    40% {
+        box-shadow: 0 var(--dot-size) 0 0;
+    }
+}

package/src/overwrites/venia-ui/lib/components/Main/main.module.css

@@ -11,7 +11,7 @@
 
 .page {
     composes: md_max-w-screen-md from global;
-    composes: lg_max-w-[1210px] from global;
+    composes: lg_max-w-[1300px] from global;
     composes: mx-auto from global;
     composes: my-0 from global;
     composes: px-[15px] from global;

package/src/overwrites/venia-ui/lib/components/MegaMenu/submenu.module.css

@@ -11,7 +11,7 @@
 
 .submenuContainer {
     composes: w-full from global;
-    composes: max-w-[1210px] from global;
+    composes: max-w-[1300px] from global;
     composes: mx-[auto] from global;
     composes: gap-[15px] from global;
     composes: max-h-[50vh] from global;

package/src/overwrites/venia-ui/lib/components/ProductFullDetail/CustomAttributes/customAttributes.js

@@ -24,7 +24,7 @@ const CustomAttributes = props => {
                     const attributeContent = (
                         <li
                             key={currentAttribute.attribute_metadata.uid}
-                            className={cn(classes.listItem, '!text-[14px] py-1')}
+                            className={cn(classes.listItem, '!text-[14px] py-2')}
                         >
                             <AttributeType
                                 showLabels={showLabels}