@stigg/react-sdk 4.4.0-beta.11 → 4.4.0-beta.12
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/checkout/Checkout.d.ts +1 -1
- package/dist/components/checkout/CheckoutContainer.d.ts +4 -2
- package/dist/components/checkout/CheckoutProvider.d.ts +4 -2
- package/dist/components/checkout/hooks/useLoadCheckout.d.ts +3 -1
- package/dist/components/checkout/hooks/usePreviewSubscription.d.ts +8 -3
- package/dist/components/checkout/summary/CheckoutSummary.d.ts +1 -1
- package/dist/react-sdk.cjs.development.js +94 -46
- package/dist/react-sdk.cjs.development.js.map +1 -1
- package/dist/react-sdk.cjs.production.min.js +1 -1
- package/dist/react-sdk.cjs.production.min.js.map +1 -1
- package/dist/react-sdk.esm.js +94 -46
- package/dist/react-sdk.esm.js.map +1 -1
- package/dist/stories/mocks/checkout/consts.d.ts +11 -0
- package/dist/stories/mocks/checkout/mockCheckoutPreview.d.ts +2 -0
- package/dist/stories/mocks/checkout/mockCheckoutState.d.ts +2 -0
- package/package.json +1 -1
- package/src/components/checkout/Checkout.tsx +3 -1
- package/src/components/checkout/CheckoutContainer.tsx +21 -2
- package/src/components/checkout/CheckoutProvider.tsx +6 -2
- package/src/components/checkout/hooks/useLoadCheckout.ts +10 -2
- package/src/components/checkout/hooks/usePreviewSubscription.ts +15 -5
- package/src/components/checkout/summary/CheckoutSummary.tsx +2 -1
- package/src/stories/Checkout.stories.tsx +32 -6
- package/src/stories/mocks/checkout/consts.ts +15 -0
- package/src/stories/mocks/checkout/mockCheckoutPreview.ts +121 -0
- package/src/stories/mocks/checkout/mockCheckoutState.ts +206 -0
|
@@ -2,4 +2,4 @@
|
|
|
2
2
|
import { CheckoutProviderProps } from './CheckoutProvider';
|
|
3
3
|
import { CheckoutContainerProps } from './CheckoutContainer';
|
|
4
4
|
export declare type CheckoutProps = CheckoutProviderProps & CheckoutContainerProps;
|
|
5
|
-
export declare const Checkout: ({ textOverrides, theme, resourceId, planId, preferredBillingPeriod, billingCountryCode, billableFeatures, billingInformation, ...containerProps }: CheckoutProps) => JSX.Element;
|
|
5
|
+
export declare const Checkout: ({ textOverrides, theme, resourceId, planId, preferredBillingPeriod, billingCountryCode, billableFeatures, billingInformation, onMockCheckoutState, ...containerProps }: CheckoutProps) => JSX.Element;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
import {
|
|
2
|
+
import { BillingAddress, ApplySubscription, CheckoutStatePlan, PreviewSubscription, SubscriptionPreview } from '@stigg/js-client-sdk';
|
|
3
3
|
export declare type CheckoutResult = {
|
|
4
4
|
success: boolean;
|
|
5
5
|
errorMessage?: string;
|
|
@@ -12,6 +12,7 @@ export declare type OnCheckoutCompletedParams = {
|
|
|
12
12
|
success: boolean;
|
|
13
13
|
error?: string;
|
|
14
14
|
};
|
|
15
|
+
export declare type OnMockCheckoutPreviewCallback = (params: PreviewSubscription) => SubscriptionPreview;
|
|
15
16
|
export declare type CheckoutContainerProps = {
|
|
16
17
|
onCheckout?: (params: OnCheckoutParams) => Promise<CheckoutResult>;
|
|
17
18
|
onCheckoutCompleted: (params: OnCheckoutCompletedParams) => Promise<void>;
|
|
@@ -23,5 +24,6 @@ export declare type CheckoutContainerProps = {
|
|
|
23
24
|
}) => Promise<void>;
|
|
24
25
|
disablePromotionCode?: boolean;
|
|
25
26
|
disableSuccessAnimation?: boolean;
|
|
27
|
+
onMockCheckoutPreview?: OnMockCheckoutPreviewCallback;
|
|
26
28
|
};
|
|
27
|
-
export declare function CheckoutContainer({ onCheckout, onCheckoutCompleted, onChangePlan, onBillingAddressChange, disablePromotionCode, disableSuccessAnimation, }: CheckoutContainerProps): JSX.Element;
|
|
29
|
+
export declare function CheckoutContainer({ onCheckout, onCheckoutCompleted, onChangePlan, onBillingAddressChange, disablePromotionCode, disableSuccessAnimation, onMockCheckoutPreview, }: CheckoutContainerProps): JSX.Element;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import { BillableFeature, BillingPeriod, GetCheckoutStateResults } from '@stigg/js-client-sdk';
|
|
2
|
+
import { BillableFeature, BillingPeriod, GetCheckoutState, GetCheckoutStateResults } from '@stigg/js-client-sdk';
|
|
3
3
|
import { DeepPartial } from '../../types';
|
|
4
4
|
import { AddonsStepState, PaymentStepState, PlanStepState, ProgressBarState, WidgetState } from './hooks';
|
|
5
5
|
import { CheckoutLocalization } from './textOverrides';
|
|
@@ -21,6 +21,7 @@ export interface CheckoutContextState {
|
|
|
21
21
|
}
|
|
22
22
|
export declare const CheckoutContext: React.Context<[CheckoutContextState, (updater: (state: CheckoutContextState) => void) => void] | null>;
|
|
23
23
|
export declare const useCheckoutContext: () => [CheckoutContextState, (updater: (state: CheckoutContextState) => void) => void];
|
|
24
|
+
export declare type MockCheckoutStateCallback = (params: GetCheckoutState) => GetCheckoutStateResults;
|
|
24
25
|
export declare type CheckoutProviderProps = {
|
|
25
26
|
textOverrides?: DeepPartial<CheckoutLocalization>;
|
|
26
27
|
theme?: DeepPartial<CheckoutTheme>;
|
|
@@ -30,7 +31,8 @@ export declare type CheckoutProviderProps = {
|
|
|
30
31
|
billingCountryCode?: string;
|
|
31
32
|
billableFeatures?: BillableFeature[];
|
|
32
33
|
billingInformation?: BillingInformation;
|
|
34
|
+
onMockCheckoutState?: MockCheckoutStateCallback;
|
|
33
35
|
};
|
|
34
|
-
export declare function CheckoutProvider({ children, textOverrides, theme, preferredBillingPeriod, billableFeatures, resourceId, planId, billingCountryCode, billingInformation, }: {
|
|
36
|
+
export declare function CheckoutProvider({ children, textOverrides, theme, preferredBillingPeriod, billableFeatures, resourceId, planId, billingCountryCode, billingInformation, onMockCheckoutState, }: {
|
|
35
37
|
children: React.ReactNode;
|
|
36
38
|
} & CheckoutProviderProps): JSX.Element;
|
|
@@ -1,10 +1,12 @@
|
|
|
1
1
|
import { GetCheckoutStateResults } from '@stigg/js-client-sdk';
|
|
2
|
+
import { MockCheckoutStateCallback } from '../CheckoutProvider';
|
|
2
3
|
declare type UseLoadCheckoutProps = {
|
|
3
4
|
planId: string;
|
|
4
5
|
resourceId?: string;
|
|
5
6
|
billingCountryCode?: string;
|
|
7
|
+
onMockCheckoutState?: MockCheckoutStateCallback;
|
|
6
8
|
};
|
|
7
|
-
export declare function useLoadCheckout({ planId, resourceId, billingCountryCode }: UseLoadCheckoutProps): {
|
|
9
|
+
export declare function useLoadCheckout({ planId, resourceId, billingCountryCode, onMockCheckoutState }: UseLoadCheckoutProps): {
|
|
8
10
|
checkout: GetCheckoutStateResults | null | undefined;
|
|
9
11
|
isLoading: boolean;
|
|
10
12
|
};
|
|
@@ -1,12 +1,16 @@
|
|
|
1
1
|
import { StiggClient, SubscriptionPreview } from '@stigg/js-client-sdk';
|
|
2
2
|
import { SubscriptionState } from './useSubscriptionModel';
|
|
3
|
+
import { OnMockCheckoutPreviewCallback } from '../CheckoutContainer';
|
|
4
|
+
declare type UsePreviewSubscriptionProps = {
|
|
5
|
+
onMockCheckoutPreview?: OnMockCheckoutPreviewCallback;
|
|
6
|
+
};
|
|
3
7
|
export declare type PreviewSubscriptionProps = {
|
|
4
8
|
customerId?: string;
|
|
5
9
|
planId?: string;
|
|
6
10
|
resourceId?: string;
|
|
7
11
|
stigg: StiggClient;
|
|
8
|
-
} & SubscriptionState;
|
|
9
|
-
export declare const usePreviewSubscriptionAction: () => {
|
|
12
|
+
} & SubscriptionState & UsePreviewSubscriptionProps;
|
|
13
|
+
export declare const usePreviewSubscriptionAction: ({ onMockCheckoutPreview }?: UsePreviewSubscriptionProps) => {
|
|
10
14
|
previewSubscriptionAction: ({ promotionCode }?: {
|
|
11
15
|
promotionCode?: string | null | undefined;
|
|
12
16
|
}) => Promise<{
|
|
@@ -14,7 +18,8 @@ export declare const usePreviewSubscriptionAction: () => {
|
|
|
14
18
|
errorMessage: string | null;
|
|
15
19
|
}>;
|
|
16
20
|
};
|
|
17
|
-
export declare const usePreviewSubscription: () => {
|
|
21
|
+
export declare const usePreviewSubscription: ({ onMockCheckoutPreview }?: UsePreviewSubscriptionProps) => {
|
|
18
22
|
subscriptionPreview: SubscriptionPreview | null;
|
|
19
23
|
isFetchingSubscriptionPreview: boolean;
|
|
20
24
|
};
|
|
25
|
+
export {};
|
|
@@ -13,6 +13,6 @@ export declare const SummaryCard: import("@emotion/styled/macro").StyledComponen
|
|
|
13
13
|
}, "slot" | "title" | "ref" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture"> & {
|
|
14
14
|
theme?: import("@emotion/react").Theme | undefined;
|
|
15
15
|
}, {}, {}>;
|
|
16
|
-
export declare const CheckoutSummary: ({ onCheckout, onCheckoutCompleted, disablePromotionCode, disableSuccessAnimation, isFreeDowngrade, }: CheckoutContainerProps & {
|
|
16
|
+
export declare const CheckoutSummary: ({ onCheckout, onCheckoutCompleted, disablePromotionCode, disableSuccessAnimation, isFreeDowngrade, onMockCheckoutPreview, }: CheckoutContainerProps & {
|
|
17
17
|
isFreeDowngrade: boolean;
|
|
18
18
|
}) => JSX.Element;
|