@stigg/react-sdk 4.2.3 → 4.3.0-beta.1
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/README.md +1 -1
- package/dist/components/checkout/Checkout.d.ts +5 -0
- package/dist/components/checkout/CheckoutContainer.d.ts +22 -0
- package/dist/components/checkout/CheckoutContainer.style.d.ts +26 -0
- package/dist/components/checkout/CheckoutProvider.d.ts +35 -0
- package/dist/components/checkout/CheckoutSummary.d.ts +9 -0
- package/dist/components/checkout/components/Button.d.ts +6 -0
- package/dist/components/checkout/components/InputField.d.ts +8 -0
- package/dist/components/checkout/components/index.d.ts +2 -0
- package/dist/components/checkout/formatting.d.ts +2 -0
- package/dist/components/checkout/hooks/index.d.ts +8 -0
- package/dist/components/checkout/hooks/useAddonsStepModel.d.ts +21 -0
- package/dist/components/checkout/hooks/useCheckoutModel.d.ts +9 -0
- package/dist/components/checkout/hooks/useCouponModel.d.ts +7 -0
- package/dist/components/checkout/hooks/useLoadCheckout.d.ts +11 -0
- package/dist/components/checkout/hooks/usePaymentStepModel.d.ts +16 -0
- package/dist/components/checkout/hooks/usePlanStepModel.d.ts +23 -0
- package/dist/components/checkout/hooks/usePreviewSubscription.d.ts +13 -0
- package/dist/components/checkout/hooks/useProgressBarModel.d.ts +26 -0
- package/dist/components/checkout/hooks/useSubscriptionModel.d.ts +5 -0
- package/dist/components/checkout/hooks/useSubscriptionState.d.ts +2 -0
- package/dist/components/checkout/index.d.ts +3 -0
- package/dist/components/checkout/planHeader/PlanHeader.d.ts +7 -0
- package/dist/components/checkout/planHeader/PlanHeader.style.d.ts +25 -0
- package/dist/components/checkout/planHeader/index.d.ts +1 -0
- package/dist/components/checkout/progressBar/CheckoutProgressBar.d.ts +2 -0
- package/dist/components/checkout/progressBar/CheckoutProgressBar.style.d.ts +45 -0
- package/dist/components/checkout/promotionCode/AddPromotionCode.d.ts +5 -0
- package/dist/components/checkout/promotionCode/AddPromotionCodeButton.d.ts +7 -0
- package/dist/components/checkout/promotionCode/AppliedPromotionCode.d.ts +6 -0
- package/dist/components/checkout/promotionCode/PromotionCodeSection.d.ts +5 -0
- package/dist/components/checkout/promotionCode/index.d.ts +1 -0
- package/dist/components/checkout/steps/addons/CheckoutAddonsStep.d.ts +2 -0
- package/dist/components/checkout/steps/addons/CheckoutAddonsStep.style.d.ts +93 -0
- package/dist/components/checkout/steps/addons/addon.utils.d.ts +15 -0
- package/dist/components/checkout/steps/addons/index.d.ts +1 -0
- package/dist/components/checkout/steps/payment/PaymentMethods.d.ts +19 -0
- package/dist/components/checkout/steps/payment/PaymentMethods.style.d.ts +113 -0
- package/dist/components/checkout/steps/payment/PaymentStep.d.ts +2 -0
- package/dist/components/checkout/steps/payment/index.d.ts +1 -0
- package/dist/components/checkout/steps/payment/stripe/StripePaymentForm.d.ts +2 -0
- package/dist/components/checkout/steps/payment/stripe/index.d.ts +3 -0
- package/dist/components/checkout/steps/payment/stripe/stripe.utils.d.ts +33 -0
- package/dist/components/checkout/steps/payment/stripe/useStripeIntegration.d.ts +5 -0
- package/dist/components/checkout/steps/payment/stripe/useSubmit.d.ts +10 -0
- package/dist/components/checkout/steps/plan/BillingPeriodPicker.d.ts +9 -0
- package/dist/components/checkout/steps/plan/BillingPeriodPicker.style.d.ts +52 -0
- package/dist/components/checkout/steps/plan/CheckoutChargeList.d.ts +16 -0
- package/dist/components/checkout/steps/plan/CheckoutPlanStep.d.ts +4 -0
- package/dist/components/checkout/steps/plan/CheckoutPlanStep.style.d.ts +12 -0
- package/dist/components/checkout/steps/plan/index.d.ts +1 -0
- package/dist/components/checkout/steps/surprise/SurpriseStep.d.ts +2 -0
- package/dist/components/checkout/textOverrides.d.ts +28 -0
- package/dist/components/checkout/theme.d.ts +12 -0
- package/dist/components/common/Icon.d.ts +3 -2
- package/dist/components/common/PoweredByStigg.d.ts +1 -1
- package/dist/components/{paywall/TiersLayout.d.ts → common/TiersSelectContainer.d.ts} +2 -3
- package/dist/components/common/customIcons.d.ts +17 -5
- package/dist/components/common/mapExternalTheme.d.ts +2 -1
- package/dist/components/customerPortal/subscriptionOverview/tabs/SubscriptionTabs.d.ts +1 -1
- package/dist/components/hooks/useChargeSort.d.ts +3 -0
- package/dist/components/utils/calculateDiscountRate.d.ts +1 -0
- package/dist/components/utils/currencyUtils.d.ts +1 -1
- package/dist/components/{paywall/planPriceTier.d.ts → utils/priceTierUtils.d.ts} +3 -1
- package/dist/components/utils/priceUtils.d.ts +2 -0
- package/dist/index.d.ts +1 -0
- package/dist/react-sdk.cjs.development.js +3476 -201
- 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 +3616 -207
- package/dist/react-sdk.esm.js.map +1 -1
- package/dist/stories/Checkout.stories.d.ts +3 -0
- package/dist/stories/CustomerPortal.stories.d.ts +1 -1
- package/dist/theme/getResolvedTheme.d.ts +1 -0
- package/dist/theme/types.d.ts +1 -0
- package/package.json +7 -4
- package/src/assets/arrow-forward.svg +3 -0
- package/src/assets/arrow-right.svg +6 -0
- package/src/assets/close.svg +3 -0
- package/src/assets/nyancat.svg +634 -0
- package/src/assets/outlined-checked-circle.svg +6 -0
- package/src/assets/outlined-circle.svg +3 -0
- package/src/assets/payment-method.svg +11 -0
- package/src/assets/plus-icon.svg +6 -0
- package/src/assets/trash.svg +8 -0
- package/src/components/StiggProvider.tsx +5 -5
- package/src/components/checkout/Checkout.tsx +30 -0
- package/src/components/checkout/CheckoutContainer.style.ts +34 -0
- package/src/components/checkout/CheckoutContainer.tsx +88 -0
- package/src/components/checkout/CheckoutProvider.tsx +140 -0
- package/src/components/checkout/CheckoutSummary.tsx +361 -0
- package/src/components/checkout/components/Button.tsx +30 -0
- package/src/components/checkout/components/InputField.tsx +22 -0
- package/src/components/checkout/components/index.ts +2 -0
- package/src/components/checkout/formatting.ts +12 -0
- package/src/components/checkout/hooks/index.ts +8 -0
- package/src/components/checkout/hooks/useAddonsStepModel.ts +96 -0
- package/src/components/checkout/hooks/useCheckoutModel.ts +31 -0
- package/src/components/checkout/hooks/useCouponModel.ts +28 -0
- package/src/components/checkout/hooks/useLoadCheckout.ts +40 -0
- package/src/components/checkout/hooks/usePaymentStepModel.ts +49 -0
- package/src/components/checkout/hooks/usePlanStepModel.ts +170 -0
- package/src/components/checkout/hooks/usePreviewSubscription.ts +82 -0
- package/src/components/checkout/hooks/useProgressBarModel.ts +89 -0
- package/src/components/checkout/hooks/useSubscriptionModel.ts +16 -0
- package/src/components/checkout/hooks/useSubscriptionState.ts +26 -0
- package/src/components/checkout/index.ts +3 -0
- package/src/components/checkout/planHeader/PlanHeader.style.tsx +23 -0
- package/src/components/checkout/planHeader/PlanHeader.tsx +61 -0
- package/src/components/checkout/planHeader/index.ts +1 -0
- package/src/components/checkout/progressBar/CheckoutProgressBar.style.ts +29 -0
- package/src/components/checkout/progressBar/CheckoutProgressBar.tsx +48 -0
- package/src/components/checkout/promotionCode/AddPromotionCode.tsx +85 -0
- package/src/components/checkout/promotionCode/AddPromotionCodeButton.tsx +39 -0
- package/src/components/checkout/promotionCode/AppliedPromotionCode.tsx +37 -0
- package/src/components/checkout/promotionCode/PromotionCodeSection.tsx +27 -0
- package/src/components/checkout/promotionCode/index.ts +1 -0
- package/src/components/checkout/steps/addons/CheckoutAddonsStep.style.tsx +24 -0
- package/src/components/checkout/steps/addons/CheckoutAddonsStep.tsx +125 -0
- package/src/components/checkout/steps/addons/addon.utils.ts +68 -0
- package/src/components/checkout/steps/addons/index.ts +1 -0
- package/src/components/checkout/steps/payment/PaymentMethods.style.ts +26 -0
- package/src/components/checkout/steps/payment/PaymentMethods.tsx +83 -0
- package/src/components/checkout/steps/payment/PaymentStep.tsx +41 -0
- package/src/components/checkout/steps/payment/index.ts +1 -0
- package/src/components/checkout/steps/payment/stripe/StripePaymentForm.tsx +43 -0
- package/src/components/checkout/steps/payment/stripe/index.ts +3 -0
- package/src/components/checkout/steps/payment/stripe/stripe.utils.ts +109 -0
- package/src/components/checkout/steps/payment/stripe/useStripeIntegration.ts +27 -0
- package/src/components/checkout/steps/payment/stripe/useSubmit.ts +100 -0
- package/src/components/checkout/steps/plan/BillingPeriodPicker.style.tsx +46 -0
- package/src/components/checkout/steps/plan/BillingPeriodPicker.tsx +63 -0
- package/src/components/checkout/steps/plan/CheckoutChargeList.tsx +138 -0
- package/src/components/checkout/steps/plan/CheckoutPlanStep.style.tsx +6 -0
- package/src/components/checkout/steps/plan/CheckoutPlanStep.tsx +22 -0
- package/src/components/checkout/steps/plan/index.ts +1 -0
- package/src/components/checkout/steps/surprise/SurpriseStep.tsx +27 -0
- package/src/components/checkout/textOverrides.ts +58 -0
- package/src/components/checkout/theme.ts +43 -0
- package/src/components/common/Icon.tsx +17 -22
- package/src/components/common/PoweredByStigg.tsx +1 -1
- package/src/components/{paywall/TiersLayout.tsx → common/TiersSelectContainer.tsx} +8 -7
- package/src/components/common/Typography.tsx +11 -1
- package/src/components/common/customIcons.ts +17 -28
- package/src/components/common/mapExternalTheme.ts +24 -8
- package/src/components/customerPortal/subscriptionOverview/tabs/SubscriptionTabs.tsx +6 -12
- package/src/components/hooks/useChargeSort.ts +17 -0
- package/src/components/paywall/Paywall.tsx +1 -1
- package/src/components/paywall/PlanOffering.tsx +1 -1
- package/src/components/paywall/PlanOfferingButton.tsx +1 -1
- package/src/components/paywall/PlanPrice.tsx +3 -3
- package/src/components/paywall/utils/calculateUnitQuantityText.ts +9 -4
- package/src/components/utils/calculateDiscountRate.ts +1 -1
- package/src/components/utils/currencyUtils.ts +1 -1
- package/src/components/utils/getPaidPriceText.ts +2 -2
- package/src/components/{paywall/planPriceTier.ts → utils/priceTierUtils.ts} +25 -3
- package/src/components/utils/priceUtils.ts +10 -0
- package/src/index.ts +1 -0
- package/src/stories/Checkout.stories.tsx +62 -0
- package/src/stories/CustomerPortal.stories.tsx +1 -1
- package/src/theme/Theme.tsx +9 -8
- package/src/theme/getResolvedTheme.ts +1 -0
- package/src/theme/types.ts +1 -0
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import { BillingPeriod } from '@stigg/js-client-sdk';
|
|
2
|
+
import { DeepPartial } from '../../types';
|
|
3
|
+
export declare type CheckoutLocalization = {
|
|
4
|
+
changePlan: string;
|
|
5
|
+
billingPeriodsTitle: string;
|
|
6
|
+
addAddonText: string;
|
|
7
|
+
newPaymentMethodText: string;
|
|
8
|
+
newPaymentMethodCardTitle: string;
|
|
9
|
+
newPaymentMethodBillingAddressTitle: string;
|
|
10
|
+
baseChargeText: string | ((params: {
|
|
11
|
+
billingPeriod: BillingPeriod;
|
|
12
|
+
}) => string);
|
|
13
|
+
totalText: string;
|
|
14
|
+
subTotalText: string;
|
|
15
|
+
addCouponCodeText: string;
|
|
16
|
+
couponCodeTitle: string;
|
|
17
|
+
addonsSectionTitle: string;
|
|
18
|
+
changesWillApplyAtEndOfBillingPeriod: string | ((params: {
|
|
19
|
+
billingPeriodEnd: Date;
|
|
20
|
+
}) => string);
|
|
21
|
+
checkoutButton: {
|
|
22
|
+
nextText: string;
|
|
23
|
+
downgradeText: string;
|
|
24
|
+
upgradeText: string;
|
|
25
|
+
purchaseText: string;
|
|
26
|
+
};
|
|
27
|
+
};
|
|
28
|
+
export declare function getResolvedCheckoutLocalize(localizeOverride?: DeepPartial<CheckoutLocalization>): CheckoutLocalization;
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { CheckoutConfiguration } from '@stigg/js-client-sdk';
|
|
2
|
+
import { StiggTheme } from '../../theme/types';
|
|
3
|
+
import { DeepPartial } from '../../types';
|
|
4
|
+
export declare type CheckoutTheme = {
|
|
5
|
+
primary: string;
|
|
6
|
+
textColor: string;
|
|
7
|
+
backgroundColor: string;
|
|
8
|
+
borderColor: string;
|
|
9
|
+
selectionColor: string;
|
|
10
|
+
summaryBackgroundColor: string;
|
|
11
|
+
};
|
|
12
|
+
export declare function getResolvedCheckoutTheme(globalTheme: StiggTheme, themeOverride?: DeepPartial<CheckoutTheme>, _remoteConfiguration?: CheckoutConfiguration | null): CheckoutTheme;
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { CSSProperties } from 'react';
|
|
2
|
-
import { Icons } from './customIcons';
|
|
3
2
|
import { IconColor } from './iconColor';
|
|
3
|
+
import * as customIcons from './customIcons';
|
|
4
|
+
export declare type Icons = keyof typeof customIcons;
|
|
4
5
|
export declare type IconProps = {
|
|
5
6
|
icon: Icons;
|
|
6
7
|
className?: string;
|
|
@@ -9,4 +10,4 @@ export declare type IconProps = {
|
|
|
9
10
|
svgRectColor?: IconColor | string;
|
|
10
11
|
svgStrokeColor?: IconColor | string;
|
|
11
12
|
};
|
|
12
|
-
export declare function Icon({ icon, className, style, svgPathColor, svgRectColor, svgStrokeColor
|
|
13
|
+
export declare function Icon({ icon, className, style, svgPathColor, svgRectColor, svgStrokeColor }: IconProps): JSX.Element;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
export declare const STIGG_WATERMARK_CLASSNAME = "stigg-watermark";
|
|
3
|
-
export declare type PoweredByStiggSources = 'paywall' | 'customer_portal';
|
|
3
|
+
export declare type PoweredByStiggSources = 'paywall' | 'customer_portal' | 'checkout';
|
|
4
4
|
declare type PoweredByStiggProps = {
|
|
5
5
|
source: PoweredByStiggSources;
|
|
6
6
|
showWatermark?: boolean;
|
|
@@ -1,8 +1,7 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
import { PaywallPlan } from './types';
|
|
3
2
|
import { PriceTierFragment } from '@stigg/js-client-sdk';
|
|
4
|
-
export declare function
|
|
5
|
-
|
|
3
|
+
export declare function TiersSelectContainer({ componentId, tiers, tierUnits, selectedTier, handleTierChange, }: {
|
|
4
|
+
componentId: string;
|
|
6
5
|
tiers?: PriceTierFragment[] | null;
|
|
7
6
|
tierUnits?: string;
|
|
8
7
|
selectedTier?: PriceTierFragment;
|
|
@@ -1,5 +1,17 @@
|
|
|
1
|
-
|
|
2
|
-
export
|
|
3
|
-
|
|
4
|
-
};
|
|
5
|
-
export
|
|
1
|
+
export { default as Addons } from '../../assets/addons.svg';
|
|
2
|
+
export { default as BillingInfoCustomer } from '../../assets/billing-info-customer.svg';
|
|
3
|
+
export { default as ContactSupport } from '../../assets/contact-support.svg';
|
|
4
|
+
export { default as CreditCard } from '../../assets/credit-card.svg';
|
|
5
|
+
export { default as DollarCoin } from '../../assets/dollar-coin.svg';
|
|
6
|
+
export { default as MiniSchedule } from '../../assets/mini-schedule.svg';
|
|
7
|
+
export { default as Promotions } from '../../assets/promotions.svg';
|
|
8
|
+
export { default as Restore } from '../../assets/restore.svg';
|
|
9
|
+
export { default as ScheduleBox } from '../../assets/schedule-box.svg';
|
|
10
|
+
export { default as ScheduleClock } from '../../assets/schedule.svg';
|
|
11
|
+
export { default as RenewSubscription } from '../../assets/subscription-renews-icon.svg';
|
|
12
|
+
export { default as Trash } from '../../assets/trash.svg';
|
|
13
|
+
export { default as PaymentMethod } from '../../assets/payment-method.svg';
|
|
14
|
+
export { default as OutlinedCircle } from '../../assets/outlined-circle.svg';
|
|
15
|
+
export { default as OutlinedCheckedCircle } from '../../assets/outlined-checked-circle.svg';
|
|
16
|
+
export { default as ArrowForward } from '../../assets/arrow-forward.svg';
|
|
17
|
+
export { default as Close } from '../../assets/close.svg';
|
|
@@ -1,4 +1,5 @@
|
|
|
1
|
-
import { CustomerPortalConfiguration, PaywallConfiguration } from '@stigg/js-client-sdk';
|
|
1
|
+
import { CheckoutConfiguration, CustomerPortalConfiguration, PaywallConfiguration } from '@stigg/js-client-sdk';
|
|
2
2
|
import { CustomizedTheme } from '../../theme/Theme';
|
|
3
3
|
export declare function mapCustomerPortalConfiguration(configuration: CustomerPortalConfiguration): CustomizedTheme;
|
|
4
4
|
export declare function mapPaywallConfiguration(paywallConfiguration: PaywallConfiguration): CustomizedTheme;
|
|
5
|
+
export declare function mapCheckoutConfiguration(configuration: CheckoutConfiguration): CustomizedTheme;
|
|
@@ -9,4 +9,4 @@ export declare type SubscriptionTabsProps = {
|
|
|
9
9
|
textOverrides: CustomerPortalLocalization;
|
|
10
10
|
theme: CustomerPortalTheme;
|
|
11
11
|
};
|
|
12
|
-
export declare function SubscriptionTabs({ customerPortal, hiddenSections, textOverrides, theme
|
|
12
|
+
export declare function SubscriptionTabs({ customerPortal, hiddenSections, textOverrides, theme }: SubscriptionTabsProps): JSX.Element | null;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { Currency } from '@stigg/js-client-sdk';
|
|
2
2
|
export declare const currencyPriceFormatter: ({ amount, currency, locale, maximumFractionDigits, }: {
|
|
3
3
|
amount: number;
|
|
4
|
-
currency?:
|
|
4
|
+
currency?: string | undefined;
|
|
5
5
|
locale?: string | undefined;
|
|
6
6
|
maximumFractionDigits?: number | undefined;
|
|
7
7
|
}) => string;
|
|
@@ -1,5 +1,7 @@
|
|
|
1
|
-
import { PaywallPlan } from '
|
|
1
|
+
import { PaywallPlan } from '../paywall/types';
|
|
2
2
|
import { BillingPeriod, Price, PriceTierFragment, Subscription } from '@stigg/js-client-sdk';
|
|
3
|
+
export declare function getPriceFeatureUnit(price: Price): string;
|
|
4
|
+
export declare function getTierByQuantity(tiers: PriceTierFragment[], quantity: number): PriceTierFragment | undefined;
|
|
3
5
|
export declare function calculateTierPrice(price: Price, currentTier: PriceTierFragment, selectedBillingPeriod: BillingPeriod, shouldShowMonthlyPriceAmount: boolean): number;
|
|
4
6
|
export declare function getSelectedTier(plan: PaywallPlan, billingPeriod: BillingPeriod, currentSubscription: Subscription | null, selectedTierByFeature: Record<string, PriceTierFragment>): Record<string, PriceTierFragment>;
|
|
5
7
|
export declare enum PriceTierComparison {
|
package/dist/index.d.ts
CHANGED
|
@@ -3,6 +3,7 @@ export * from '@stigg/js-client-sdk';
|
|
|
3
3
|
export { Paywall, PaywallProps, OnPlanSelectedCallbackFn, PaywallPlan, SubscribeIntentionType, PaywallLocalization, } from './components/paywall';
|
|
4
4
|
export { CustomerPortalProvider, CustomerPortal, CustomerPortalProps, CustomerPortalSection, AddonsList, PaymentDetailsSection, InvoicesSection, CustomerUsageData, CustomerUsageDataProps, SubscriptionsOverview, SubscriptionsOverviewProps, Promotions, } from './components/customerPortal';
|
|
5
5
|
export { StiggProvider, StiggProviderProps, useStiggContext, StiggContextValue, StiggContext, } from './components/StiggProvider';
|
|
6
|
+
export { Checkout, CheckoutProps, CheckoutTheme } from './components/checkout';
|
|
6
7
|
export { useWaitForCheckoutCompleted, ProvisionStatus } from './components/hooks';
|
|
7
8
|
export { HorizontalAlignment, TextAlignment } from './theme/types';
|
|
8
9
|
export { CustomizedTheme as Theme } from './theme/Theme';
|