@riosst100/pwa-marketplace 3.1.8 → 3.2.0

package/i18n/en_US.json

@@ -516,5 +516,34 @@
     "Form.postalCode": "Postal Code is required",
     "Form.phonenumber": "Contact Number is required",
     "ProductOptions.productSize": "Fashion size {label}",
-    "productOptions.selectedSize": "Fashion size {label} button selected"
+    "productOptions.selectedSize": "Fashion size {label} button selected",
+    "messages.titleWithSeller": "Conversation with",
+    "messages.sidebar.title": "Messages",
+    "messages.compose.newMessage": "Create New Message",
+    "messages.loading": "Loading…",
+    "messages.noSubject": "No Subject",
+    "messages.createdAt": "Created:",
+    "messages.compose.header": "Create New Message",
+    "messages.compose.cancel": "Cancel",
+    "messages.compose.subjectPlaceholder": "Subject",
+    "messages.compose.contentPlaceholder": "Write a message to the seller…",
+    "messages.compose.send": "Send Message",
+    "messages.compose.sending": "Send Message...",
+    "messages.detail.status": "Status:",
+    "messages.detail.delete": "Delete Message",
+    "messages.detail.selectPrompt": "Select a message to view the conversation.",
+    "messages.reply.disabled.closed": "Conversation closed",
+    "messages.reply.disabled.done": "Conversation finished",
+    "messages.reply.disabled.generic": "Cannot send a reply",
+    "messages.reply.placeholder": "Write a reply…",
+    "messages.reply.send": "Send",
+    "messages.reply.sending": "Sending...",
+    "messages.status.closed": "Closed",
+    "messages.status.open": "Open",
+    "messages.status.processing": "Processing",
+    "messages.status.done": "Done",
+    "messages.loginRequired": "Please sign in to your account to send a message to the seller.",
+    "messages.messageSent": "Message sent successfully.",
+    "messages.replySent": "Reply sent successfully.",
+    "messages.messageDeleted": "Message deleted successfully."
 }

package/i18n/id_ID.json

@@ -517,5 +517,34 @@
     "Form.postalCode": "Postal Code is required",
     "Form.phonenumber": "Contact Number is required",
     "ProductOptions.productSize": "Fashion size {label}",
-    "productOptions.selectedSize": "Fashion size {label} button selected"
+    "productOptions.selectedSize": "Fashion size {label} button selected",
+    "messages.titleWithSeller": "Percakapan dengan",
+    "messages.sidebar.title": "Pesan",
+    "messages.compose.newMessage": "Buat Pesan Baru",
+    "messages.loading": "Memuat…",
+    "messages.noSubject": "Tanpa Subjek",
+    "messages.createdAt": "Dibuat:",
+    "messages.compose.header": "Buat Pesan Baru",
+    "messages.compose.cancel": "Batal",
+    "messages.compose.subjectPlaceholder": "Subjek",
+    "messages.compose.contentPlaceholder": "Tulis pesan untuk seller…",
+    "messages.compose.send": "Kirim Pesan",
+    "messages.compose.sending": "Mengirim Pesan...",
+    "messages.detail.status": "Status:",
+    "messages.detail.delete": "Hapus Pesan",
+    "messages.detail.selectPrompt": "Pilih pesan untuk melihat percakapan.",
+    "messages.reply.disabled.closed": "Percakapan ditutup",
+    "messages.reply.disabled.done": "Percakapan selesai",
+    "messages.reply.disabled.generic": "Tidak dapat mengirim balasan",
+    "messages.reply.placeholder": "Tulis balasan…",
+    "messages.reply.send": "Kirim",
+    "messages.reply.sending": "Mengirim...",
+    "messages.status.closed": "Closed",
+    "messages.status.open": "Open",
+    "messages.status.processing": "Processing",
+    "messages.status.done": "Done",
+    "messages.loginRequired": "Silakan masuk ke akun Anda untuk mengirim pesan ke seller.",
+    "messages.messageSent": "Pesan berhasil dikirim.",
+    "messages.replySent": "Balasan berhasil dikirim.",
+    "messages.messageDeleted": "Pesan berhasil dihapus."
 }

package/package.json

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

package/src/components/AboutUs/aboutUs.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import CMSPage from '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/RootComponents/CMS/cms';
+
+
+const AboutUs = () => {
+    return <CMSPage identifier="about-us" />
+}
+
+export default AboutUs;

package/src/components/AboutUs/index.js

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

package/src/components/AgeVerification/ageVerificationModal.js

@@ -0,0 +1,163 @@
+import React, { useEffect, useState } from 'react';
+import ReactDOM from 'react-dom';
+import modalClasses from '@riosst100/pwa-marketplace/src/components/AgeVerification/ageVerificationModal.module.css';
+import { AgeVerificationModalShimmer } from '@riosst100/pwa-marketplace/src/components/SellerCoupon';
+
+// Reuse day diff logic
+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;
+};
+
+// Simple portal root fallback
+const getPortalRoot = () => {
+    let root = document.getElementById('seller-coupon-portal');
+    if (!root) {
+        root = document.createElement('div');
+        root.id = 'seller-coupon-portal';
+        document.body.appendChild(root);
+    }
+    return root;
+};
+
+const AgeVerificationModal = ({
+    couponData,
+    couponError,
+    setCouponModalOpen,
+    couponModalOpen,
+    couponLoading,
+    isCopyAction,
+    triggerLabel = 'View Seller Coupons',
+    onSelectCoupon,
+    onTriggerRender, // optional custom trigger renderer
+    autoOpen = false, // auto open modal when mounted
+    closeOnClaim = true // close after claiming
+}) => {
+    // const [open, setOpen] = useState(false);
+    const [copied, setCopied] = useState(null);
+
+    const items = couponData?.sellerCoupons?.items || [];
+
+    const handleOpen = () => setCouponModalOpen(true);
+    const handleClose = () => setCouponModalOpen(false);
+
+    useEffect(() => {
+        if (!couponModalOpen) return;
+        const onKey = (e) => {
+            if (e.key === 'Escape') {
+                handleClose();
+            }
+        };
+        document.addEventListener('keydown', onKey);
+        return () => document.removeEventListener('keydown', onKey);
+    }, [couponModalOpen]);
+
+    const handleClaim = async (item) => {
+        try {
+            if (navigator?.clipboard?.writeText) {
+                await navigator.clipboard.writeText(item.code);
+            }
+        } catch (_) {
+            /* ignore */
+        }
+        console.log('item.code',item.code)
+        setCopied(item.code);
+        setTimeout(() => setCopied(null), 2000);
+        if (!isCopyAction) {
+            if (onSelectCoupon) onSelectCoupon(item);
+            if (closeOnClaim) handleClose();
+        }
+    };
+
+    // Auto open behavior
+    useEffect(() => {
+        if (autoOpen && !couponModalOpen) {
+            setCouponModalOpen(true);
+        }
+    }, [autoOpen, couponModalOpen]);
+
+    console.log('copied',copied)
+
+    const modal = couponModalOpen ? (
+        <div className={modalClasses.overlay} role="dialog" aria-modal="true" aria-label="Seller coupons list">
+            <div className={modalClasses.backdrop} onClick={handleClose} />
+            <div className={modalClasses.dialog}>
+                <div className={modalClasses.header}>
+                    <h2 className={modalClasses.title}>{isCopyAction ? 'Store Coupons' : 'Apply Coupon'}</h2>
+                    <button type="button" className={modalClasses.closeBtn} onClick={handleClose} aria-label="Close coupon modal">×</button>
+                </div>
+                <div className={modalClasses.body}>
+                    {couponLoading && <AgeVerificationModalShimmer />}
+                    {!couponLoading && couponError && <p className={modalClasses.metaText}>Failed to load coupons.</p>}
+                    {!couponLoading && !couponError && !items.length && <p className={modalClasses.metaText}>No coupons available.</p>}
+                    {!couponLoading && !couponError && items.length > 0 && (
+                        <div className={modalClasses.stack}>
+                            {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 key={key} className={modalClasses.card} role="group" aria-label={`Coupon ${item.code}`}>
+                                        <div className={modalClasses.perf} aria-hidden="true" />
+                                        <div className={modalClasses.content}>
+                                            <div className={modalClasses.title}>{title}</div>
+                                            <div className={modalClasses.subtext}>Code: <span className={modalClasses.code}>{item.code}</span></div>
+                                            <div className={modalClasses.expiry}>{expiryLabel}</div>
+                                        </div>
+                                        <div className={modalClasses.divider} aria-hidden="true" />
+                                        <div className={modalClasses.actions}>
+                                            {isCopyAction ? <button
+                                                type="button"
+                                                className={copied === item.code ? modalClasses.claimedBtn : modalClasses.claimBtn}
+                                                onClick={() => handleClaim(item)}
+                                                aria-label={`Claim coupon ${item.code}`}
+                                            >
+                                                {copied === item.code ? 'Copied' : 'Claim'}
+                                            </button> : 
+                                            <button
+                                                type="button"
+                                                className={copied === item.code ? modalClasses.claimedBtn : modalClasses.claimBtn}
+                                                onClick={() => handleClaim(item)}
+                                                aria-label={`Apply coupon ${item.code}`}
+                                            >
+                                                {copied === item.code ? 'Applied' : 'Apply'}
+                                            </button>}
+                                        </div>
+                                    </div>
+                                );
+                            })}
+                        </div>
+                    )}
+                </div>
+            </div>
+        </div>
+    ) : null;
+
+    const trigger = onTriggerRender
+        ? onTriggerRender({ couponModalOpen, setCouponModalOpen, handleOpen })
+        : (
+            <button
+                type="button"
+                className={modalClasses.triggerBtn}
+                onClick={handleOpen}
+                aria-haspopup="dialog"
+                aria-expanded={couponModalOpen}
+            >
+                {triggerLabel}
+            </button>
+        );
+
+    return <>{onTriggerRender ? trigger : trigger}{couponModalOpen ? ReactDOM.createPortal(modal, getPortalRoot()) : null}</>;
+};
+
+export default AgeVerificationModal;

package/src/components/AgeVerification/ageVerificationModal.module.css

@@ -0,0 +1,85 @@
+.overlay{
+    position:fixed;
+    inset:0;
+    z-index:1000;
+    display:flex;
+    align-items:flex-start;
+    justify-content:center;
+    padding:5vh 24px;
+    font-family:inherit
+}
+.backdrop{
+    position:absolute;
+    inset:0;
+    background:rgba(0,0,0,.4);
+    backdrop-filter:blur(2px)
+}
+.dialog{
+    position:relative;
+    background:#fff;
+    border-radius:12px;
+    box-shadow:0 8px 32px rgba(0,0,0,.25);
+    width:clamp(320px,80vw,370px);
+    max-height:90vh;
+    display:flex;
+    flex-direction:column
+}
+.header{
+    display:flex;
+    align-items:center;
+    justify-content:space-between;
+    padding:16px 20px;
+    border-bottom:1px solid #eee
+}
+.title{
+    font-size:20px;
+    font-weight:600;
+    margin:0;
+    color:#333
+}
+.closeBtn{
+    background:none;
+    border:none;
+    font-size:24px;
+    line-height:1;
+    cursor:pointer;
+    color:#777;
+    padding:4px 8px;
+    border-radius:6px
+}
+.closeBtn:hover{
+    background:#f5f5f5;
+    color:#222
+}
+.body{
+    padding:16px 20px;
+    overflow:auto
+}
+.triggerBtn{
+    background:#f76b1c;
+    color:#fff;
+    border:none;
+    padding:10px 18px;
+    border-radius:8px;
+    font-weight:600;
+    cursor:pointer
+}
+.triggerBtn:hover{
+    background:#f26313
+}
+/* Vertical stack wrapper for existing sellerCoupon card styles */
+.stack{
+    display:flex;
+    flex-direction:column;
+    gap:16px;
+    padding:4px 2px 12px;
+}
+@media (max-width:640px){
+    .dialog{
+        width:92vw;
+        padding-bottom:8px
+    }
+    .grid{
+        grid-template-columns:repeat(auto-fill,minmax(160px,1fr))
+    }
+}

package/src/components/AgeVerification/ageVerificationModal.shimmer.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import Shimmer from '@magento/venia-ui/lib/components/Shimmer';
+
+const AgeVerificationModal = props => {
+    return (
+        <>
+            <Shimmer width="100%" height="85.1px" />
+            <Shimmer width="100%" height="85.1px" />
+            <Shimmer width="100%" height="85.1px" />
+            <Shimmer width="100%" height="85.1px" />
+            <Shimmer width="100%" height="85.1px" />
+            <Shimmer width="100%" height="85.1px" />
+            <Shimmer width="100%" height="85.1px" />
+            <Shimmer width="100%" height="85.1px" />
+            <Shimmer width="100%" height="85.1px" />
+            <Shimmer width="100%" height="85.1px" />
+        </>
+    );
+};
+
+export default AgeVerificationModal;

package/src/components/AgeVerification/index.js

@@ -0,0 +1,2 @@
+export { default } from './ageVerificationModal';
+export { default as AgeVerificationModalShimmer } from './ageVerificationModal.shimmer';

package/src/components/AgeVerification/sellerCoupon.js

@@ -0,0 +1,119 @@
+import React, { useMemo, useState, useCallback } from 'react';
+import classes from '@riosst100/pwa-marketplace/src/components/AgeVerification/sellerCoupon.module.css';
+import SellerCouponCheckout from '@riosst100/pwa-marketplace/src/components/SellerCoupon/sellerCouponCheckout';
+
+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 '';
+        // return <div className={classes.container}><p className={classes.metaText}>Loading coupons...</p></div>;
+    }
+
+    if (couponError) {
+        return '';
+        // return <div className={classes.container}><p className={classes.metaText}>Failed to load coupons.</p></div>;
+    }
+
+    const items = couponData?.sellerCoupons?.items || [];
+
+    if (!items.length) {
+        return '';
+        // return <div className={classes.container}><p className={classes.metaText}>No coupons available.</p></div>;
+    }
+
+    const [copied, setCopied] = useState(null);
+    const [couponModalOpen, setCouponModalOpen] = useState(false);
+
+    const handleClaim = async (code) => {
+        try {
+            if (navigator?.clipboard?.writeText) {
+                await navigator.clipboard.writeText(code);
+            }
+        } catch (_) {
+            // ignore clipboard issues
+        }
+        setCopied(code);
+        setTimeout(() => setCopied(null), 2000);
+    };
+
+    const handleViewCoupons = useCallback(() => {
+        setCouponModalOpen(true);
+    }, [setCouponModalOpen]);
+
+    return (
+        <section className={classes.container} aria-label="Seller coupons">
+            <div className={classes.scroller}>
+                {items.slice(0, 3).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={copied === item.code ? classes.claimedBtn : classes.claimBtn}
+                                    onClick={() => handleClaim(item.code)}
+                                    aria-label={`Claim coupon ${item.code}`}
+                                >
+                                    {copied === item.code ? 'Copied' : 'Claim'}
+                                </button>
+                            </div>
+                        </div>
+                    );
+                })}
+                {couponModalOpen && (
+                    <SellerCouponCheckout
+                        couponData={couponData}
+                        couponLoading={couponLoading}
+                        couponError={couponError}
+                        autoOpen={true}
+                        closeOnClaim={true}
+                        couponModalOpen={couponModalOpen}
+                        setCouponModalOpen={setCouponModalOpen}
+                        onSelectCoupon={handleClaim}
+                        onTriggerRender={() => null}
+                        isCopyAction={true}
+                    />
+                )}
+                <div className={classes.viewAllCard} role="group" aria-label="View All Coupons">
+                    <div className={classes.actions}>
+                        <button
+                            type="button"
+                            className={classes.viewAllBtn}
+                            onClick={handleViewCoupons}
+                            aria-label="View All Coupons"
+                        >
+                            View All Coupons
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </section>
+    );
+};
+
+export default SellerCoupon;

package/src/components/AgeVerification/sellerCouponCheckout.js

@@ -0,0 +1,164 @@
+import React, { useEffect, useState } from 'react';
+import ReactDOM from 'react-dom';
+import listClasses from '@riosst100/pwa-marketplace/src/components/AgeVerification/sellerCoupon.module.css';
+import modalClasses from '@riosst100/pwa-marketplace/src/components/AgeVerification/sellerCouponCheckout.module.css';
+import { SellerCouponCheckoutShimmer } from '@riosst100/pwa-marketplace/src/components/SellerCoupon';
+
+// Reuse day diff logic
+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;
+};
+
+// Simple portal root fallback
+const getPortalRoot = () => {
+    let root = document.getElementById('seller-coupon-portal');
+    if (!root) {
+        root = document.createElement('div');
+        root.id = 'seller-coupon-portal';
+        document.body.appendChild(root);
+    }
+    return root;
+};
+
+const SellerCouponCheckout = ({
+    couponData,
+    couponError,
+    setCouponModalOpen,
+    couponModalOpen,
+    couponLoading,
+    isCopyAction,
+    triggerLabel = 'View Seller Coupons',
+    onSelectCoupon,
+    onTriggerRender, // optional custom trigger renderer
+    autoOpen = false, // auto open modal when mounted
+    closeOnClaim = true // close after claiming
+}) => {
+    // const [open, setOpen] = useState(false);
+    const [copied, setCopied] = useState(null);
+
+    const items = couponData?.sellerCoupons?.items || [];
+
+    const handleOpen = () => setCouponModalOpen(true);
+    const handleClose = () => setCouponModalOpen(false);
+
+    useEffect(() => {
+        if (!couponModalOpen) return;
+        const onKey = (e) => {
+            if (e.key === 'Escape') {
+                handleClose();
+            }
+        };
+        document.addEventListener('keydown', onKey);
+        return () => document.removeEventListener('keydown', onKey);
+    }, [couponModalOpen]);
+
+    const handleClaim = async (item) => {
+        try {
+            if (navigator?.clipboard?.writeText) {
+                await navigator.clipboard.writeText(item.code);
+            }
+        } catch (_) {
+            /* ignore */
+        }
+        console.log('item.code',item.code)
+        setCopied(item.code);
+        setTimeout(() => setCopied(null), 2000);
+        if (!isCopyAction) {
+            if (onSelectCoupon) onSelectCoupon(item);
+            if (closeOnClaim) handleClose();
+        }
+    };
+
+    // Auto open behavior
+    useEffect(() => {
+        if (autoOpen && !couponModalOpen) {
+            setCouponModalOpen(true);
+        }
+    }, [autoOpen, couponModalOpen]);
+
+    console.log('copied',copied)
+
+    const modal = couponModalOpen ? (
+        <div className={modalClasses.overlay} role="dialog" aria-modal="true" aria-label="Seller coupons list">
+            <div className={modalClasses.backdrop} onClick={handleClose} />
+            <div className={modalClasses.dialog}>
+                <div className={modalClasses.header}>
+                    <h2 className={modalClasses.title}>{isCopyAction ? 'Store Coupons' : 'Apply Coupon'}</h2>
+                    <button type="button" className={modalClasses.closeBtn} onClick={handleClose} aria-label="Close coupon modal">×</button>
+                </div>
+                <div className={modalClasses.body}>
+                    {couponLoading && <SellerCouponCheckoutShimmer />}
+                    {!couponLoading && couponError && <p className={listClasses.metaText}>Failed to load coupons.</p>}
+                    {!couponLoading && !couponError && !items.length && <p className={listClasses.metaText}>No coupons available.</p>}
+                    {!couponLoading && !couponError && items.length > 0 && (
+                        <div className={modalClasses.stack}>
+                            {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 key={key} className={listClasses.card} role="group" aria-label={`Coupon ${item.code}`}>
+                                        <div className={listClasses.perf} aria-hidden="true" />
+                                        <div className={listClasses.content}>
+                                            <div className={listClasses.title}>{title}</div>
+                                            <div className={listClasses.subtext}>Code: <span className={listClasses.code}>{item.code}</span></div>
+                                            <div className={listClasses.expiry}>{expiryLabel}</div>
+                                        </div>
+                                        <div className={listClasses.divider} aria-hidden="true" />
+                                        <div className={listClasses.actions}>
+                                            {isCopyAction ? <button
+                                                type="button"
+                                                className={copied === item.code ? listClasses.claimedBtn : listClasses.claimBtn}
+                                                onClick={() => handleClaim(item)}
+                                                aria-label={`Claim coupon ${item.code}`}
+                                            >
+                                                {copied === item.code ? 'Copied' : 'Claim'}
+                                            </button> : 
+                                            <button
+                                                type="button"
+                                                className={copied === item.code ? listClasses.claimedBtn : listClasses.claimBtn}
+                                                onClick={() => handleClaim(item)}
+                                                aria-label={`Apply coupon ${item.code}`}
+                                            >
+                                                {copied === item.code ? 'Applied' : 'Apply'}
+                                            </button>}
+                                        </div>
+                                    </div>
+                                );
+                            })}
+                        </div>
+                    )}
+                </div>
+            </div>
+        </div>
+    ) : null;
+
+    const trigger = onTriggerRender
+        ? onTriggerRender({ couponModalOpen, setCouponModalOpen, handleOpen })
+        : (
+            <button
+                type="button"
+                className={modalClasses.triggerBtn}
+                onClick={handleOpen}
+                aria-haspopup="dialog"
+                aria-expanded={couponModalOpen}
+            >
+                {triggerLabel}
+            </button>
+        );
+
+    return <>{onTriggerRender ? trigger : trigger}{couponModalOpen ? ReactDOM.createPortal(modal, getPortalRoot()) : null}</>;
+};
+
+export default SellerCouponCheckout;