@funnelsgrove/payments 0.1.5 → 0.1.7

package/dist/providers/stripe/ApplePaySubscriptionCheckoutSlot.d.ts

@@ -1,5 +1,5 @@
 import { type WalletSubscriptionCheckoutSlotProps } from './WalletSubscriptionCheckoutSlot.js';
-export type ApplePaySubscriptionCheckoutSlotProps = Omit<WalletSubscriptionCheckoutSlotProps, 'availabilityPaymentMethod' | 'expressCheckoutAllowed' | 'placeholderLabel' | 'renderPlaceholder'> & {
+export type ApplePaySubscriptionCheckoutSlotProps = Omit<WalletSubscriptionCheckoutSlotProps, 'availabilityPaymentMethod' | 'expressCheckoutAllowed' | 'placeholderLabel' | 'renderPlaceholder' | 'renderPreparingPlaceholder'> & {
     placeholderLabel?: string;
 };
 export declare function ApplePaySubscriptionCheckoutSlot({ placeholderLabel, ...slotProps }: ApplePaySubscriptionCheckoutSlotProps): import("react/jsx-runtime").JSX.Element;

package/dist/providers/stripe/ApplePaySubscriptionCheckoutSlot.js

@@ -13,9 +13,9 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { jsx as _jsx } from "react/jsx-runtime";
 import { ApplePaySubscribeButton } from '../../components/shared/ApplePaySubscribeButton.js';
 import { useApplePayExpressCheckoutAllowed } from '../../components/shared/SharedStripeCheckoutDialog.js';
-import { WalletSubscriptionCheckoutSlot, } from './WalletSubscriptionCheckoutSlot.js';
+import { WalletSubscriptionCheckoutLoadingPlaceholder, WalletSubscriptionCheckoutSlot, } from './WalletSubscriptionCheckoutSlot.js';
 export function ApplePaySubscriptionCheckoutSlot(_a) {
     var { placeholderLabel = 'Subscribe with Apple Pay' } = _a, slotProps = __rest(_a, ["placeholderLabel"]);
     const allowApplePayExpressCheckout = useApplePayExpressCheckoutAllowed();
-    return (_jsx(WalletSubscriptionCheckoutSlot, Object.assign({}, slotProps, { availabilityPaymentMethod: 'applePay', expressCheckoutAllowed: allowApplePayExpressCheckout, placeholderLabel: placeholderLabel, renderPlaceholder: (placeholderProps) => (_jsx(ApplePaySubscribeButton, Object.assign({}, placeholderProps))) })));
+    return (_jsx(WalletSubscriptionCheckoutSlot, Object.assign({}, slotProps, { availabilityPaymentMethod: 'applePay', expressCheckoutAllowed: allowApplePayExpressCheckout, placeholderLabel: placeholderLabel, renderPreparingPlaceholder: (placeholderProps) => (_jsx(WalletSubscriptionCheckoutLoadingPlaceholder, Object.assign({}, placeholderProps, { label: 'Loading Apple Pay' }))), renderPlaceholder: (placeholderProps) => (_jsx(ApplePaySubscribeButton, Object.assign({}, placeholderProps))) })));
 }

package/dist/providers/stripe/GooglePaySubscriptionCheckoutSlot.d.ts

@@ -1,6 +1,6 @@
 import type { StripeExpressCheckoutElementOptions } from '@stripe/stripe-js';
 import { type WalletSubscriptionCheckoutSlotProps } from './WalletSubscriptionCheckoutSlot.js';
-export type GooglePaySubscriptionCheckoutSlotProps = Omit<WalletSubscriptionCheckoutSlotProps, 'availabilityPaymentMethod' | 'options' | 'placeholderLabel' | 'renderPlaceholder'> & {
+export type GooglePaySubscriptionCheckoutSlotProps = Omit<WalletSubscriptionCheckoutSlotProps, 'availabilityPaymentMethod' | 'options' | 'placeholderLabel' | 'renderPlaceholder' | 'renderPreparingPlaceholder'> & {
     options?: StripeExpressCheckoutElementOptions;
     placeholderLabel?: string;
 };

package/dist/providers/stripe/GooglePaySubscriptionCheckoutSlot.js

@@ -12,7 +12,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx } from "react/jsx-runtime";
 import { GooglePaySubscribeButton } from '../../components/shared/GooglePaySubscribeButton.js';
-import { WalletSubscriptionCheckoutSlot, } from './WalletSubscriptionCheckoutSlot.js';
+import { WalletSubscriptionCheckoutLoadingPlaceholder, WalletSubscriptionCheckoutSlot, } from './WalletSubscriptionCheckoutSlot.js';
 const googlePayExpressCheckoutOptions = {
     buttonHeight: 55,
     buttonTheme: {
@@ -40,5 +40,5 @@ const googlePayExpressCheckoutOptions = {
 export function GooglePaySubscriptionCheckoutSlot(_a) {
     var _b, _c, _d, _e, _f, _g, _h, _j, _k;
     var { options, placeholderLabel = 'Subscribe with Google Pay' } = _a, slotProps = __rest(_a, ["options", "placeholderLabel"]);
-    return (_jsx(WalletSubscriptionCheckoutSlot, Object.assign({}, slotProps, { availabilityPaymentMethod: 'googlePay', options: Object.assign(Object.assign(Object.assign({}, googlePayExpressCheckoutOptions), (options !== null && options !== void 0 ? options : {})), { buttonTheme: Object.assign(Object.assign({}, ((_b = googlePayExpressCheckoutOptions.buttonTheme) !== null && _b !== void 0 ? _b : {})), ((_c = options === null || options === void 0 ? void 0 : options.buttonTheme) !== null && _c !== void 0 ? _c : {})), buttonType: Object.assign(Object.assign({}, ((_d = googlePayExpressCheckoutOptions.buttonType) !== null && _d !== void 0 ? _d : {})), ((_e = options === null || options === void 0 ? void 0 : options.buttonType) !== null && _e !== void 0 ? _e : {})), layout: Object.assign(Object.assign({}, ((_f = googlePayExpressCheckoutOptions.layout) !== null && _f !== void 0 ? _f : {})), ((_g = options === null || options === void 0 ? void 0 : options.layout) !== null && _g !== void 0 ? _g : {})), paymentMethods: Object.assign(Object.assign({}, ((_h = googlePayExpressCheckoutOptions.paymentMethods) !== null && _h !== void 0 ? _h : {})), ((_j = options === null || options === void 0 ? void 0 : options.paymentMethods) !== null && _j !== void 0 ? _j : {})), paymentMethodOrder: (_k = options === null || options === void 0 ? void 0 : options.paymentMethodOrder) !== null && _k !== void 0 ? _k : googlePayExpressCheckoutOptions.paymentMethodOrder }), placeholderLabel: placeholderLabel, renderPlaceholder: (placeholderProps) => (_jsx(GooglePaySubscribeButton, Object.assign({}, placeholderProps))) })));
+    return (_jsx(WalletSubscriptionCheckoutSlot, Object.assign({}, slotProps, { availabilityPaymentMethod: 'googlePay', options: Object.assign(Object.assign(Object.assign({}, googlePayExpressCheckoutOptions), (options !== null && options !== void 0 ? options : {})), { buttonTheme: Object.assign(Object.assign({}, ((_b = googlePayExpressCheckoutOptions.buttonTheme) !== null && _b !== void 0 ? _b : {})), ((_c = options === null || options === void 0 ? void 0 : options.buttonTheme) !== null && _c !== void 0 ? _c : {})), buttonType: Object.assign(Object.assign({}, ((_d = googlePayExpressCheckoutOptions.buttonType) !== null && _d !== void 0 ? _d : {})), ((_e = options === null || options === void 0 ? void 0 : options.buttonType) !== null && _e !== void 0 ? _e : {})), layout: Object.assign(Object.assign({}, ((_f = googlePayExpressCheckoutOptions.layout) !== null && _f !== void 0 ? _f : {})), ((_g = options === null || options === void 0 ? void 0 : options.layout) !== null && _g !== void 0 ? _g : {})), paymentMethods: Object.assign(Object.assign({}, ((_h = googlePayExpressCheckoutOptions.paymentMethods) !== null && _h !== void 0 ? _h : {})), ((_j = options === null || options === void 0 ? void 0 : options.paymentMethods) !== null && _j !== void 0 ? _j : {})), paymentMethodOrder: (_k = options === null || options === void 0 ? void 0 : options.paymentMethodOrder) !== null && _k !== void 0 ? _k : googlePayExpressCheckoutOptions.paymentMethodOrder }), placeholderLabel: placeholderLabel, renderPreparingPlaceholder: (placeholderProps) => (_jsx(WalletSubscriptionCheckoutLoadingPlaceholder, Object.assign({}, placeholderProps, { label: 'Loading Google Pay' }))), renderPlaceholder: (placeholderProps) => (_jsx(GooglePaySubscribeButton, Object.assign({}, placeholderProps))) })));
 }

package/dist/providers/stripe/WalletSubscriptionCheckoutSlot.d.ts

@@ -22,11 +22,13 @@ export type WalletSubscriptionCheckoutSlotProps = {
     onUnavailableClick?: () => Promise<void> | void;
     options?: StripeExpressCheckoutElementOptions;
     placeholderLabel: string;
+    renderPreparingPlaceholder?: (props: WalletPlaceholderButtonProps) => ReactNode;
     renderPlaceholder: (props: WalletPlaceholderButtonProps) => ReactNode;
     returnUrl: string;
     session: StripeSubscriptionCheckoutSession;
     summaryLabel: string;
     suspended?: boolean;
 };
-export declare function WalletSubscriptionCheckoutSlot({ amountCents, availabilityPaymentMethod, beforeConfirm, className, customerEmail, customerName, disabled, expressCheckoutAllowed, onAvailabilityChange, onError, onSuccess, onUnavailableClick, options, placeholderLabel, renderPlaceholder, returnUrl, session, summaryLabel, suspended, }: WalletSubscriptionCheckoutSlotProps): import("react/jsx-runtime").JSX.Element;
+export declare function WalletSubscriptionCheckoutLoadingPlaceholder({ className, label, }: Pick<WalletPlaceholderButtonProps, 'className' | 'label'>): import("react/jsx-runtime").JSX.Element;
+export declare function WalletSubscriptionCheckoutSlot({ amountCents, availabilityPaymentMethod, beforeConfirm, className, customerEmail, customerName, disabled, expressCheckoutAllowed, onAvailabilityChange, onError, onSuccess, onUnavailableClick, options, placeholderLabel, renderPreparingPlaceholder, renderPlaceholder, returnUrl, session, summaryLabel, suspended, }: WalletSubscriptionCheckoutSlotProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/providers/stripe/WalletSubscriptionCheckoutSlot.js

@@ -2,7 +2,15 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { StripeExpressCheckoutElement } from '../../components/shared/StripeExpressCheckoutElement.js';
-export function WalletSubscriptionCheckoutSlot({ amountCents, availabilityPaymentMethod, beforeConfirm, className, customerEmail, customerName, disabled = false, expressCheckoutAllowed = true, onAvailabilityChange, onError, onSuccess, onUnavailableClick, options, placeholderLabel, renderPlaceholder, returnUrl, session, summaryLabel, suspended = false, }) {
+export function WalletSubscriptionCheckoutLoadingPlaceholder({ className, label, }) {
+    return (_jsxs("div", { className: [
+            'wallet-subscription-checkout-slot__loading',
+            className !== null && className !== void 0 ? className : '',
+        ]
+            .filter(Boolean)
+            .join(' '), "aria-label": label, role: 'status', children: [_jsx("span", { className: 'wallet-subscription-checkout-slot__loading-bar' }), _jsx("style", { children: walletSubscriptionCheckoutLoadingPlaceholderStyles })] }));
+}
+export function WalletSubscriptionCheckoutSlot({ amountCents, availabilityPaymentMethod, beforeConfirm, className, customerEmail, customerName, disabled = false, expressCheckoutAllowed = true, onAvailabilityChange, onError, onSuccess, onUnavailableClick, options, placeholderLabel, renderPreparingPlaceholder, renderPlaceholder, returnUrl, session, summaryLabel, suspended = false, }) {
     const [walletAvailability, setWalletAvailability] = useState({
         available: null,
         intentKey: session.intentKey,
@@ -12,14 +20,16 @@ export function WalletSubscriptionCheckoutSlot({ amountCents, availabilityPaymen
     const walletAvailable = walletAvailability.intentKey === session.intentKey
         ? walletAvailability.available
         : null;
-    const shouldRenderPlaceholder = !suspended && expressCheckoutAllowed && walletAvailable === null;
     const shouldRenderExpressCheckout = !suspended &&
         expressCheckoutAllowed &&
         walletAvailable !== false &&
         Boolean(session.activeClientSecret) &&
         Boolean(session.stripePromise);
-    const placeholderBehindExpressCheckout = shouldRenderPlaceholder && shouldRenderExpressCheckout;
-    const placeholderIsPreparing = shouldRenderPlaceholder && !shouldRenderExpressCheckout;
+    const shouldRenderPlaceholder = !shouldRenderExpressCheckout &&
+        !suspended &&
+        expressCheckoutAllowed &&
+        walletAvailable === null;
+    const placeholderIsPreparing = shouldRenderPlaceholder;
     const markWalletUnavailable = useCallback((intentKey) => {
         setWalletAvailability({
             available: false,
@@ -86,12 +96,7 @@ export function WalletSubscriptionCheckoutSlot({ amountCents, availabilityPaymen
                     .filter(Boolean)
                     .join(' '), "aria-busy": placeholderIsPreparing || undefined, children: [shouldRenderExpressCheckout &&
                         session.activeClientSecret &&
-                        session.stripePromise ? (_jsx(StripeExpressCheckoutElement, { amountCents: amountCents, availabilityPaymentMethods: [availabilityPaymentMethod], beforeConfirm: beforeConfirm, className: className, clientSecret: session.activeClientSecret, customerEmail: customerEmail, customerName: customerName, onAvailabilityChange: handleAvailabilityChange, onError: handleError, onSuccess: onSuccess, options: options, returnUrl: returnUrl, stripePromise: session.stripePromise, summaryLabel: summaryLabel })) : null, shouldRenderPlaceholder ? (_jsx("div", { className: [
-                            'wallet-subscription-checkout-slot__placeholder',
-                            placeholderBehindExpressCheckout ? 'is-behind-express-checkout' : '',
-                        ]
-                            .filter(Boolean)
-                            .join(' '), children: renderPlaceholder({
+                        session.stripePromise ? (_jsx(StripeExpressCheckoutElement, { amountCents: amountCents, availabilityPaymentMethods: [availabilityPaymentMethod], beforeConfirm: beforeConfirm, className: className, clientSecret: session.activeClientSecret, customerEmail: customerEmail, customerName: customerName, onAvailabilityChange: handleAvailabilityChange, onError: handleError, onSuccess: onSuccess, options: options, returnUrl: returnUrl, stripePromise: session.stripePromise, summaryLabel: summaryLabel })) : null, shouldRenderPlaceholder ? (_jsx("div", { className: 'wallet-subscription-checkout-slot__placeholder', children: (renderPreparingPlaceholder !== null && renderPreparingPlaceholder !== void 0 ? renderPreparingPlaceholder : renderPlaceholder)({
                             className,
                             disabled: slotDisabled,
                             label: placeholderLabel,
@@ -115,8 +120,48 @@ const walletSubscriptionCheckoutSlotStyles = `
   inset: 0;
   z-index: 1;
 }
+`;
+const walletSubscriptionCheckoutLoadingPlaceholderStyles = `
+.wallet-subscription-checkout-slot__loading {
+  position: relative;
+  display: flex;
+  width: 100%;
+  min-height: var(--wallet-subscription-checkout-slot-min-height, 64px);
+  box-sizing: border-box;
+  align-items: center;
+  overflow: hidden;
+  border: 1px solid rgb(63 81 181 / 14%);
+  border-radius: 16px;
+  background: rgb(255 255 255 / 74%);
+}
+
+.wallet-subscription-checkout-slot__loading-bar {
+  position: absolute;
+  inset: 0;
+  background:
+    linear-gradient(
+      90deg,
+      rgb(255 255 255 / 0%) 0%,
+      rgb(255 255 255 / 68%) 42%,
+      rgb(255 255 255 / 0%) 82%
+    ),
+    linear-gradient(90deg, #e6f3fb 0%, #f6fbff 100%);
+  animation: wallet-subscription-checkout-slot-loading 1200ms ease-in-out infinite;
+}
+
+@keyframes wallet-subscription-checkout-slot-loading {
+  0% {
+    transform: translateX(-60%);
+  }
+
+  100% {
+    transform: translateX(60%);
+  }
+}
 
-.wallet-subscription-checkout-slot__placeholder.is-behind-express-checkout {
-  pointer-events: none;
+@media (prefers-reduced-motion: reduce) {
+  .wallet-subscription-checkout-slot__loading-bar {
+    animation: none;
+  }
 }
 `;

package/package.json

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