@rokt/dcui-orchestrator 1.0.0 → 1.0.1-rc.1

package/dist/{modules/instant-purchase/src/components/catalog-device-pay-button → libraries/dcui-components/src/components/apple-pay-button}/apple-pay-button.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { CatalogDevicePayButtonModel } from '@rokt/dcui-layout-schema';
+import type { ThemeColor } from '@rokt/dcui-layout-schema';
 /**
  * Renders an Apple Pay button using Apple's native CSS styling.
  * Returns null if the browser does not support `-webkit-appearance: -apple-pay-button`.
@@ -11,12 +11,36 @@ export type ThemedApplePayButtonStyle = {
     dark?: ApplePayButtonStyle;
 };
 export type ButtonStyleInput = ApplePayButtonStyle | ThemedApplePayButtonStyle;
+/**
+ * Structural shape of the `own` style hints this module reads. Declared
+ * structurally rather than against one schema node so both the layout-variant
+ * `CatalogDevicePayButton` and a child-layout escape hatch can pass their own
+ * schema without either owning the other's types.
+ */
+export type ApplePayButtonStyleSource = {
+    styles?: {
+        elements?: {
+            own?: ReadonlyArray<{
+                default?: {
+                    background?: {
+                        backgroundColor?: ThemeColor | null;
+                    } | null;
+                    border?: {
+                        borderWidth?: unknown;
+                        borderStyle?: unknown;
+                    } | null;
+                } | null;
+            } | null> | null;
+        } | null;
+    } | null;
+};
 type ApplePayButtonProps = {
     buttonStyle?: ButtonStyleInput;
     className?: string;
     disabled?: boolean;
     onClick?: React.MouseEventHandler<HTMLButtonElement>;
     tabIndex?: number;
+    testId?: string;
 };
 /**
  * Derives an Apple Pay button style from the schema's `own` background and
@@ -31,6 +55,6 @@ type ApplePayButtonProps = {
  * Breakpoint blocks merge with last-non-null-wins. An unrecognized `dark` is
  * dropped, so the `light` style applies in both modes.
  */
-export declare function deriveApplePayButtonStyle<C, P>(schema: CatalogDevicePayButtonModel<C, P>): ThemedApplePayButtonStyle | undefined;
+export declare function deriveApplePayButtonStyle(schema: ApplePayButtonStyleSource): ThemedApplePayButtonStyle | undefined;
 export declare const ApplePayButton: React.ForwardRefExoticComponent<ApplePayButtonProps & React.RefAttributes<HTMLButtonElement>>;
 export {};

package/dist/libraries/dcui-components/src/components/apple-pay-button/index.d.ts

@@ -0,0 +1 @@
+export * from './apple-pay-button';

package/dist/libraries/dcui-components/src/components/index.d.ts

@@ -30,3 +30,4 @@ export * from './layout-timer';
 export * from './form';
 export * from './text-input';
 export * from './action-button';
+export * from './apple-pay-button';

package/dist/libraries/domain/src/behaviors/child-layout-bridge.d.ts

@@ -14,6 +14,7 @@ export declare const CHILD_LAYOUT_BRIDGE_EVENTS: {
     readonly STATE_SYNC: "CHILD_LAYOUT/STATE_SYNC";
     /** child → host: bridge sagas are subscribed; reply with a fresh snapshot */
     readonly READY: "CHILD_LAYOUT/READY";
+    readonly REQUEST_DEVICE_PAY: "CHILD_LAYOUT/REQUEST_DEVICE_PAY";
 };
 export declare const CHILD_LAYOUT_BRIDGE_VERSION = 1;
 export interface ChildBridgeEnvelope<Payload> {
@@ -23,6 +24,12 @@ export interface ChildBridgeEnvelope<Payload> {
 export type DispatchBehaviorEnvelope = ChildBridgeEnvelope<GlobalActions>;
 export type StateSyncEnvelope = ChildBridgeEnvelope<SyncedGlobalState>;
 export type ReadyEnvelope = ChildBridgeEnvelope<null>;
+export interface ChildDevicePayRequest {
+    requestKey: string;
+    provider: 'ApplePay';
+}
+export declare function isValidChildDevicePayRequestKey(key: unknown): key is string;
+export declare function isChildDevicePayRequest(payload: unknown): payload is ChildDevicePayRequest;
 export declare function makeBridgeEnvelope<Payload>(payload: Payload): ChildBridgeEnvelope<Payload>;
 /**
  * The behaviors a child layout may dispatch into its host (keys) and their

package/dist/libraries/domain/src/behaviors/custom-states.d.ts

@@ -8,3 +8,18 @@ export interface SetCustomStatePayload {
     value: number;
 }
 export declare function isValidSetCustomStatePayload(payload: unknown): payload is SetCustomStatePayload;
+/**
+ * Custom state the instant-purchase device-pay sagas raise while a payment is in
+ * flight. Declared here, not in the module, because it crosses the child-layout
+ * bridge: a child CTA reads it to disable itself, and a child-initiated payment
+ * listener reads it to refuse a second request. Both frames must agree on the key.
+ */
+export declare const DEVICE_PAY_PROCESSING_STATE_KEY = "ProcessingState";
+export declare const DEVICE_PAY_PROCESSING_IDLE = 0;
+export declare const DEVICE_PAY_PROCESSING_IN_FLIGHT = 1;
+export declare const DEVICE_PAY_APPLE_PAY_AVAILABLE_STATE_KEY = "applePayAvailable";
+export declare const DEVICE_PAY_ERROR_STATE_KEY = "DevicePayErrorState";
+export declare const DEVICE_PAY_ERROR_HIDDEN = 0;
+export declare const DEVICE_PAY_ERROR_RETRYABLE_DECLINE = 1;
+/** @deprecated Use DEVICE_PAY_APPLE_PAY_AVAILABLE_STATE_KEY for new layouts. */
+export declare const DEVICE_PAY_APPLE_PAY_UNAVAILABLE_STATE_KEY = "applePayUnavailable";

package/dist/libraries/module-utils/src/sagas/child-layouts/device-pay-requests.d.ts

@@ -0,0 +1,5 @@
+import { ChildDevicePayRequest } from '../../../../domain/src/behaviors';
+type DevicePayRequestHandler = (provider: ChildDevicePayRequest['provider']) => void;
+export declare function registerChildDevicePayRequestHandler(creativeInstanceGuid: string, requestKey: string, handler: DevicePayRequestHandler): () => void;
+export declare function dispatchChildDevicePayRequest(creativeInstanceGuid: string, request: ChildDevicePayRequest): boolean;
+export {};

package/dist/libraries/module-utils/src/sagas/child-layouts/index.d.ts

@@ -1 +1,2 @@
 export * from './sagas';
+export * from './device-pay-requests';

package/dist/modules/instant-purchase/src/actions/device-pay-requests.d.ts

@@ -0,0 +1,9 @@
+export declare const DEVICE_PAY_REQUEST_CONSUMED = "DEVICE_PAY/REQUEST_CONSUMED";
+export type DevicePayRequestConsumedPayload = {
+    requestKey: string;
+    requestValue: number;
+};
+export type DevicePayRequestConsumedAction = {
+    type: typeof DEVICE_PAY_REQUEST_CONSUMED;
+    payload: DevicePayRequestConsumedPayload;
+};

package/dist/modules/instant-purchase/src/actions/index.d.ts

@@ -3,3 +3,4 @@ export * from './checkout-lifecycle';
 export * from './instant-purchase';
 export * from './device-pay';
 export * from './paypal';
+export * from './device-pay-requests';

package/dist/modules/instant-purchase/src/components/catalog-device-pay-button/catalog-device-pay-button.d.ts

@@ -12,6 +12,47 @@
  *   }
  * }
  * ```
+ *
+ * ## Listener mode (`requestKey`)
+ *
+ * A child layout can show the visible Apple Pay CTA, but it cannot complete a
+ * purchase: a `dcui-child` frame has no `CatalogItemProvider`, no
+ * `ValidatorProvider` and no device-pay sagas. So the child synchronously sends
+ * an offer-scoped request, and an instance of this node authored with
+ * `requestKey` runs the *same* initiate path a click would while preserving
+ * Safari's trusted user gesture.
+ *
+ * With `requestKey` set the node renders nothing — it is a listener, not a
+ * button. Keeping both roles in one component is deliberate: the click path and
+ * the request path share `validateAndInitiate`, so validation, catalog item,
+ * quantity, provider and signals cannot drift between them.
+ *
+ * Authored as a first-class layout-schema node:
+ * ```json
+ * {
+ *   "type": "CatalogDevicePayButton",
+ *   "node": {
+ *     "requestKey": "ApplePayRequest",
+ *     "provider": "ApplePay",
+ *     "children": []
+ *   }
+ * }
+ * ```
+ *
+ * ### Legacy timestamp requests
+ *
+ * `CustomStateValidationTriggerButton` and `DismissInstantPurchaseButton` treat
+ * `requestKey === 1` as the request and write `0` back to consume it, tracking
+ * re-entrancy in a component ref. That is safe for advancing a view but not for
+ * a payment: a listener must be authored inside a catalog collection, and those
+ * sit under a `ProcessingState is-not 1` gate that unmounts them while the
+ * payment sheet is open. A ref resets on remount and would re-fire the request
+ * with no user interaction.
+ *
+ * Older child layouts can still send a monotonically increasing timestamp. The
+ * watermark of consumed legacy requests lives in the store
+ * (`devicePayRequests`), and anything stamped before this mount began is
+ * refused so remounting cannot reopen a payment sheet.
  */
 import React from 'react';
 import { LayoutVariantNonInteractableChildren, WhenPredicate, CatalogDevicePayButtonModel } from '@rokt/dcui-layout-schema';

package/dist/modules/instant-purchase/src/constants/device-pay-error.d.ts

@@ -1,4 +1,2 @@
-export declare const DEVICE_PAY_ERROR_STATE_KEY = "DevicePayErrorState";
-export declare const DEVICE_PAY_ERROR_HIDDEN = 0;
-export declare const DEVICE_PAY_ERROR_RETRYABLE_DECLINE = 1;
+export { DEVICE_PAY_ERROR_STATE_KEY, DEVICE_PAY_ERROR_HIDDEN, DEVICE_PAY_ERROR_RETRYABLE_DECLINE, } from '../../../../libraries/domain/src/behaviors';
 export declare const RETRYABLE_DEVICE_PAY_ERROR_MESSAGE = "Payment failed. Choose another card and try again.";

package/dist/modules/instant-purchase/src/reducers/device-pay-requests/index.d.ts

@@ -0,0 +1 @@
+export * from './reducer';

package/dist/modules/instant-purchase/src/reducers/device-pay-requests/reducer.d.ts

@@ -0,0 +1,14 @@
+import { AnyAction } from '@reduxjs/toolkit';
+/**
+ * Highest device-pay request stamp already acted on, per request key.
+ *
+ * A child layout requests a payment by stamping a synced custom state with the
+ * tap time. This ledger is what makes that request idempotent, and it lives in
+ * the store rather than in a component ref on purpose: the listener node is
+ * authored inside a catalog collection that a `ProcessingState` gate unmounts
+ * while the payment sheet is open. A ref would reset on remount and re-fire the
+ * request with no user interaction.
+ */
+export type DevicePayRequestsState = Record<string, number>;
+export declare function makeInitialDevicePayRequestsState(): DevicePayRequestsState;
+export declare const devicePayRequestsReducer: (state: DevicePayRequestsState | undefined, action: AnyAction) => DevicePayRequestsState;

package/dist/modules/instant-purchase/src/reducers/index.d.ts

@@ -1,6 +1,7 @@
 import { GlobalActions } from '../../../../libraries/domain/src/behaviors';
 import { ChildLayoutActions, childLayoutsReducer, ChildLayoutsState, StaticData, staticDataReducer, DynamicData, dynamicDataReducer } from '../../../../libraries/module-utils/src/index';
 import { CatalogSelectionState, DevicePayAvailabilityState, FulfillmentDetailsState, OfferLifecycleEventState, TaxAndShippingState } from '../models';
+import { DevicePayRequestsState } from './device-pay-requests';
 import { PurchaseIdState } from './instant-purchase';
 import { PayPalTransactionDetailsState } from './paypal-transaction-details';
 import { PayPalPurchaseContextState } from './paypal-purchase-context';
@@ -12,6 +13,7 @@ export type AppState = {
     fulfillmentDetails: FulfillmentDetailsState;
     offerLifecycleEvent: OfferLifecycleEventState;
     devicePayAvailability: DevicePayAvailabilityState;
+    devicePayRequests: DevicePayRequestsState;
     paypalTransactionDetails: PayPalTransactionDetailsState;
     paypalPurchaseContext: PayPalPurchaseContextState;
     taxAndShipping: TaxAndShippingState;
@@ -26,6 +28,7 @@ export declare const appReducers: {
     fulfillmentDetails: (state: FulfillmentDetailsState | undefined, action: import("redux").AnyAction) => FulfillmentDetailsState;
     offerLifecycleEvent: (state: OfferLifecycleEventState | undefined, action: import("redux").AnyAction) => OfferLifecycleEventState;
     devicePayAvailability: (state: DevicePayAvailabilityState | undefined, action: import("redux").AnyAction) => DevicePayAvailabilityState;
+    devicePayRequests: (state: DevicePayRequestsState | undefined, action: import("redux").AnyAction) => DevicePayRequestsState;
     paypalTransactionDetails: (state: PayPalTransactionDetailsState | undefined, action: import("redux").AnyAction) => PayPalTransactionDetailsState;
     paypalPurchaseContext: (state: PayPalPurchaseContextState | undefined, action: import("redux").AnyAction) => PayPalPurchaseContextState;
     taxAndShipping: (state: TaxAndShippingState | undefined, action: import("redux").AnyAction) => TaxAndShippingState;

package/dist/modules/instant-purchase/src/sagas/device-pay/sagas.d.ts

@@ -6,7 +6,6 @@ import { OfferLifecycle } from '../../../../../libraries/domain/src/behaviors';
 import { DevicePayPurchaseContext, DevicePayInteractionPayload, InitiateDevicePayAction, DevicePayResponsePayload, DevicePayResponse, DevicePayAvailableAction, DevicePayAvailablePayload } from '../../actions';
 import { AppState } from '../../reducers';
 import { OfferLifecycleEventState } from '../../models';
-import { PrepareDevicePayEventPayload } from '../../../../../libraries/domain/src/models';
 export declare function isDevicePayInteraction(data: unknown): data is DevicePayInteractionPayload;
 export declare function listenForDevicePayInteraction(channel: EventChannel<DevicePayInteractionPayload>, context: DevicePayPurchaseContext): Generator<PutEffect<{
     type: string;
@@ -25,7 +24,7 @@ export declare function isDevicePayResponse(obj: unknown): obj is DevicePayRespo
  * than letting the bad afterpay value leak into reducer state.
  */
 export declare function isDevicePayAvailableResponse(obj: unknown): obj is DevicePayAvailablePayload;
-export declare function listenForDevicePayAvailable(channel: EventChannel<DevicePayAvailablePayload>, logger: (log: Log) => void): Generator<ChannelTakeEffect<DevicePayAvailablePayload> | CallEffect<void> | PutEffect<DevicePayAvailableAction>, void, DevicePayAvailablePayload>;
+export declare function listenForDevicePayAvailable(channel: EventChannel<DevicePayAvailablePayload>, logger: (log: Log) => void): Generator<ChannelTakeEffect<DevicePayAvailablePayload> | CallEffect<void> | PutEffect, void, DevicePayAvailablePayload>;
 export declare function processDevicePayAvailable(logger: (log: Log) => void, action: DevicePayAvailableAction): Generator<CallEffect<void> | import("redux-saga/effects").SelectEffect | PutEffect<{
     type: string;
     payload: {
@@ -121,7 +120,12 @@ export declare function prepareDevicePay(gateway: GlobalGateway, logger: (log: L
     type: string;
     payload: {
         name: string;
-        body: PrepareDevicePayEventPayload;
+        body: {
+            stripeAccountId: string | undefined;
+            merchantName: string | undefined;
+            countryCode: string | undefined;
+            currency: string | undefined;
+        };
     };
 }>, void, AppState | undefined>;
 export declare function processDevicePayResponse(logger: (log: Log) => void, action: DevicePayResponse): Generator<CallEffect<void> | PutEffect<{

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rokt/dcui-orchestrator",
-  "version": "1.0.0",
+  "version": "1.0.1-rc.1",
   "description": "Rokt's DCUI rendering process",
   "main": "dist/index.cjs",
   "module": "dist/index.js",