@funnelsgrove/payments 0.1.8 → 0.1.10

package/dist/components/shared/SharedStripeCheckoutV2Dialog.js

@@ -31,7 +31,7 @@ function getFriendlyCardErrorMessage(error) {
         ? error.message
         : 'Payment failed. Please review your card details and try again.';
 }
-function SharedStripeCheckoutV2Form({ amountCents, buttonColor, cardSubmitLabel, closeAriaLabel, countdownLabel, customerEmail, customerEmailEditable = false, customerEmailLabel = 'Email', customerEmailPlaceholder = 'Enter your email', customerEmailInvalidMessage = 'Enter a valid email address.', customerName, discountAmountLabel, discountLabel, discountPercent, initialWalletAvailable, nameOnCardPlaceholder = 'Name on card', onClose, onCustomerEmailChange, onCustomerEmailCommit, onError, onSuccess, paymentMethodLabels = defaultPaymentMethodLabels, promoActive, processingLabel, promoCode, promoCodeLabel, remainingSeconds, returnUrl, savedLabel, secureLabel, satisfactionLabel, satisfactionPercent, summaryLabel, themeColor, title, totalLabel, totalValue, walletButtonLabel, originalPriceLabel, originalPriceValue, }) {
+function SharedStripeCheckoutV2Form({ amountCents, buttonColor, cardSubmitLabel, closeAriaLabel, countdownLabel, customerEmail, customerEmailEditable = false, customerEmailLabel = 'Email', customerEmailPlaceholder = 'Enter your email', customerEmailInvalidMessage = 'Enter a valid email address.', customerName, discountAmountLabel, discountLabel, discountPercent, initialWalletAvailable, onClose, onCustomerEmailChange, onCustomerEmailCommit, onError, onSuccess, paymentMethodLabels = defaultPaymentMethodLabels, promoActive, processingLabel, promoCode, promoCodeLabel, remainingSeconds, returnUrl, savedLabel, secureLabel, satisfactionLabel, satisfactionPercent, summaryLabel, themeColor, title, totalLabel, totalValue, walletButtonLabel, originalPriceLabel, originalPriceValue, }) {
     const checkoutState = useCheckout();
     const walletPaymentMethods = usePlatformWalletPaymentMethods();
     const [selectedMethod, setSelectedMethod] = useState('wallet');
@@ -41,16 +41,21 @@ function SharedStripeCheckoutV2Form({ amountCents, buttonColor, cardSubmitLabel,
         : walletAvailable;
     const [submitting, setSubmitting] = useState(false);
     const [error, setError] = useState(null);
-    const [emailDraft, setEmailDraft] = useState((customerEmail === null || customerEmail === void 0 ? void 0 : customerEmail.trim()) || '');
-    const [nameOnCard, setNameOnCard] = useState((customerName === null || customerName === void 0 ? void 0 : customerName.trim()) || '');
+    const initialCustomerEmail = (customerEmail === null || customerEmail === void 0 ? void 0 : customerEmail.trim()) || '';
+    const [emailDraft, setEmailDraft] = useState(initialCustomerEmail);
     const cardBrandLabels = useMemo(() => paymentMethodLabels.length > 0 ? paymentMethodLabels : defaultPaymentMethodLabels, [paymentMethodLabels]);
     const normalizedPromoCode = promoCode.trim();
     const showPromo = promoActive !== null && promoActive !== void 0 ? promoActive : (discountPercent > 0 && normalizedPromoCode.length > 0);
     const countdownValue = formatCountdown(remainingSeconds);
-    const initialCustomerEmail = (customerEmail === null || customerEmail === void 0 ? void 0 : customerEmail.trim()) || '';
     const resolvedCustomerEmail = customerEmailEditable
         ? emailDraft.trim() || initialCustomerEmail
         : initialCustomerEmail;
+    const emailFieldClassName = [
+        'shared-checkout-v2-email-field',
+        customerEmailEditable ? '' : 'is-disabled',
+    ]
+        .filter(Boolean)
+        .join(' ');
     const checkoutStyle = {
         '--shared-checkout-v2-theme-color': themeColor,
         '--shared-checkout-v2-button-color': buttonColor,
@@ -72,7 +77,6 @@ function SharedStripeCheckoutV2Form({ amountCents, buttonColor, cardSubmitLabel,
                 applePay: 'subscribe',
                 googlePay: 'subscribe',
             },
-            emailRequired: true,
             layout: {
                 maxColumns: 1,
                 maxRows: 2,
@@ -91,7 +95,21 @@ function SharedStripeCheckoutV2Form({ amountCents, buttonColor, cardSubmitLabel,
     }, [walletPaymentMethods]);
     const paymentElementOptions = useMemo(() => {
         return {
-            layout: 'tabs',
+            fields: {
+                billingDetails: {
+                    name: 'never',
+                    email: 'never',
+                    address: {
+                        country: 'auto',
+                    },
+                },
+            },
+            layout: {
+                type: 'accordion',
+                defaultCollapsed: false,
+                radios: false,
+                spacedAccordionItems: false,
+            },
             wallets: {
                 applePay: 'never',
                 googlePay: 'never',
@@ -115,6 +133,11 @@ function SharedStripeCheckoutV2Form({ amountCents, buttonColor, cardSubmitLabel,
             setSelectedMethod('card');
         }
     };
+    useEffect(() => {
+        if (!customerEmailEditable) {
+            setEmailDraft(initialCustomerEmail);
+        }
+    }, [customerEmailEditable, initialCustomerEmail]);
     useEffect(() => {
         if (effectiveSelectedMethod !== 'card' || typeof window === 'undefined') {
             return;
@@ -213,10 +236,13 @@ function SharedStripeCheckoutV2Form({ amountCents, buttonColor, cardSubmitLabel,
                             effectiveSelectedMethod === 'card' ? 'is-visible' : '',
                         ]
                             .filter(Boolean)
-                            .join(' '), children: [customerEmailEditable ? (_jsxs("label", { className: 'shared-checkout-v2-email-field', children: [_jsx("span", { children: customerEmailLabel }), _jsx("input", { type: 'email', autoComplete: 'email', className: 'shared-checkout-v2-email-input', inputMode: 'email', value: emailDraft, placeholder: customerEmailPlaceholder, onChange: (event) => {
+                            .join(' '), children: [_jsxs("label", { className: emailFieldClassName, children: [_jsx("span", { children: customerEmailLabel }), _jsx("input", { type: 'email', autoComplete: 'email', className: 'shared-checkout-v2-email-input', disabled: !customerEmailEditable, inputMode: 'email', readOnly: !customerEmailEditable, value: emailDraft, placeholder: customerEmailPlaceholder, onChange: (event) => {
+                                            if (!customerEmailEditable) {
+                                                return;
+                                            }
                                             setEmailDraft(event.target.value);
                                             onCustomerEmailChange === null || onCustomerEmailChange === void 0 ? void 0 : onCustomerEmailChange(event.target.value);
-                                        } })] })) : null, _jsx("div", { className: 'shared-checkout-v2-card-box', children: _jsx(PaymentElement, { options: paymentElementOptions }) }), _jsx("input", { type: 'text', autoComplete: 'cc-name', className: 'shared-checkout-v2-name-input', value: nameOnCard, placeholder: nameOnCardPlaceholder, onChange: (event) => setNameOnCard(event.target.value) }), visibleError ? _jsx("p", { className: 'shared-checkout-v2-error', children: visibleError }) : null, _jsxs("button", { type: 'submit', className: 'shared-checkout-v2-card-submit', disabled: submitting, children: [_jsx(SecurityLockIcon, { className: 'shared-checkout-v2-card-submit-icon' }), submitting ? processingLabel : cardSubmitLabel] }), _jsx("div", { className: 'shared-checkout-v2-card-brands', "aria-hidden": 'true', children: cardBrandLabels.map((label) => (_jsx(PaymentBrandMark, { label: label, className: 'shared-checkout-v2-card-brand' }, label))) }), _jsxs("p", { className: 'shared-checkout-v2-secure-pill', children: [_jsx(SecurityLockIcon, { className: 'shared-checkout-v2-secure-pill-icon' }), secureLabel] })] })] })] }));
+                                        } })] }), _jsx("div", { className: 'shared-checkout-v2-card-box', children: _jsx(PaymentElement, { options: paymentElementOptions }) }), visibleError ? _jsx("p", { className: 'shared-checkout-v2-error', children: visibleError }) : null, _jsxs("button", { type: 'submit', className: 'shared-checkout-v2-card-submit', disabled: submitting, children: [_jsx(SecurityLockIcon, { className: 'shared-checkout-v2-card-submit-icon' }), submitting ? processingLabel : cardSubmitLabel] }), _jsx("div", { className: 'shared-checkout-v2-card-brands', "aria-hidden": 'true', children: cardBrandLabels.map((label) => (_jsx(PaymentBrandMark, { label: label, className: 'shared-checkout-v2-card-brand' }, label))) }), _jsxs("p", { className: 'shared-checkout-v2-secure-pill shared-checkout-v2-secure-pill--card', children: [_jsx(SecurityLockIcon, { className: 'shared-checkout-v2-secure-pill-icon' }), secureLabel] })] })] })] }));
 }
 export function SharedStripeCheckoutV2Dialog(_a) {
     var { clientSecret, onClose, stripePromise } = _a, props = __rest(_a, ["clientSecret", "onClose", "stripePromise"]);
@@ -625,8 +651,11 @@ const sharedStripeCheckoutV2Styles = `
 }
 
 .shared-checkout-v2-card-panel {
+  position: relative;
   gap: 10px;
-  padding: 2px 15px 5px;
+  margin-bottom: 42px;
+  background: #f2f2f3;
+  padding: 16px 15px 58px;
 }
 
 .shared-checkout-v2-wallet-panel.is-visible,
@@ -644,92 +673,56 @@ const sharedStripeCheckoutV2Styles = `
 }
 
 .shared-checkout-v2-email-field {
-  display: grid;
-  gap: 7px;
-  color: #25272a;
-  font-size: 13px;
-  font-weight: 800;
-}
-
-.shared-checkout-v2-email-input,
-.shared-checkout-v2-name-input {
-  width: 100%;
-  min-height: 56px;
+  min-height: 64px;
   box-sizing: border-box;
-  border: 1px solid #8f94a0;
-  border-radius: 14px;
-  background: #f6f7fc;
-  padding: 0 24px;
-  color: #303136;
-  font: inherit;
-  font-size: 19px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  border: 1px solid #dadde4;
+  border-radius: 6px;
+  background: #fff;
+  padding: 8px 14px;
+  box-shadow: 0 1px 2px rgb(16 24 40 / 10%);
+  color: #647087;
+  font-size: 14px;
   font-weight: 500;
-  outline: none;
-}
-
-.shared-checkout-v2-email-input::placeholder,
-.shared-checkout-v2-name-input::placeholder {
-  color: #8c909a;
-}
-
-.shared-checkout-v2-card-box {
-  overflow: hidden;
-  border: 1px solid #8f94a0;
-  border-radius: 14px;
-  background: #f6f7fc;
+  line-height: 1;
 }
 
-.shared-checkout-v2-card-number,
-.shared-checkout-v2-card-half {
-  position: relative;
-  min-height: 56px;
-  box-sizing: border-box;
-  display: flex;
-  align-items: center;
-  padding: 0 24px;
+.shared-checkout-v2-email-field.is-disabled {
+  cursor: default;
 }
 
-.shared-checkout-v2-card-number > div,
-.shared-checkout-v2-card-half > div {
-  position: relative;
-  z-index: 1;
+.shared-checkout-v2-email-input {
   width: 100%;
+  min-height: 30px;
+  box-sizing: border-box;
+  border: 0;
+  background: transparent;
+  padding: 0;
+  color: #303136;
+  font: inherit;
+  font-size: 20px;
+  font-weight: 400;
+  line-height: 1.2;
+  outline: none;
 }
 
-.shared-checkout-v2-card-number {
-  border-bottom: 1px solid #8f94a0;
-}
-
-.shared-checkout-v2-card-row {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
-}
-
-.shared-checkout-v2-card-half:first-child {
-  border-right: 1px solid #8f94a0;
-}
-
-.shared-checkout-v2-card-half--cvc {
-  justify-content: space-between;
-  gap: 10px;
+.shared-checkout-v2-email-input:disabled {
+  color: #74767c;
+  opacity: 1;
+  -webkit-text-fill-color: #74767c;
 }
 
-.shared-checkout-v2-card-half--cvc > div {
-  flex: 1;
+.shared-checkout-v2-email-input::placeholder {
+  color: #8c909a;
 }
 
-.shared-checkout-v2-cvc-info {
-  width: 24px;
-  height: 24px;
-  border-radius: 999px;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  background: #8c909a;
-  color: #fff;
-  font-size: 16px;
-  font-weight: 900;
-  line-height: 1;
+.shared-checkout-v2-card-box {
+  overflow: visible;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
 }
 
 .shared-checkout-v2-error {
@@ -781,6 +774,14 @@ const sharedStripeCheckoutV2Styles = `
   height: 25px;
 }
 
+.shared-checkout-v2-secure-pill--card {
+  position: absolute;
+  left: 50%;
+  bottom: -33px;
+  transform: translateX(-50%);
+  white-space: nowrap;
+}
+
 .shared-checkout-v2-sr-only {
   position: absolute;
   width: 1px;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@funnelsgrove/payments",
-  "version": "0.1.8",
+  "version": "0.1.10",
   "type": "module",
   "private": false,
   "main": "./dist/index.js",