@riosst100/pwa-marketplace 3.0.0 → 3.0.1

package/i18n/en_US.json

@@ -63,7 +63,7 @@
     "checkoutPage.additionalText": "You will also receive an email with the details and we will let you know when your order has shipped.",
     "checkoutPage.billingAddressSame": "Billing address same as shipping address",
     "checkoutPage.checkout": "Checkout",
-    "checkoutPage.couponCode": "Enter Coupon Code",
+    "checkoutPage.couponCode": "Apply Coupon Code",
     "checkoutPage.createAccount": "Create Account",
     "checkoutPage.editPaymentInformation": "Edit Payment Information",
     "checkoutPage.editShippingInfo": "Edit Shipping Information",

package/i18n/id_ID.json

@@ -64,7 +64,7 @@
     "checkoutPage.additionalText": "You will also receive an email with the details and we will let you know when your order has shipped.",
     "checkoutPage.billingAddressSame": "Billing address same as shipping address",
     "checkoutPage.checkout": "Checkout",
-    "checkoutPage.couponCode": "Enter Coupon Code",
+    "checkoutPage.couponCode": "Apply Coupon Code",
     "checkoutPage.createAccount": "Create Account",
     "checkoutPage.editPaymentInformation": "Edit Payment Information",
     "checkoutPage.editShippingInfo": "Edit Shipping Information",

package/package.json

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

package/src/componentOverrideMapping.js

@@ -1,4 +1,5 @@
 module.exports = componentOverrideMapping = {
+    ['@magento/peregrine/lib/talons/Header/useCartTrigger.js']: '@riosst100/pwa-marketplace/src/overwrites/peregrine/lib/talons/Header/useCartTrigger.js',
     [`@magento/venia-ui/lib/components/CartPage/PriceSummary/priceSummary.js`]: '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/components/CartPage/PriceSummary/priceSummary.js',
     [`@magento/peregrine/lib/talons/CartPage/PriceSummary/priceSummaryFragments.gql.js`]: '@riosst100/pwa-marketplace/src/overwrites/peregrine/lib/talons/CartPage/PriceSummary/priceSummaryFragments.gql.js',
     [`@magento/venia-ui/lib/components/Adapter/adapter.js`]: '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/components/Adapter/adapter.js',

package/src/components/CheckoutHeader/checkoutHeader.js

@@ -0,0 +1,162 @@
+import React, { Fragment, Suspense } from 'react';
+import { shape, string } from 'prop-types';
+import { Link, Route } from 'react-router-dom';
+import Icon from '@magento/venia-ui/lib/components/Icon';
+
+import AccountTrigger from '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/components/Header/accountTrigger';
+
+import CartTrigger from '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/components/Header/cartTrigger';
+import { Lock } from 'react-feather';
+import WishlistTrigger from '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/components/Header/wishlistTrigger';
+import NavTrigger from '@magento/venia-ui/lib/components/Header/navTrigger';
+import SearchTrigger from '@magento/venia-ui/lib/components/Header/searchTrigger';
+import OnlineIndicator from '@magento/venia-ui/lib/components/Header/onlineIndicator';
+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 './checkoutHeader.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';
+import CurrencySwitcher from '@riosst100/pwa-marketplace/src/components/CurrencySwitcher';
+import BecomeSellerLink from '@riosst100/pwa-marketplace/src/components/BecomeSellerLink/becomeSellerLink';
+import MegaMenu from '@magento/venia-ui/lib/components/MegaMenu';
+import PageLoadingIndicator from '@magento/venia-ui/lib/components/PageLoadingIndicator';
+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';
+
+const CheckoutHeader = props => {
+    const {
+        handleSearchTriggerClick,
+        hasBeenOffline,
+        isOnline,
+        isSearchOpen,
+        searchRef,
+        searchTriggerRef
+    } = useHeader();
+
+    const talonPropsLogo = useLogo();
+    const { data } = talonPropsLogo
+    const baseUrl = data?.storeConfig?.base_media_url;
+    const imageSource = data?.storeConfig?.header_logo_src;
+    const LogoImageSource = `${baseUrl}/logo/${imageSource}`;
+    const IMAGE_HEIGHT = data?.storeConfig?.logo_width || 28;
+    const IMAGE_WIDTH = data?.storeConfig?.logo_height || 190;
+    const IMAGE_ALT = data?.storeConfig?.logo_alt || 'TCG Collective';
+
+    const classes = useStyle(defaultClasses, props.classes);
+    const rootClass = isSearchOpen ? classes.open : classes.closed;
+
+    const searchBarFallback = (
+        <div className={classes.searchFallback} ref={searchRef}>
+            <div className={classes.input}>
+                <div className={classes.loader}>
+                    <div className={classes.loaderBefore} />
+                    <div className={classes.loaderAfter} />
+                </div>
+            </div>
+        </div>
+    );
+    // const searchBar = isSearchOpen ? (
+    //     <Suspense fallback={searchBarFallback}>
+    //         <Route>
+    //             <SearchBar isOpen={true} ref={searchRef} />
+    //         </Route>
+    //     </Suspense>
+    // ) : null;
+
+    const { formatMessage } = useIntl();
+    const title = formatMessage({ id: 'logo.title', defaultMessage: 'Venia' });
+
+    return (
+        <Fragment>
+            <PageLoadingIndicator absolute />
+            <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-[1000px] px-[0px] py-[15px] mx-[auto] flex justify-between items-center')}>
+                        <div className='flex items-center'>
+                            <NavTrigger />
+
+                            <Link
+                                aria-label={title}
+                                to={resourceUrl('/')}
+                                className={''}
+                                data-cy="Header-logoContainer"
+                            >
+                                {imageSource ? (
+                                    <Image
+                                        alt={IMAGE_ALT}
+                                        height={IMAGE_HEIGHT}
+                                        src={LogoImageSource}
+                                        width={IMAGE_WIDTH}
+                                        classes={{
+                                            container: 'logo-wrapper relative'
+                                        }}
+                                    />
+                                ) : (
+                                    <>
+                                        <div className='text-[14px]'><b>TCG Collective</b></div>
+                                        <small>Bringing Collectors Together</small>
+                                    </>
+                                )}
+
+                            </Link>
+                        </div>
+                        <div className='flex flex-auto max-w-[700px]'>
+                            <div className='flex w-full' style={{
+                                    "alignItems": "center",
+                                    "fontSize": "14px",
+                                    "fontWeight": "500",
+                                    "justifyContent": "center"
+                            }}>
+                                <Icon src={Lock} attrs={{ width: 16 }} /><span style={{
+                                    "paddingLeft": "5px"
+                                }}>Secure Checkout</span>
+                            </div>
+                        </div>
+                        <div className={cn(classes.secondaryActions, 'lg_gap-x-5 pl-5')}>
+                            {/* <SearchTrigger
+                                onClick={handleSearchTriggerClick}
+                                ref={searchTriggerRef}
+                            /> */}
+                            <CartTrigger />
+                        </div>
+                    </div>
+                </div>
+            </header>
+            <OnlineIndicator
+                hasBeenOffline={hasBeenOffline}
+                isOnline={isOnline}
+            />
+            <style jsx="true">
+                {`
+                    .logo-wrapper>img:first-child {
+                        height: ${IMAGE_HEIGHT}px;
+                    }
+                `}
+            </style>
+        </Fragment>
+    );
+};
+
+CheckoutHeader.propTypes = {
+    classes: shape({
+        closed: string,
+        logo: string,
+        open: string,
+        primaryActions: string,
+        secondaryActions: string,
+        toolbar: string,
+        switchers: string,
+        switchersContainer: string
+    })
+};
+
+export default CheckoutHeader;

package/src/components/CheckoutHeader/checkoutHeader.module.css

@@ -0,0 +1,171 @@
+.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 {
+    @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/components/CheckoutHeader/index.js

@@ -0,0 +1 @@
+export { default } from './checkoutHeader';

package/src/components/FavoriteSeller/AddToListButton/addToListButton.module.css

@@ -26,7 +26,7 @@
 }
 .root:hover svg {
     stroke: #fff !important;
-    fill: #fff !important;
+    /* fill: #fff !important; */
 }
 .root:hover span {
     color: #fff !important;
@@ -37,7 +37,7 @@
 }
 .root_selected:hover svg {
     stroke: #fff !important;
-    fill: #fff !important;
+    /* fill: #fff !important; */
 }
 .root_selected:hover span {
     color: #fff !important;

package/src/components/FilterTop/FilterBlockList/filterTopItem.module.css

@@ -10,5 +10,7 @@
     composes: text-colorDefault from global;
     composes: bg-white from global;
     composes: border-gray-100 from global;
+    composes: hover_shadow-type-1 from global;
+    composes: cursor-pointer from global;
     border-radius: 5px;
 }

package/src/components/SellerCoupon/index.js

@@ -0,0 +1 @@
+export { default } from './sellerCoupon';

package/src/components/SellerCoupon/sellerCoupon.js

@@ -0,0 +1,84 @@
+import React, { useMemo, useState } from 'react';
+import classes from './sellerCoupon.module.css';
+
+const dayDiff = (toDate) => {
+    if (!toDate) return null;
+    const end = new Date(toDate);
+    if (Number.isNaN(end.getTime())) return null;
+    const now = new Date();
+    const diffMs = end.setHours(23, 59, 59, 999) - now.getTime();
+    const diffDays = Math.ceil(diffMs / (1000 * 60 * 60 * 24));
+    return diffDays;
+};
+
+const SellerCoupon = ({ couponData, couponError, couponLoading }) => {
+    if (couponLoading) {
+        return <div className={classes.container}><p className={classes.metaText}>Loading coupons...</p></div>;
+    }
+
+    if (couponError) {
+        return <div className={classes.container}><p className={classes.metaText}>Failed to load coupons.</p></div>;
+    }
+
+    const items = couponData?.sellerCoupons?.items || [];
+
+    if (!items.length) {
+        return <div className={classes.container}><p className={classes.metaText}>No coupons available.</p></div>;
+    }
+
+    const [copied, setCopied] = useState(null);
+
+    const handleClaim = async (code) => {
+        try {
+            if (navigator?.clipboard?.writeText) {
+                await navigator.clipboard.writeText(code);
+            }
+        } catch (_) {
+            // ignore clipboard issues
+        }
+        setCopied(code);
+        setTimeout(() => setCopied(null), 2000);
+    };
+
+    return (
+        <section className={classes.container} aria-label="Seller coupons">
+            <div className={classes.scroller}>
+                {items.map(item => {
+                    const key = item.couponcode_id || item.coupon_id || item.code;
+                    const daysLeft = dayDiff(item.to_date);
+                    const expiryLabel = daysLeft === null
+                        ? 'No expiry'
+                        : daysLeft <= 0
+                            ? 'Ends today'
+                            : `Ends in ${daysLeft} day${daysLeft > 1 ? 's' : ''}`;
+
+                    const title = item.description || item.name || `Discount ${item.discount_amount || ''}`;
+
+                    return (
+                        <div className={classes.card} key={key} role="group" aria-label={`Coupon ${item.code}`}>
+                            <div className={classes.perf} aria-hidden="true" />
+                            <div className={classes.content}>
+                                <div className={classes.title}>{title}</div>
+                                <div className={classes.subtext}>Code: <span className={classes.code}>{item.code}</span></div>
+                                <div className={classes.expiry}>{expiryLabel}</div>
+                            </div>
+                            <div className={classes.divider} aria-hidden="true" />
+                            <div className={classes.actions}>
+                                <button
+                                    type="button"
+                                    className={classes.claimBtn}
+                                    onClick={() => handleClaim(item.code)}
+                                    aria-label={`Claim coupon ${item.code}`}
+                                >
+                                    {copied === item.code ? 'Copied' : 'Claim'}
+                                </button>
+                            </div>
+                        </div>
+                    );
+                })}
+            </div>
+        </section>
+    );
+};
+
+export default SellerCoupon;

package/src/components/SellerCoupon/sellerCoupon.module.css

@@ -0,0 +1,110 @@
+.container{
+    margin:16px 0;
+    padding:0 8px;
+}
+.heading{
+    font-size:18px;
+    font-weight:600;
+    margin:0 0 8px;
+    color:#111
+}
+.metaText{
+    color:#666;
+    margin:0;
+}
+.scroller{
+    display:flex;
+    gap:16px;
+    overflow-x:auto;
+    padding:8px 4px 12px;
+    scroll-snap-type:x mandatory;
+}
+.card{
+    position:relative;
+    background:#fff8f1;
+    border:1px solid #ffb891;
+    border-left:none;
+    min-width:260px;
+    max-width:320px;
+    display:flex;
+    align-items:stretch;
+    padding:0 12px 0 24px;
+    scroll-snap-align:start;
+    overflow:hidden;
+    --border-color:#ffb891;
+}
+.perf{
+        position:absolute;
+        inset:0 auto 0 0;
+        width:4px;
+        background:#fff;
+        /* border-top-left-radius:8px;
+        border-bottom-left-radius:8px; */
+        pointer-events:none;
+}
+.card::before{
+    content:"";
+    position:absolute;
+    top:0;bottom:0;left:0px;
+    z-index:9;
+    width:1px;
+    background:repeating-linear-gradient(to bottom,#ffb891 0,#ffb891 0px,transparent 6px,transparent 10px);
+}
+.perf:before{
+        content:"";
+        position:absolute;
+        inset:0;
+        background:
+            radial-gradient(circle at 0 .375rem, transparent 0, transparent .1875rem, var(--border-color) .1875rem, var(--border-color) .25rem, transparent .25rem) repeat-y;
+        background-size:1rem 0.66rem;
+        background-position:0 0;
+}
+.content{
+    flex:1 1 auto;
+    padding:10px 12px 10px 0;
+    display:flex;
+    flex-direction:column;
+    justify-content:center;
+}
+.title{
+    color:#f76b1c;
+    font-weight:700;
+    margin-bottom:4px;
+}
+.subtext{
+    color:#444;
+    font-size:13px;
+    margin-bottom:4px;
+}
+.code{
+    font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
+    font-weight:600;
+}
+.expiry{
+    color:#a94442;
+    font-size:12px;
+}
+.actions{
+    display:flex;
+    align-items:center;
+    justify-content:center;
+    padding:10px 0;
+}
+.claimBtn{
+    background: #f76b1c;
+    color:#fff;
+    border:none;
+    border-radius:6px;
+    padding:8px 18px;
+    font-weight:600;
+    cursor:pointer;
+}
+.claimBtn:hover{
+    background:#f26313;
+}
+.divider{
+    width:1px;
+    background:repeating-linear-gradient(to bottom,#ffb891 0,#ffb891 5px,transparent 5px,transparent 10px);
+    align-self:stretch;
+    margin:0 12px 0 4px;
+}