@funnelsgrove/payments 0.1.45 → 0.1.46

package/dist/components/shared/SharedStripeCheckoutV2Dialog.js

@@ -50,6 +50,10 @@ const formatCountdown = (remainingSeconds) => {
     return `${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`;
 };
 const getFixedSupportedBillingCountry = (supportedCountries) => supportedCountries.length === 1 ? supportedCountries[0] : null;
+const checkoutCountryLabels = {
+    US: 'United States',
+};
+const getCheckoutCountryLabel = (countryCode) => { var _a; return (_a = checkoutCountryLabels[countryCode]) !== null && _a !== void 0 ? _a : countryCode; };
 function getFriendlyCardErrorMessage(error) {
     return error instanceof Error && error.message
         ? error.message
@@ -70,6 +74,9 @@ function SharedStripeCheckoutV2Form({ amountCents, buttonColor, cardSubmitLabel,
     const [emailDraft, setEmailDraft] = useState(initialCustomerEmail);
     const normalizedSupportedCountries = useMemo(() => normalizeSupportedCheckoutCountries(supportedCountries), [supportedCountries]);
     const fixedBillingCountry = getFixedSupportedBillingCountry(normalizedSupportedCountries);
+    const fixedBillingCountryLabel = fixedBillingCountry
+        ? getCheckoutCountryLabel(fixedBillingCountry)
+        : null;
     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);
@@ -297,7 +304,7 @@ function SharedStripeCheckoutV2Form({ amountCents, buttonColor, cardSubmitLabel,
                                                         }
                                                         setEmailDraft(event.target.value);
                                                         onCustomerEmailChange === null || onCustomerEmailChange === void 0 ? void 0 : onCustomerEmailChange(event.target.value);
-                                                    } }) })] }), _jsx(PaymentElement, { options: paymentElementOptions, onChange: handlePaymentElementChange })] }), 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] })] })] })] }));
+                                                    } }) })] }), _jsx(PaymentElement, { options: paymentElementOptions, onChange: handlePaymentElementChange }), fixedBillingCountry && fixedBillingCountryLabel ? (_jsxs("label", { className: 'shared-checkout-v2-country-field', children: [_jsx("span", { className: 'shared-checkout-v2-country-label', children: "Country" }), _jsx("span", { className: 'shared-checkout-v2-country-control', children: _jsx("select", { "aria-label": 'Country', className: 'shared-checkout-v2-country-select', value: fixedBillingCountry, onChange: () => setBillingCountry(fixedBillingCountry), children: _jsx("option", { value: fixedBillingCountry, children: fixedBillingCountryLabel }) }) })] })) : null] }), 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 { checkoutAnalytics, checkoutSessionId, clientSecret, onClose, stripePromise, supportedCountries } = _a, props = __rest(_a, ["checkoutAnalytics", "checkoutSessionId", "clientSecret", "onClose", "stripePromise", "supportedCountries"]);
@@ -813,6 +820,58 @@ const sharedStripeCheckoutV2Styles = `
   box-shadow: none;
 }
 
+.shared-checkout-v2-country-field {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  gap: 7px;
+  margin: 14px 0 0;
+  color: #303136;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 1.2;
+}
+
+.shared-checkout-v2-country-label {
+  padding: 0 14px;
+}
+
+.shared-checkout-v2-country-control {
+  position: relative;
+  display: block;
+}
+
+.shared-checkout-v2-country-control::after {
+  position: absolute;
+  right: 17px;
+  top: 50%;
+  width: 8px;
+  height: 8px;
+  border-right: 2px solid #6f7380;
+  border-bottom: 2px solid #6f7380;
+  content: '';
+  pointer-events: none;
+  transform: translateY(-65%) rotate(45deg);
+}
+
+.shared-checkout-v2-country-select {
+  width: 100%;
+  min-height: 50px;
+  box-sizing: border-box;
+  appearance: none;
+  border: 1px solid #dedede;
+  border-radius: 0;
+  background: #fff;
+  box-shadow: 0 1px 2px rgb(16 24 40 / 8%);
+  color: #303136;
+  font: inherit;
+  font-size: 18px;
+  font-weight: 400;
+  line-height: 1.2;
+  outline: none;
+  padding: 0 44px 0 14px;
+}
+
 .shared-checkout-v2-error {
   margin: 0;
   color: #c43737;

package/package.json

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