@stigg/react-sdk 5.7.0 → 5.9.0
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/summary/components/GraduatedPriceBreakdown.d.ts +7 -0
- package/dist/components/checkout/summary/components/LineItems.d.ts +4 -5
- package/dist/components/checkout/summary/components/getPriceBreakdownString.d.ts +12 -0
- package/dist/components/common/CollapsableSectionIcon.d.ts +5 -0
- package/dist/components/common/Typography.d.ts +2 -2
- package/dist/components/utils/numberUtils.d.ts +3 -0
- package/dist/components/utils/priceTierUtils.d.ts +2 -0
- package/dist/react-sdk.cjs.development.js +248 -89
- 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 +258 -94
- package/dist/react-sdk.esm.js.map +1 -1
- package/dist/theme/getResolvedTheme.d.ts +1 -0
- package/dist/theme/types.d.ts +1 -0
- package/package.json +1 -1
- package/src/components/checkout/summary/components/GraduatedPriceBreakdown.tsx +66 -0
- package/src/components/checkout/summary/components/LineItems.tsx +65 -42
- package/src/components/checkout/summary/components/getPriceBreakdownString.ts +56 -0
- package/src/components/common/CollapsableSectionIcon.tsx +9 -0
- package/src/components/common/Typography.tsx +1 -0
- package/src/components/utils/numberUtils.ts +3 -0
- package/src/components/utils/priceTierUtils.ts +8 -0
- package/src/theme/getResolvedTheme.ts +2 -1
- package/src/theme/types.ts +1 -0
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import { Price } from '@stigg/js-client-sdk';
|
|
3
|
+
export declare type GraduatedPriceBreakdownProps = {
|
|
4
|
+
price: Price;
|
|
5
|
+
unitQuantity: number;
|
|
6
|
+
};
|
|
7
|
+
export declare function GraduatedPriceBreakdown({ price, unitQuantity }: GraduatedPriceBreakdownProps): JSX.Element | null;
|
|
@@ -6,15 +6,14 @@ export declare const LineItemContainer: import("@emotion/styled/macro").StyledCo
|
|
|
6
6
|
theme?: import("@emotion/react").Theme | undefined;
|
|
7
7
|
as?: "symbol" | "object" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "big" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "footer" | "form" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "keygen" | "label" | "legend" | "li" | "link" | "main" | "map" | "mark" | "menu" | "menuitem" | "meta" | "meter" | "nav" | "noindex" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "param" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "slot" | "script" | "section" | "select" | "small" | "source" | "span" | "strong" | "style" | "sub" | "summary" | "sup" | "table" | "template" | "tbody" | "td" | "textarea" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr" | "webview" | "svg" | "animate" | "animateMotion" | "animateTransform" | "circle" | "clipPath" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "filter" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "marker" | "mask" | "metadata" | "mpath" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "stop" | "switch" | "text" | "textPath" | "tspan" | "use" | "view" | React.ComponentClass<any, any> | React.FunctionComponent<any> | undefined;
|
|
8
8
|
}, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
|
|
9
|
+
export declare const NestedBreakdownContainer: import("@emotion/styled/macro").StyledComponent<{
|
|
10
|
+
theme?: import("@emotion/react").Theme | undefined;
|
|
11
|
+
as?: "symbol" | "object" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "big" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "footer" | "form" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "keygen" | "label" | "legend" | "li" | "link" | "main" | "map" | "mark" | "menu" | "menuitem" | "meta" | "meter" | "nav" | "noindex" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "param" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "slot" | "script" | "section" | "select" | "small" | "source" | "span" | "strong" | "style" | "sub" | "summary" | "sup" | "table" | "template" | "tbody" | "td" | "textarea" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr" | "webview" | "svg" | "animate" | "animateMotion" | "animateTransform" | "circle" | "clipPath" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "filter" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "marker" | "mask" | "metadata" | "mpath" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "stop" | "switch" | "text" | "textPath" | "tspan" | "use" | "view" | React.ComponentClass<any, any> | React.FunctionComponent<any> | undefined;
|
|
12
|
+
}, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
|
|
9
13
|
export declare const LineItemRow: import("@emotion/styled/macro").StyledComponent<{
|
|
10
14
|
theme?: import("@emotion/react").Theme | undefined;
|
|
11
15
|
as?: "symbol" | "object" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "big" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "footer" | "form" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "keygen" | "label" | "legend" | "li" | "link" | "main" | "map" | "mark" | "menu" | "menuitem" | "meta" | "meter" | "nav" | "noindex" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "param" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "slot" | "script" | "section" | "select" | "small" | "source" | "span" | "strong" | "style" | "sub" | "summary" | "sup" | "table" | "template" | "tbody" | "td" | "textarea" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr" | "webview" | "svg" | "animate" | "animateMotion" | "animateTransform" | "circle" | "clipPath" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "filter" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "marker" | "mask" | "metadata" | "mpath" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "stop" | "switch" | "text" | "textPath" | "tspan" | "use" | "view" | React.ComponentClass<any, any> | React.FunctionComponent<any> | undefined;
|
|
12
16
|
}, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
|
|
13
|
-
export declare const getPriceString: ({ amount, price, quantity }: {
|
|
14
|
-
amount: number;
|
|
15
|
-
price: Price;
|
|
16
|
-
quantity: number;
|
|
17
|
-
}) => string;
|
|
18
17
|
export declare const BilledPriceLineItem: ({ checkoutLocalization, label, quantity, price, }: {
|
|
19
18
|
checkoutLocalization: CheckoutLocalization;
|
|
20
19
|
label: string;
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { BillingModel, BillingPeriod, Currency, Price } from '@stigg/js-client-sdk';
|
|
2
|
+
export declare type GetPriceBreakdownStringProps = {
|
|
3
|
+
totalAmount: number;
|
|
4
|
+
quantity: number;
|
|
5
|
+
tiersMode: Price['tiersMode'];
|
|
6
|
+
tiers: Price['tiers'];
|
|
7
|
+
currency: Currency;
|
|
8
|
+
pricingModel: BillingModel;
|
|
9
|
+
billingPeriod: BillingPeriod;
|
|
10
|
+
};
|
|
11
|
+
export declare function formatPricePerUnit({ quantity, totalAmount, pricingModel, billingPeriod, currency, }: GetPriceBreakdownStringProps): string;
|
|
12
|
+
export declare function getPriceBreakdownString(params: GetPriceBreakdownStringProps): string;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import React, { CSSProperties } from 'react';
|
|
2
2
|
import { TypeProps } from 'styled-typography';
|
|
3
|
-
declare type Colors = 'primary' | 'primary.main' | 'primary.main.light' | 'secondary' | 'disabled' | 'white' | 'warning' | 'error';
|
|
3
|
+
declare type Colors = 'primary' | 'primary.main' | 'primary.main.light' | 'secondary' | 'tertiary' | 'disabled' | 'white' | 'warning' | 'error';
|
|
4
4
|
export declare type TypographyProps = {
|
|
5
5
|
children: React.ReactNode;
|
|
6
6
|
variant?: 'h1' | 'h3' | 'h6' | 'body1' | 'caption';
|
|
@@ -16,7 +16,7 @@ export declare const Typography: React.ForwardRefExoticComponent<{
|
|
|
16
16
|
children: React.ReactNode;
|
|
17
17
|
variant?: "h1" | "h3" | "h6" | "body1" | "caption" | undefined;
|
|
18
18
|
style?: CSSProperties | undefined;
|
|
19
|
-
color?: "primary" | "primary.main" | "primary.main.light" | "secondary" | "disabled" | "white" | "warning" | "error" | undefined;
|
|
19
|
+
color?: "primary" | "primary.main" | "primary.main.light" | "secondary" | "tertiary" | "disabled" | "white" | "warning" | "error" | undefined;
|
|
20
20
|
overrideColor?: string | undefined;
|
|
21
21
|
className?: string | undefined;
|
|
22
22
|
bold?: boolean | undefined;
|
|
@@ -12,6 +12,8 @@ export declare function calculateTierPriceGraduated(tiers: PriceTierFragment[],
|
|
|
12
12
|
};
|
|
13
13
|
export declare function calculateTierPrice(price: Pick<Price, 'tiers' | 'tiersMode'>, unitQuantity: number, selectedBillingPeriod?: BillingPeriod, shouldShowMonthlyPriceAmount?: boolean): number;
|
|
14
14
|
export declare function hasTierWithUnitPrice(tiers: PriceTierFragment[] | null | undefined): boolean | undefined;
|
|
15
|
+
export declare function isBulkTiers(tiers: PriceTierFragment[] | null | undefined): boolean | undefined;
|
|
16
|
+
export declare function isQuantityInFirstTier(tiers: PriceTierFragment[] | null | undefined, quantity: number): boolean | 0 | null | undefined;
|
|
15
17
|
export declare function getTiersPerUnitQuantities(plan: PaywallPlan, billingPeriod: BillingPeriod, currentSubscription: Subscription | null, selectDefaultTierIndex?: SelectDefaultTierIndexFn): Record<string, number>;
|
|
16
18
|
export declare enum PriceTierComparison {
|
|
17
19
|
Lower = -1,
|