@telia/teddy 0.7.48 → 0.7.49
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/shopping-cart/index.d.ts +1 -1
- package/dist/components/shopping-cart/shopping-cart-continue.cjs +1 -1
- package/dist/components/shopping-cart/shopping-cart-continue.js +1 -1
- package/dist/components/shopping-cart/shopping-cart-items.cjs +1 -1
- package/dist/components/shopping-cart/shopping-cart-items.js +1 -1
- package/dist/components/shopping-cart/shopping-cart-payment.cjs +93 -69
- package/dist/components/shopping-cart/shopping-cart-payment.d.ts +10 -1
- package/dist/components/shopping-cart/shopping-cart-payment.js +94 -70
- package/dist/components/shopping-cart/shopping-cart-root.cjs +1 -1
- package/dist/components/shopping-cart/shopping-cart-root.js +1 -1
- package/dist/shopping-cart.module-C9EOksct.cjs +62 -0
- package/dist/shopping-cart.module-ClaAAxQV.js +63 -0
- package/dist/style.css +69 -31
- package/package.json +1 -1
- package/dist/shopping-cart.module-BCoLrcMI.cjs +0 -48
- package/dist/shopping-cart.module-DA25l2hr.js +0 -49
|
@@ -13,7 +13,7 @@ export declare const ShoppingCart: {
|
|
|
13
13
|
displayName: string;
|
|
14
14
|
};
|
|
15
15
|
Payment: {
|
|
16
|
-
({ delivery, totalPriceUpfront, totalPriceMonthly, totalPriceFirstInvoice, paymentTooltip, monthlyPriceDetails, totalVAT, totalPriceWithoutVAT, className, }: PaymentProps): import("react/jsx-runtime").JSX.Element;
|
|
16
|
+
({ delivery, totalPriceUpfront, totalPriceMonthly, totalPriceFirstInvoice, paymentTooltip, monthlyPriceDetails, totalVAT, totalPriceWithoutVAT, highlightedLine, className, }: PaymentProps): import("react/jsx-runtime").JSX.Element;
|
|
17
17
|
displayName: string;
|
|
18
18
|
};
|
|
19
19
|
Disclaimer: {
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
3
|
const jsxRuntime = require("react/jsx-runtime");
|
|
4
4
|
const clsx = require("clsx");
|
|
5
|
-
const shoppingCart_module = require("../../shopping-cart.module-
|
|
5
|
+
const shoppingCart_module = require("../../shopping-cart.module-C9EOksct.cjs");
|
|
6
6
|
const Continue = ({ children, className }) => {
|
|
7
7
|
return /* @__PURE__ */ jsxRuntime.jsx("section", { className: clsx.clsx(className), children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${shoppingCart_module.styles.sectionInner} ${shoppingCart_module.styles.continueContainer}`, children }) });
|
|
8
8
|
};
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { jsx } from "react/jsx-runtime";
|
|
2
2
|
import { clsx } from "clsx";
|
|
3
|
-
import { s as styles } from "../../shopping-cart.module-
|
|
3
|
+
import { s as styles } from "../../shopping-cart.module-ClaAAxQV.js";
|
|
4
4
|
const Continue = ({ children, className }) => {
|
|
5
5
|
return /* @__PURE__ */ jsx("section", { className: clsx(className), children: /* @__PURE__ */ jsx("div", { className: `${styles.sectionInner} ${styles.continueContainer}`, children }) });
|
|
6
6
|
};
|
|
@@ -4,7 +4,7 @@ const jsxRuntime = require("react/jsx-runtime");
|
|
|
4
4
|
const React = require("react");
|
|
5
5
|
const clsx = require("clsx");
|
|
6
6
|
const components_shoppingCart_shoppingCartItem = require("./shopping-cart-item.cjs");
|
|
7
|
-
const shoppingCart_module = require("../../shopping-cart.module-
|
|
7
|
+
const shoppingCart_module = require("../../shopping-cart.module-C9EOksct.cjs");
|
|
8
8
|
const components_shoppingCart_utils = require("./utils.cjs");
|
|
9
9
|
const ItemGroup = ({ cartItem, onChangeQuantity, onRemoveItem }) => {
|
|
10
10
|
const renderCartItem = (item) => /* @__PURE__ */ jsxRuntime.jsxs(React.Fragment, { children: [
|
|
@@ -2,7 +2,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
|
|
|
2
2
|
import { Fragment } from "react";
|
|
3
3
|
import { clsx } from "clsx";
|
|
4
4
|
import { Item } from "./shopping-cart-item.js";
|
|
5
|
-
import { s as styles } from "../../shopping-cart.module-
|
|
5
|
+
import { s as styles } from "../../shopping-cart.module-ClaAAxQV.js";
|
|
6
6
|
import { sortByType } from "./utils.js";
|
|
7
7
|
const ItemGroup = ({ cartItem, onChangeQuantity, onRemoveItem }) => {
|
|
8
8
|
const renderCartItem = (item) => /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
@@ -7,8 +7,23 @@ const components_icon_icon = require("../icon/icon.cjs");
|
|
|
7
7
|
const components_tooltip_index = require("../tooltip/index.cjs");
|
|
8
8
|
const components_progressBar_progressBar = require("../progress-bar/progress-bar.cjs");
|
|
9
9
|
const components_shoppingCart_shoppingCartContext = require("./shopping-cart-context.cjs");
|
|
10
|
-
const shoppingCart_module = require("../../shopping-cart.module-
|
|
11
|
-
const
|
|
10
|
+
const shoppingCart_module = require("../../shopping-cart.module-C9EOksct.cjs");
|
|
11
|
+
const components_box_box = require("../box/box.cjs");
|
|
12
|
+
const HighlightedLine = ({ icon, heading, price, description }) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: shoppingCart_module.styles.highlightedLine, children: [
|
|
13
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: shoppingCart_module.styles.highlightedLineTop, children: [
|
|
14
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: shoppingCart_module.styles.highlightedLineLeft, children: [
|
|
15
|
+
icon && /* @__PURE__ */ jsxRuntime.jsx(components_icon_icon.Icon, { name: icon, className: shoppingCart_module.styles.highlightedLineIcon }),
|
|
16
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: shoppingCart_module.styles.highlightedLineHeading, children: heading })
|
|
17
|
+
] }),
|
|
18
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: shoppingCart_module.styles.highlightedLinePrice, children: price })
|
|
19
|
+
] }),
|
|
20
|
+
description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: shoppingCart_module.styles.highlightedLineDescription, children: description })
|
|
21
|
+
] });
|
|
22
|
+
const MonthlyPriceDetailsDisplay = ({
|
|
23
|
+
monthlyPriceDetails,
|
|
24
|
+
totalPriceMonthly,
|
|
25
|
+
highlightedLine
|
|
26
|
+
}) => {
|
|
12
27
|
const { formatPrice } = components_shoppingCart_shoppingCartContext.useShoppingCart();
|
|
13
28
|
if (!monthlyPriceDetails || monthlyPriceDetails.length === 0) {
|
|
14
29
|
return null;
|
|
@@ -24,6 +39,10 @@ const MonthlyPriceDetailsDisplay = ({ monthlyPriceDetails, totalPriceMonthly })
|
|
|
24
39
|
formatPrice(totalPriceMonthly || 0),
|
|
25
40
|
"/md."
|
|
26
41
|
] })
|
|
42
|
+
] }),
|
|
43
|
+
(highlightedLine == null ? void 0 : highlightedLine.isMonthly) && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
44
|
+
/* @__PURE__ */ jsxRuntime.jsx("hr", { className: shoppingCart_module.styles.horizontalRule }),
|
|
45
|
+
/* @__PURE__ */ jsxRuntime.jsx(HighlightedLine, { ...highlightedLine })
|
|
27
46
|
] })
|
|
28
47
|
] });
|
|
29
48
|
};
|
|
@@ -36,85 +55,90 @@ const Payment = ({
|
|
|
36
55
|
monthlyPriceDetails,
|
|
37
56
|
totalVAT,
|
|
38
57
|
totalPriceWithoutVAT,
|
|
58
|
+
highlightedLine,
|
|
39
59
|
className
|
|
40
60
|
}) => {
|
|
41
61
|
const { formatPrice, hasPaid } = components_shoppingCart_shoppingCartContext.useShoppingCart();
|
|
42
62
|
const hasDelivery = delivery && Object.keys(delivery).length > 0;
|
|
43
|
-
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
44
|
-
/* @__PURE__ */ jsxRuntime.jsxs("
|
|
45
|
-
|
|
46
|
-
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: shoppingCart_module.styles.
|
|
47
|
-
/* @__PURE__ */ jsxRuntime.
|
|
48
|
-
|
|
63
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
64
|
+
/* @__PURE__ */ jsxRuntime.jsxs("section", { className: clsx.clsx(shoppingCart_module.styles.section, className), children: [
|
|
65
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: shoppingCart_module.styles.sectionInner, children: [
|
|
66
|
+
hasDelivery && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: shoppingCart_module.styles.deliveryContainer, children: [
|
|
67
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: shoppingCart_module.styles.deliveryLeft, children: [
|
|
68
|
+
/* @__PURE__ */ jsxRuntime.jsx(components_icon_icon.Icon, { name: delivery.icon || "delivery", className: shoppingCart_module.styles.deliveryIcon }),
|
|
69
|
+
delivery.label || "Levering"
|
|
70
|
+
] }),
|
|
71
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: shoppingCart_module.styles.labelMedium, children: delivery.value })
|
|
49
72
|
] }),
|
|
50
|
-
/* @__PURE__ */ jsxRuntime.
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
"
|
|
73
|
+
hasDelivery && delivery.progressBar && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: shoppingCart_module.styles.deliveryProgressbar, children: [
|
|
74
|
+
delivery.progressBar.text || /* @__PURE__ */ jsxRuntime.jsxs("div", { className: shoppingCart_module.styles.deliveryProgressbarText, children: [
|
|
75
|
+
"Du har",
|
|
76
|
+
" ",
|
|
77
|
+
/* @__PURE__ */ jsxRuntime.jsxs("span", { className: shoppingCart_module.styles.labelMedium, children: [
|
|
78
|
+
Math.ceil(delivery.progressBar.max - delivery.progressBar.progress),
|
|
79
|
+
",-"
|
|
80
|
+
] }),
|
|
81
|
+
" ",
|
|
82
|
+
"igjen til ",
|
|
83
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: shoppingCart_module.styles.labelMedium, children: "fri frakt" })
|
|
59
84
|
] }),
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
85
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: shoppingCart_module.styles.progressBarWrapper, children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
86
|
+
components_progressBar_progressBar.ProgressBar,
|
|
87
|
+
{
|
|
88
|
+
colorTheme: "light",
|
|
89
|
+
progress: delivery.progressBar.max > delivery.progressBar.min ? (delivery.progressBar.progress - delivery.progressBar.min) / (delivery.progressBar.max - delivery.progressBar.min) * 100 : 0
|
|
90
|
+
}
|
|
91
|
+
) })
|
|
63
92
|
] }),
|
|
64
|
-
/* @__PURE__ */ jsxRuntime.jsx("
|
|
65
|
-
|
|
66
|
-
{
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
paymentTooltip && /* @__PURE__ */ jsxRuntime.jsxs(components_tooltip_index.Tooltip, { children: [
|
|
78
|
-
/* @__PURE__ */ jsxRuntime.jsx(components_tooltip_index.Tooltip.Trigger, { className: shoppingCart_module.styles.tooltipTrigger }),
|
|
79
|
-
/* @__PURE__ */ jsxRuntime.jsx(components_tooltip_index.Tooltip.Content, { className: shoppingCart_module.styles.tooltipContent, children: /* @__PURE__ */ jsxRuntime.jsx("div", { dangerouslySetInnerHTML: { __html: paymentTooltip } }) })
|
|
93
|
+
hasDelivery && !!totalPriceMonthly && /* @__PURE__ */ jsxRuntime.jsx("hr", { className: shoppingCart_module.styles.horizontalRule }),
|
|
94
|
+
!!totalPriceMonthly && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: shoppingCart_module.styles.priceMonthlyContainer, children: [
|
|
95
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: shoppingCart_module.styles.priceRow, children: [
|
|
96
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: shoppingCart_module.styles.flexRow, children: [
|
|
97
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: shoppingCart_module.styles.labelMedium, children: "Betale pr md:" }),
|
|
98
|
+
paymentTooltip && /* @__PURE__ */ jsxRuntime.jsxs(components_tooltip_index.Tooltip, { children: [
|
|
99
|
+
/* @__PURE__ */ jsxRuntime.jsx(components_tooltip_index.Tooltip.Trigger, { className: shoppingCart_module.styles.tooltipTrigger }),
|
|
100
|
+
/* @__PURE__ */ jsxRuntime.jsx(components_tooltip_index.Tooltip.Content, { className: shoppingCart_module.styles.tooltipContent, children: /* @__PURE__ */ jsxRuntime.jsx("div", { dangerouslySetInnerHTML: { __html: paymentTooltip } }) })
|
|
101
|
+
] })
|
|
102
|
+
] }),
|
|
103
|
+
(!monthlyPriceDetails || monthlyPriceDetails.length === 0) && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: shoppingCart_module.styles.labelMedium, children: [
|
|
104
|
+
formatPrice(totalPriceMonthly),
|
|
105
|
+
"/md."
|
|
80
106
|
] })
|
|
81
107
|
] }),
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
108
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
109
|
+
MonthlyPriceDetailsDisplay,
|
|
110
|
+
{
|
|
111
|
+
monthlyPriceDetails,
|
|
112
|
+
totalPriceMonthly,
|
|
113
|
+
highlightedLine
|
|
114
|
+
}
|
|
115
|
+
)
|
|
116
|
+
] })
|
|
117
|
+
] }),
|
|
118
|
+
(!!totalPriceUpfront || !!totalPriceFirstInvoice) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: shoppingCart_module.styles.priceUpfrontContainer, children: [
|
|
119
|
+
!!totalPriceWithoutVAT && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: shoppingCart_module.styles.priceRow, children: [
|
|
120
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: shoppingCart_module.styles.labelMedium, children: "Sum:" }),
|
|
121
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: shoppingCart_module.styles.labelMedium, children: formatPrice(totalPriceWithoutVAT) })
|
|
86
122
|
] }),
|
|
87
|
-
/* @__PURE__ */ jsxRuntime.
|
|
88
|
-
|
|
89
|
-
{
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
}
|
|
93
|
-
|
|
123
|
+
!!totalVAT && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: shoppingCart_module.styles.priceRow, children: [
|
|
124
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: shoppingCart_module.styles.labelMedium, children: "MVA:" }),
|
|
125
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: shoppingCart_module.styles.labelMedium, children: formatPrice(totalVAT) })
|
|
126
|
+
] }),
|
|
127
|
+
!!totalPriceUpfront && !hasPaid && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: shoppingCart_module.styles.priceRow, children: [
|
|
128
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: shoppingCart_module.styles.labelMedium, children: "Betale nå:" }),
|
|
129
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: shoppingCart_module.styles.labelMedium, children: formatPrice(totalPriceUpfront) })
|
|
130
|
+
] }),
|
|
131
|
+
!!totalPriceUpfront && hasPaid && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: shoppingCart_module.styles.priceRow, children: [
|
|
132
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: shoppingCart_module.styles.labelMedium, children: "Betalt:" }),
|
|
133
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: shoppingCart_module.styles.labelMedium, children: formatPrice(totalPriceUpfront) })
|
|
134
|
+
] }),
|
|
135
|
+
!!totalPriceFirstInvoice && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: shoppingCart_module.styles.priceRow, children: [
|
|
136
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: shoppingCart_module.styles.labelMedium, children: "Å betale på første faktura:" }),
|
|
137
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: shoppingCart_module.styles.labelMedium, children: formatPrice(totalPriceFirstInvoice) })
|
|
138
|
+
] })
|
|
94
139
|
] })
|
|
95
140
|
] }),
|
|
96
|
-
|
|
97
|
-
!!totalPriceWithoutVAT && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: shoppingCart_module.styles.priceRow, children: [
|
|
98
|
-
/* @__PURE__ */ jsxRuntime.jsx("span", { className: shoppingCart_module.styles.labelMedium, children: "Sum:" }),
|
|
99
|
-
/* @__PURE__ */ jsxRuntime.jsx("span", { className: shoppingCart_module.styles.labelMedium, children: formatPrice(totalPriceWithoutVAT) })
|
|
100
|
-
] }),
|
|
101
|
-
!!totalVAT && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: shoppingCart_module.styles.priceRow, children: [
|
|
102
|
-
/* @__PURE__ */ jsxRuntime.jsx("span", { className: shoppingCart_module.styles.labelMedium, children: "MVA:" }),
|
|
103
|
-
/* @__PURE__ */ jsxRuntime.jsx("span", { className: shoppingCart_module.styles.labelMedium, children: formatPrice(totalVAT) })
|
|
104
|
-
] }),
|
|
105
|
-
!!totalPriceUpfront && !hasPaid && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: shoppingCart_module.styles.priceRow, children: [
|
|
106
|
-
/* @__PURE__ */ jsxRuntime.jsx("span", { className: shoppingCart_module.styles.labelMedium, children: "Betale nå:" }),
|
|
107
|
-
/* @__PURE__ */ jsxRuntime.jsx("span", { className: shoppingCart_module.styles.labelMedium, children: formatPrice(totalPriceUpfront) })
|
|
108
|
-
] }),
|
|
109
|
-
!!totalPriceUpfront && hasPaid && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: shoppingCart_module.styles.priceRow, children: [
|
|
110
|
-
/* @__PURE__ */ jsxRuntime.jsx("span", { className: shoppingCart_module.styles.labelMedium, children: "Betalt:" }),
|
|
111
|
-
/* @__PURE__ */ jsxRuntime.jsx("span", { className: shoppingCart_module.styles.labelMedium, children: formatPrice(totalPriceUpfront) })
|
|
112
|
-
] }),
|
|
113
|
-
!!totalPriceFirstInvoice && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: shoppingCart_module.styles.priceRow, children: [
|
|
114
|
-
/* @__PURE__ */ jsxRuntime.jsx("span", { className: shoppingCart_module.styles.labelMedium, children: "Å betale på første faktura:" }),
|
|
115
|
-
/* @__PURE__ */ jsxRuntime.jsx("span", { className: shoppingCart_module.styles.labelMedium, children: formatPrice(totalPriceFirstInvoice) })
|
|
116
|
-
] })
|
|
117
|
-
] })
|
|
141
|
+
highlightedLine && !highlightedLine.isMonthly && /* @__PURE__ */ jsxRuntime.jsx(components_box_box.Box, { p: "200", children: /* @__PURE__ */ jsxRuntime.jsx(HighlightedLine, { ...highlightedLine }) })
|
|
118
142
|
] });
|
|
119
143
|
};
|
|
120
144
|
Payment.displayName = "Payment";
|
|
@@ -1,5 +1,13 @@
|
|
|
1
|
+
import { IconName } from '../icon';
|
|
1
2
|
import { CartDelivery } from './types';
|
|
2
3
|
|
|
4
|
+
export interface HighlightedLineProps {
|
|
5
|
+
icon?: IconName;
|
|
6
|
+
heading: string;
|
|
7
|
+
price: string;
|
|
8
|
+
description?: string;
|
|
9
|
+
isMonthly: boolean;
|
|
10
|
+
}
|
|
3
11
|
export interface PaymentProps {
|
|
4
12
|
delivery?: CartDelivery;
|
|
5
13
|
totalPriceFirstInvoice?: number;
|
|
@@ -12,9 +20,10 @@ export interface PaymentProps {
|
|
|
12
20
|
totalPriceUpfront?: number;
|
|
13
21
|
totalVAT?: number;
|
|
14
22
|
totalPriceWithoutVAT?: number;
|
|
23
|
+
highlightedLine?: HighlightedLineProps;
|
|
15
24
|
className?: string;
|
|
16
25
|
}
|
|
17
26
|
export declare const Payment: {
|
|
18
|
-
({ delivery, totalPriceUpfront, totalPriceMonthly, totalPriceFirstInvoice, paymentTooltip, monthlyPriceDetails, totalVAT, totalPriceWithoutVAT, className, }: PaymentProps): import("react/jsx-runtime").JSX.Element;
|
|
27
|
+
({ delivery, totalPriceUpfront, totalPriceMonthly, totalPriceFirstInvoice, paymentTooltip, monthlyPriceDetails, totalVAT, totalPriceWithoutVAT, highlightedLine, className, }: PaymentProps): import("react/jsx-runtime").JSX.Element;
|
|
19
28
|
displayName: string;
|
|
20
29
|
};
|
|
@@ -1,12 +1,27 @@
|
|
|
1
|
-
import { jsxs, jsx } from "react/jsx-runtime";
|
|
1
|
+
import { jsxs, Fragment, jsx } from "react/jsx-runtime";
|
|
2
2
|
import { clsx } from "clsx";
|
|
3
3
|
import "../../assets/sprite.44b293a1-teddy.svg";
|
|
4
4
|
import { Icon } from "../icon/icon.js";
|
|
5
5
|
import { Tooltip } from "../tooltip/index.js";
|
|
6
6
|
import { ProgressBar } from "../progress-bar/progress-bar.js";
|
|
7
7
|
import { useShoppingCart } from "./shopping-cart-context.js";
|
|
8
|
-
import { s as styles } from "../../shopping-cart.module-
|
|
9
|
-
|
|
8
|
+
import { s as styles } from "../../shopping-cart.module-ClaAAxQV.js";
|
|
9
|
+
import { Box } from "../box/box.js";
|
|
10
|
+
const HighlightedLine = ({ icon, heading, price, description }) => /* @__PURE__ */ jsxs("div", { className: styles.highlightedLine, children: [
|
|
11
|
+
/* @__PURE__ */ jsxs("div", { className: styles.highlightedLineTop, children: [
|
|
12
|
+
/* @__PURE__ */ jsxs("div", { className: styles.highlightedLineLeft, children: [
|
|
13
|
+
icon && /* @__PURE__ */ jsx(Icon, { name: icon, className: styles.highlightedLineIcon }),
|
|
14
|
+
/* @__PURE__ */ jsx("span", { className: styles.highlightedLineHeading, children: heading })
|
|
15
|
+
] }),
|
|
16
|
+
/* @__PURE__ */ jsx("span", { className: styles.highlightedLinePrice, children: price })
|
|
17
|
+
] }),
|
|
18
|
+
description && /* @__PURE__ */ jsx("p", { className: styles.highlightedLineDescription, children: description })
|
|
19
|
+
] });
|
|
20
|
+
const MonthlyPriceDetailsDisplay = ({
|
|
21
|
+
monthlyPriceDetails,
|
|
22
|
+
totalPriceMonthly,
|
|
23
|
+
highlightedLine
|
|
24
|
+
}) => {
|
|
10
25
|
const { formatPrice } = useShoppingCart();
|
|
11
26
|
if (!monthlyPriceDetails || monthlyPriceDetails.length === 0) {
|
|
12
27
|
return null;
|
|
@@ -22,6 +37,10 @@ const MonthlyPriceDetailsDisplay = ({ monthlyPriceDetails, totalPriceMonthly })
|
|
|
22
37
|
formatPrice(totalPriceMonthly || 0),
|
|
23
38
|
"/md."
|
|
24
39
|
] })
|
|
40
|
+
] }),
|
|
41
|
+
(highlightedLine == null ? void 0 : highlightedLine.isMonthly) && /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
42
|
+
/* @__PURE__ */ jsx("hr", { className: styles.horizontalRule }),
|
|
43
|
+
/* @__PURE__ */ jsx(HighlightedLine, { ...highlightedLine })
|
|
25
44
|
] })
|
|
26
45
|
] });
|
|
27
46
|
};
|
|
@@ -34,85 +53,90 @@ const Payment = ({
|
|
|
34
53
|
monthlyPriceDetails,
|
|
35
54
|
totalVAT,
|
|
36
55
|
totalPriceWithoutVAT,
|
|
56
|
+
highlightedLine,
|
|
37
57
|
className
|
|
38
58
|
}) => {
|
|
39
59
|
const { formatPrice, hasPaid } = useShoppingCart();
|
|
40
60
|
const hasDelivery = delivery && Object.keys(delivery).length > 0;
|
|
41
|
-
return /* @__PURE__ */ jsxs(
|
|
42
|
-
/* @__PURE__ */ jsxs("
|
|
43
|
-
|
|
44
|
-
/* @__PURE__ */ jsxs("div", { className: styles.
|
|
45
|
-
/* @__PURE__ */
|
|
46
|
-
|
|
61
|
+
return /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
62
|
+
/* @__PURE__ */ jsxs("section", { className: clsx(styles.section, className), children: [
|
|
63
|
+
/* @__PURE__ */ jsxs("div", { className: styles.sectionInner, children: [
|
|
64
|
+
hasDelivery && /* @__PURE__ */ jsxs("div", { className: styles.deliveryContainer, children: [
|
|
65
|
+
/* @__PURE__ */ jsxs("div", { className: styles.deliveryLeft, children: [
|
|
66
|
+
/* @__PURE__ */ jsx(Icon, { name: delivery.icon || "delivery", className: styles.deliveryIcon }),
|
|
67
|
+
delivery.label || "Levering"
|
|
68
|
+
] }),
|
|
69
|
+
/* @__PURE__ */ jsx("span", { className: styles.labelMedium, children: delivery.value })
|
|
47
70
|
] }),
|
|
48
|
-
/* @__PURE__ */
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
"
|
|
71
|
+
hasDelivery && delivery.progressBar && /* @__PURE__ */ jsxs("div", { className: styles.deliveryProgressbar, children: [
|
|
72
|
+
delivery.progressBar.text || /* @__PURE__ */ jsxs("div", { className: styles.deliveryProgressbarText, children: [
|
|
73
|
+
"Du har",
|
|
74
|
+
" ",
|
|
75
|
+
/* @__PURE__ */ jsxs("span", { className: styles.labelMedium, children: [
|
|
76
|
+
Math.ceil(delivery.progressBar.max - delivery.progressBar.progress),
|
|
77
|
+
",-"
|
|
78
|
+
] }),
|
|
79
|
+
" ",
|
|
80
|
+
"igjen til ",
|
|
81
|
+
/* @__PURE__ */ jsx("span", { className: styles.labelMedium, children: "fri frakt" })
|
|
57
82
|
] }),
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
83
|
+
/* @__PURE__ */ jsx("div", { className: styles.progressBarWrapper, children: /* @__PURE__ */ jsx(
|
|
84
|
+
ProgressBar,
|
|
85
|
+
{
|
|
86
|
+
colorTheme: "light",
|
|
87
|
+
progress: delivery.progressBar.max > delivery.progressBar.min ? (delivery.progressBar.progress - delivery.progressBar.min) / (delivery.progressBar.max - delivery.progressBar.min) * 100 : 0
|
|
88
|
+
}
|
|
89
|
+
) })
|
|
61
90
|
] }),
|
|
62
|
-
/* @__PURE__ */ jsx("
|
|
63
|
-
|
|
64
|
-
{
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
paymentTooltip && /* @__PURE__ */ jsxs(Tooltip, { children: [
|
|
76
|
-
/* @__PURE__ */ jsx(Tooltip.Trigger, { className: styles.tooltipTrigger }),
|
|
77
|
-
/* @__PURE__ */ jsx(Tooltip.Content, { className: styles.tooltipContent, children: /* @__PURE__ */ jsx("div", { dangerouslySetInnerHTML: { __html: paymentTooltip } }) })
|
|
91
|
+
hasDelivery && !!totalPriceMonthly && /* @__PURE__ */ jsx("hr", { className: styles.horizontalRule }),
|
|
92
|
+
!!totalPriceMonthly && /* @__PURE__ */ jsxs("div", { className: styles.priceMonthlyContainer, children: [
|
|
93
|
+
/* @__PURE__ */ jsxs("div", { className: styles.priceRow, children: [
|
|
94
|
+
/* @__PURE__ */ jsxs("div", { className: styles.flexRow, children: [
|
|
95
|
+
/* @__PURE__ */ jsx("span", { className: styles.labelMedium, children: "Betale pr md:" }),
|
|
96
|
+
paymentTooltip && /* @__PURE__ */ jsxs(Tooltip, { children: [
|
|
97
|
+
/* @__PURE__ */ jsx(Tooltip.Trigger, { className: styles.tooltipTrigger }),
|
|
98
|
+
/* @__PURE__ */ jsx(Tooltip.Content, { className: styles.tooltipContent, children: /* @__PURE__ */ jsx("div", { dangerouslySetInnerHTML: { __html: paymentTooltip } }) })
|
|
99
|
+
] })
|
|
100
|
+
] }),
|
|
101
|
+
(!monthlyPriceDetails || monthlyPriceDetails.length === 0) && /* @__PURE__ */ jsxs("span", { className: styles.labelMedium, children: [
|
|
102
|
+
formatPrice(totalPriceMonthly),
|
|
103
|
+
"/md."
|
|
78
104
|
] })
|
|
79
105
|
] }),
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
106
|
+
/* @__PURE__ */ jsx(
|
|
107
|
+
MonthlyPriceDetailsDisplay,
|
|
108
|
+
{
|
|
109
|
+
monthlyPriceDetails,
|
|
110
|
+
totalPriceMonthly,
|
|
111
|
+
highlightedLine
|
|
112
|
+
}
|
|
113
|
+
)
|
|
114
|
+
] })
|
|
115
|
+
] }),
|
|
116
|
+
(!!totalPriceUpfront || !!totalPriceFirstInvoice) && /* @__PURE__ */ jsxs("div", { className: styles.priceUpfrontContainer, children: [
|
|
117
|
+
!!totalPriceWithoutVAT && /* @__PURE__ */ jsxs("div", { className: styles.priceRow, children: [
|
|
118
|
+
/* @__PURE__ */ jsx("span", { className: styles.labelMedium, children: "Sum:" }),
|
|
119
|
+
/* @__PURE__ */ jsx("span", { className: styles.labelMedium, children: formatPrice(totalPriceWithoutVAT) })
|
|
84
120
|
] }),
|
|
85
|
-
/* @__PURE__ */
|
|
86
|
-
|
|
87
|
-
{
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
}
|
|
91
|
-
|
|
121
|
+
!!totalVAT && /* @__PURE__ */ jsxs("div", { className: styles.priceRow, children: [
|
|
122
|
+
/* @__PURE__ */ jsx("span", { className: styles.labelMedium, children: "MVA:" }),
|
|
123
|
+
/* @__PURE__ */ jsx("span", { className: styles.labelMedium, children: formatPrice(totalVAT) })
|
|
124
|
+
] }),
|
|
125
|
+
!!totalPriceUpfront && !hasPaid && /* @__PURE__ */ jsxs("div", { className: styles.priceRow, children: [
|
|
126
|
+
/* @__PURE__ */ jsx("span", { className: styles.labelMedium, children: "Betale nå:" }),
|
|
127
|
+
/* @__PURE__ */ jsx("span", { className: styles.labelMedium, children: formatPrice(totalPriceUpfront) })
|
|
128
|
+
] }),
|
|
129
|
+
!!totalPriceUpfront && hasPaid && /* @__PURE__ */ jsxs("div", { className: styles.priceRow, children: [
|
|
130
|
+
/* @__PURE__ */ jsx("span", { className: styles.labelMedium, children: "Betalt:" }),
|
|
131
|
+
/* @__PURE__ */ jsx("span", { className: styles.labelMedium, children: formatPrice(totalPriceUpfront) })
|
|
132
|
+
] }),
|
|
133
|
+
!!totalPriceFirstInvoice && /* @__PURE__ */ jsxs("div", { className: styles.priceRow, children: [
|
|
134
|
+
/* @__PURE__ */ jsx("span", { className: styles.labelMedium, children: "Å betale på første faktura:" }),
|
|
135
|
+
/* @__PURE__ */ jsx("span", { className: styles.labelMedium, children: formatPrice(totalPriceFirstInvoice) })
|
|
136
|
+
] })
|
|
92
137
|
] })
|
|
93
138
|
] }),
|
|
94
|
-
|
|
95
|
-
!!totalPriceWithoutVAT && /* @__PURE__ */ jsxs("div", { className: styles.priceRow, children: [
|
|
96
|
-
/* @__PURE__ */ jsx("span", { className: styles.labelMedium, children: "Sum:" }),
|
|
97
|
-
/* @__PURE__ */ jsx("span", { className: styles.labelMedium, children: formatPrice(totalPriceWithoutVAT) })
|
|
98
|
-
] }),
|
|
99
|
-
!!totalVAT && /* @__PURE__ */ jsxs("div", { className: styles.priceRow, children: [
|
|
100
|
-
/* @__PURE__ */ jsx("span", { className: styles.labelMedium, children: "MVA:" }),
|
|
101
|
-
/* @__PURE__ */ jsx("span", { className: styles.labelMedium, children: formatPrice(totalVAT) })
|
|
102
|
-
] }),
|
|
103
|
-
!!totalPriceUpfront && !hasPaid && /* @__PURE__ */ jsxs("div", { className: styles.priceRow, children: [
|
|
104
|
-
/* @__PURE__ */ jsx("span", { className: styles.labelMedium, children: "Betale nå:" }),
|
|
105
|
-
/* @__PURE__ */ jsx("span", { className: styles.labelMedium, children: formatPrice(totalPriceUpfront) })
|
|
106
|
-
] }),
|
|
107
|
-
!!totalPriceUpfront && hasPaid && /* @__PURE__ */ jsxs("div", { className: styles.priceRow, children: [
|
|
108
|
-
/* @__PURE__ */ jsx("span", { className: styles.labelMedium, children: "Betalt:" }),
|
|
109
|
-
/* @__PURE__ */ jsx("span", { className: styles.labelMedium, children: formatPrice(totalPriceUpfront) })
|
|
110
|
-
] }),
|
|
111
|
-
!!totalPriceFirstInvoice && /* @__PURE__ */ jsxs("div", { className: styles.priceRow, children: [
|
|
112
|
-
/* @__PURE__ */ jsx("span", { className: styles.labelMedium, children: "Å betale på første faktura:" }),
|
|
113
|
-
/* @__PURE__ */ jsx("span", { className: styles.labelMedium, children: formatPrice(totalPriceFirstInvoice) })
|
|
114
|
-
] })
|
|
115
|
-
] })
|
|
139
|
+
highlightedLine && !highlightedLine.isMonthly && /* @__PURE__ */ jsx(Box, { p: "200", children: /* @__PURE__ */ jsx(HighlightedLine, { ...highlightedLine }) })
|
|
116
140
|
] });
|
|
117
141
|
};
|
|
118
142
|
Payment.displayName = "Payment";
|
|
@@ -4,7 +4,7 @@ const jsxRuntime = require("react/jsx-runtime");
|
|
|
4
4
|
const clsx = require("clsx");
|
|
5
5
|
const components_heading_heading = require("../heading/heading.cjs");
|
|
6
6
|
const components_shoppingCart_shoppingCartContext = require("./shopping-cart-context.cjs");
|
|
7
|
-
const shoppingCart_module = require("../../shopping-cart.module-
|
|
7
|
+
const shoppingCart_module = require("../../shopping-cart.module-C9EOksct.cjs");
|
|
8
8
|
const Root = ({ heading, children, formatPrice, hasPaid, isAllowedToDelete, readonly, className }) => {
|
|
9
9
|
return /* @__PURE__ */ jsxRuntime.jsx(components_shoppingCart_shoppingCartContext.ShoppingCartProvider, { value: { formatPrice, hasPaid, isAllowedToDelete, readonly }, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: clsx.clsx(shoppingCart_module.styles.shoppingCart, className), children: [
|
|
10
10
|
heading && /* @__PURE__ */ jsxRuntime.jsx("div", { className: shoppingCart_module.styles.sectionInner, children: /* @__PURE__ */ jsxRuntime.jsx(components_heading_heading.Heading, { className: shoppingCart_module.styles.heading, as: "h2", variant: "title-100", children: heading }) }),
|
|
@@ -2,7 +2,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
|
|
|
2
2
|
import { clsx } from "clsx";
|
|
3
3
|
import { Heading } from "../heading/heading.js";
|
|
4
4
|
import { ShoppingCartProvider } from "./shopping-cart-context.js";
|
|
5
|
-
import { s as styles } from "../../shopping-cart.module-
|
|
5
|
+
import { s as styles } from "../../shopping-cart.module-ClaAAxQV.js";
|
|
6
6
|
const Root = ({ heading, children, formatPrice, hasPaid, isAllowedToDelete, readonly, className }) => {
|
|
7
7
|
return /* @__PURE__ */ jsx(ShoppingCartProvider, { value: { formatPrice, hasPaid, isAllowedToDelete, readonly }, children: /* @__PURE__ */ jsxs("div", { className: clsx(styles.shoppingCart, className), children: [
|
|
8
8
|
heading && /* @__PURE__ */ jsx("div", { className: styles.sectionInner, children: /* @__PURE__ */ jsx(Heading, { className: styles.heading, as: "h2", variant: "title-100", children: heading }) }),
|
|
@@ -0,0 +1,62 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
const shoppingCart = "_shoppingCart_ct6d7_1";
|
|
3
|
+
const section = "_section_ct6d7_8";
|
|
4
|
+
const sectionBody = "_sectionBody_ct6d7_14";
|
|
5
|
+
const sectionInner = "_sectionInner_ct6d7_22";
|
|
6
|
+
const horizontalRule = "_horizontalRule_ct6d7_26";
|
|
7
|
+
const heading = "_heading_ct6d7_43";
|
|
8
|
+
const continueContainer = "_continueContainer_ct6d7_47";
|
|
9
|
+
const deliveryContainer = "_deliveryContainer_ct6d7_63";
|
|
10
|
+
const deliveryProgressbar = "_deliveryProgressbar_ct6d7_69";
|
|
11
|
+
const deliveryProgressbarText = "_deliveryProgressbarText_ct6d7_77";
|
|
12
|
+
const deliveryLeft = "_deliveryLeft_ct6d7_81";
|
|
13
|
+
const labelMedium = "_labelMedium_ct6d7_87";
|
|
14
|
+
const deliveryIcon = "_deliveryIcon_ct6d7_93";
|
|
15
|
+
const priceUpfrontContainer = "_priceUpfrontContainer_ct6d7_99";
|
|
16
|
+
const priceMonthlyDetailsTotal = "_priceMonthlyDetailsTotal_ct6d7_107";
|
|
17
|
+
const priceRow = "_priceRow_ct6d7_111";
|
|
18
|
+
const tooltipContent = "_tooltipContent_ct6d7_133";
|
|
19
|
+
const priceMonthlyContainer = "_priceMonthlyContainer_ct6d7_142";
|
|
20
|
+
const priceMonthlyDetails = "_priceMonthlyDetails_ct6d7_107";
|
|
21
|
+
const flexRow = "_flexRow_ct6d7_150";
|
|
22
|
+
const tooltipTrigger = "_tooltipTrigger_ct6d7_155";
|
|
23
|
+
const progressBarWrapper = "_progressBarWrapper_ct6d7_163";
|
|
24
|
+
const highlightedLine = "_highlightedLine_ct6d7_167";
|
|
25
|
+
const highlightedLineTop = "_highlightedLineTop_ct6d7_171";
|
|
26
|
+
const highlightedLineLeft = "_highlightedLineLeft_ct6d7_178";
|
|
27
|
+
const highlightedLineIcon = "_highlightedLineIcon_ct6d7_184";
|
|
28
|
+
const highlightedLineHeading = "_highlightedLineHeading_ct6d7_190";
|
|
29
|
+
const highlightedLinePrice = "_highlightedLinePrice_ct6d7_195";
|
|
30
|
+
const highlightedLineDescription = "_highlightedLineDescription_ct6d7_201";
|
|
31
|
+
const styles = {
|
|
32
|
+
shoppingCart,
|
|
33
|
+
section,
|
|
34
|
+
sectionBody,
|
|
35
|
+
sectionInner,
|
|
36
|
+
horizontalRule,
|
|
37
|
+
heading,
|
|
38
|
+
continueContainer,
|
|
39
|
+
deliveryContainer,
|
|
40
|
+
deliveryProgressbar,
|
|
41
|
+
deliveryProgressbarText,
|
|
42
|
+
deliveryLeft,
|
|
43
|
+
labelMedium,
|
|
44
|
+
deliveryIcon,
|
|
45
|
+
priceUpfrontContainer,
|
|
46
|
+
priceMonthlyDetailsTotal,
|
|
47
|
+
priceRow,
|
|
48
|
+
tooltipContent,
|
|
49
|
+
priceMonthlyContainer,
|
|
50
|
+
priceMonthlyDetails,
|
|
51
|
+
flexRow,
|
|
52
|
+
tooltipTrigger,
|
|
53
|
+
progressBarWrapper,
|
|
54
|
+
highlightedLine,
|
|
55
|
+
highlightedLineTop,
|
|
56
|
+
highlightedLineLeft,
|
|
57
|
+
highlightedLineIcon,
|
|
58
|
+
highlightedLineHeading,
|
|
59
|
+
highlightedLinePrice,
|
|
60
|
+
highlightedLineDescription
|
|
61
|
+
};
|
|
62
|
+
exports.styles = styles;
|
|
@@ -0,0 +1,63 @@
|
|
|
1
|
+
const shoppingCart = "_shoppingCart_ct6d7_1";
|
|
2
|
+
const section = "_section_ct6d7_8";
|
|
3
|
+
const sectionBody = "_sectionBody_ct6d7_14";
|
|
4
|
+
const sectionInner = "_sectionInner_ct6d7_22";
|
|
5
|
+
const horizontalRule = "_horizontalRule_ct6d7_26";
|
|
6
|
+
const heading = "_heading_ct6d7_43";
|
|
7
|
+
const continueContainer = "_continueContainer_ct6d7_47";
|
|
8
|
+
const deliveryContainer = "_deliveryContainer_ct6d7_63";
|
|
9
|
+
const deliveryProgressbar = "_deliveryProgressbar_ct6d7_69";
|
|
10
|
+
const deliveryProgressbarText = "_deliveryProgressbarText_ct6d7_77";
|
|
11
|
+
const deliveryLeft = "_deliveryLeft_ct6d7_81";
|
|
12
|
+
const labelMedium = "_labelMedium_ct6d7_87";
|
|
13
|
+
const deliveryIcon = "_deliveryIcon_ct6d7_93";
|
|
14
|
+
const priceUpfrontContainer = "_priceUpfrontContainer_ct6d7_99";
|
|
15
|
+
const priceMonthlyDetailsTotal = "_priceMonthlyDetailsTotal_ct6d7_107";
|
|
16
|
+
const priceRow = "_priceRow_ct6d7_111";
|
|
17
|
+
const tooltipContent = "_tooltipContent_ct6d7_133";
|
|
18
|
+
const priceMonthlyContainer = "_priceMonthlyContainer_ct6d7_142";
|
|
19
|
+
const priceMonthlyDetails = "_priceMonthlyDetails_ct6d7_107";
|
|
20
|
+
const flexRow = "_flexRow_ct6d7_150";
|
|
21
|
+
const tooltipTrigger = "_tooltipTrigger_ct6d7_155";
|
|
22
|
+
const progressBarWrapper = "_progressBarWrapper_ct6d7_163";
|
|
23
|
+
const highlightedLine = "_highlightedLine_ct6d7_167";
|
|
24
|
+
const highlightedLineTop = "_highlightedLineTop_ct6d7_171";
|
|
25
|
+
const highlightedLineLeft = "_highlightedLineLeft_ct6d7_178";
|
|
26
|
+
const highlightedLineIcon = "_highlightedLineIcon_ct6d7_184";
|
|
27
|
+
const highlightedLineHeading = "_highlightedLineHeading_ct6d7_190";
|
|
28
|
+
const highlightedLinePrice = "_highlightedLinePrice_ct6d7_195";
|
|
29
|
+
const highlightedLineDescription = "_highlightedLineDescription_ct6d7_201";
|
|
30
|
+
const styles = {
|
|
31
|
+
shoppingCart,
|
|
32
|
+
section,
|
|
33
|
+
sectionBody,
|
|
34
|
+
sectionInner,
|
|
35
|
+
horizontalRule,
|
|
36
|
+
heading,
|
|
37
|
+
continueContainer,
|
|
38
|
+
deliveryContainer,
|
|
39
|
+
deliveryProgressbar,
|
|
40
|
+
deliveryProgressbarText,
|
|
41
|
+
deliveryLeft,
|
|
42
|
+
labelMedium,
|
|
43
|
+
deliveryIcon,
|
|
44
|
+
priceUpfrontContainer,
|
|
45
|
+
priceMonthlyDetailsTotal,
|
|
46
|
+
priceRow,
|
|
47
|
+
tooltipContent,
|
|
48
|
+
priceMonthlyContainer,
|
|
49
|
+
priceMonthlyDetails,
|
|
50
|
+
flexRow,
|
|
51
|
+
tooltipTrigger,
|
|
52
|
+
progressBarWrapper,
|
|
53
|
+
highlightedLine,
|
|
54
|
+
highlightedLineTop,
|
|
55
|
+
highlightedLineLeft,
|
|
56
|
+
highlightedLineIcon,
|
|
57
|
+
highlightedLineHeading,
|
|
58
|
+
highlightedLinePrice,
|
|
59
|
+
highlightedLineDescription
|
|
60
|
+
};
|
|
61
|
+
export {
|
|
62
|
+
styles as s
|
|
63
|
+
};
|
package/dist/style.css
CHANGED
|
@@ -663,20 +663,20 @@
|
|
|
663
663
|
font-size: clamp(var(--teddy-typography-scale-800), 3cqw, var(--teddy-typography-scale-1000));
|
|
664
664
|
line-height: var(--teddy-typography-line-height-tight);
|
|
665
665
|
}
|
|
666
|
-
}.
|
|
666
|
+
}._shoppingCart_ct6d7_1 {
|
|
667
667
|
margin-bottom: var(--teddy-spacing-300);
|
|
668
668
|
width: 100%;
|
|
669
669
|
color: var(--teddy-color-gray-900);
|
|
670
670
|
line-height: var(--teddy-typography-line-height-loose);
|
|
671
671
|
}
|
|
672
672
|
|
|
673
|
-
.
|
|
673
|
+
._section_ct6d7_8 {
|
|
674
674
|
background-color: var(--teddy-color-gray-50);
|
|
675
675
|
border-top-right-radius: var(--teddy-border-radius-md);
|
|
676
676
|
border-top-left-radius: var(--teddy-border-radius-md);
|
|
677
677
|
}
|
|
678
678
|
|
|
679
|
-
.
|
|
679
|
+
._sectionBody_ct6d7_14 {
|
|
680
680
|
background-color: var(--teddy-color-functional-white);
|
|
681
681
|
margin-bottom: var(--teddy-spacing-200);
|
|
682
682
|
border: var(--teddy-border-width-sm) solid var(--teddy-color-gray-150);
|
|
@@ -684,20 +684,20 @@
|
|
|
684
684
|
overflow: visible;
|
|
685
685
|
}
|
|
686
686
|
|
|
687
|
-
.
|
|
687
|
+
._sectionInner_ct6d7_22 {
|
|
688
688
|
padding: var(--teddy-spacing-200);
|
|
689
689
|
}
|
|
690
690
|
|
|
691
|
-
.
|
|
691
|
+
._horizontalRuleWrapper_ct6d7_26 {
|
|
692
692
|
padding: var(--teddy-spacing-200) var(--teddy-spacing-200) 0 var(--teddy-spacing-200);
|
|
693
693
|
background-color: var(--teddy-color-functional-white);
|
|
694
694
|
}
|
|
695
695
|
|
|
696
|
-
.
|
|
696
|
+
._horizontalRuleWrapper_ct6d7_26 ._horizontalRule_ct6d7_26 {
|
|
697
697
|
margin: 0;
|
|
698
698
|
}
|
|
699
699
|
|
|
700
|
-
.
|
|
700
|
+
._horizontalRule_ct6d7_26 {
|
|
701
701
|
width: 100%;
|
|
702
702
|
border-bottom: var(--teddy-border-width-xs) solid var(--teddy-color-gray-150);
|
|
703
703
|
border-left: none;
|
|
@@ -706,11 +706,11 @@
|
|
|
706
706
|
margin: var(--teddy-spacing-200) 0;
|
|
707
707
|
}
|
|
708
708
|
|
|
709
|
-
.
|
|
709
|
+
._heading_ct6d7_43 {
|
|
710
710
|
margin: 0;
|
|
711
711
|
}
|
|
712
712
|
|
|
713
|
-
.
|
|
713
|
+
._continueContainer_ct6d7_47 {
|
|
714
714
|
display: flex;
|
|
715
715
|
flex-direction: column;
|
|
716
716
|
justify-content: center;
|
|
@@ -718,23 +718,23 @@
|
|
|
718
718
|
margin-top: var(--teddy-spacing-300);
|
|
719
719
|
}
|
|
720
720
|
|
|
721
|
-
.
|
|
721
|
+
._continueContainer_ct6d7_47 button {
|
|
722
722
|
margin: 0;
|
|
723
723
|
width: 100%;
|
|
724
724
|
max-width: 18rem;
|
|
725
725
|
}
|
|
726
726
|
|
|
727
|
-
.
|
|
727
|
+
._continueContainer_ct6d7_47 button:not(:first-of-type) {
|
|
728
728
|
margin-top: var(--teddy-spacing-200) !important;
|
|
729
729
|
}
|
|
730
730
|
|
|
731
|
-
.
|
|
731
|
+
._deliveryContainer_ct6d7_63 {
|
|
732
732
|
display: flex;
|
|
733
733
|
justify-content: space-between;
|
|
734
734
|
align-items: center;
|
|
735
735
|
}
|
|
736
736
|
|
|
737
|
-
.
|
|
737
|
+
._deliveryProgressbar_ct6d7_69 {
|
|
738
738
|
display: flex;
|
|
739
739
|
flex-direction: column;
|
|
740
740
|
justify-content: flex-start;
|
|
@@ -742,29 +742,29 @@
|
|
|
742
742
|
margin: var(--teddy-spacing-200) 0;
|
|
743
743
|
}
|
|
744
744
|
|
|
745
|
-
.
|
|
745
|
+
._deliveryProgressbarText_ct6d7_77 {
|
|
746
746
|
margin-bottom: var(--teddy-spacing-100);
|
|
747
747
|
}
|
|
748
748
|
|
|
749
|
-
.
|
|
749
|
+
._deliveryLeft_ct6d7_81 {
|
|
750
750
|
display: flex;
|
|
751
751
|
align-items: center;
|
|
752
752
|
margin-right: var(--teddy-spacing-200);
|
|
753
753
|
}
|
|
754
754
|
|
|
755
|
-
.
|
|
755
|
+
._labelMedium_ct6d7_87 {
|
|
756
756
|
color: var(--teddy-color-gray-900);
|
|
757
757
|
font-family: var(--teddy-typography-family-default);
|
|
758
758
|
font-weight: var(--teddy-typography-weight-medium);
|
|
759
759
|
}
|
|
760
760
|
|
|
761
|
-
.
|
|
761
|
+
._deliveryIcon_ct6d7_93 {
|
|
762
762
|
width: 1.5rem;
|
|
763
763
|
height: 1.5rem;
|
|
764
764
|
margin-right: var(--teddy-spacing-150);
|
|
765
765
|
}
|
|
766
766
|
|
|
767
|
-
.
|
|
767
|
+
._priceUpfrontContainer_ct6d7_99 {
|
|
768
768
|
background-color: var(--teddy-color-functional-white);
|
|
769
769
|
border: var(--teddy-border-width-sm) solid var(--teddy-color-gray-150);
|
|
770
770
|
padding: var(--teddy-spacing-200);
|
|
@@ -772,67 +772,105 @@
|
|
|
772
772
|
border-bottom-right-radius: var(--teddy-border-radius-md);
|
|
773
773
|
}
|
|
774
774
|
|
|
775
|
-
.
|
|
775
|
+
._priceMonthlyDetailsTotal_ct6d7_107 {
|
|
776
776
|
margin-top: var(--teddy-spacing-300);
|
|
777
777
|
}
|
|
778
778
|
|
|
779
|
-
.
|
|
779
|
+
._priceRow_ct6d7_111 {
|
|
780
780
|
display: flex;
|
|
781
781
|
justify-content: space-between;
|
|
782
782
|
align-items: center;
|
|
783
783
|
}
|
|
784
784
|
|
|
785
|
-
.
|
|
785
|
+
._priceRow_ct6d7_111 > :first-child {
|
|
786
786
|
margin-right: var(--teddy-spacing-100);
|
|
787
787
|
}
|
|
788
788
|
|
|
789
|
-
.
|
|
789
|
+
._tooltipIconWrapper_ct6d7_120 {
|
|
790
790
|
margin-left: var(--teddy-spacing-100);
|
|
791
791
|
width: 1.5rem;
|
|
792
792
|
height: 1.5rem;
|
|
793
793
|
}
|
|
794
794
|
|
|
795
|
-
.
|
|
795
|
+
._tooltipIcon_ct6d7_120 {
|
|
796
796
|
cursor: pointer;
|
|
797
797
|
width: 1.5rem;
|
|
798
798
|
height: 1.5rem;
|
|
799
799
|
color: var(--teddy-color-purple-700);
|
|
800
800
|
}
|
|
801
801
|
|
|
802
|
-
.
|
|
802
|
+
._tooltipContent_ct6d7_133 {
|
|
803
803
|
width: 15rem;
|
|
804
804
|
}
|
|
805
805
|
|
|
806
806
|
@media all and (min-width: 600px) {
|
|
807
|
-
.
|
|
807
|
+
._tooltipContent_ct6d7_133 {
|
|
808
808
|
width: 22rem;
|
|
809
809
|
}
|
|
810
810
|
}
|
|
811
811
|
|
|
812
|
-
.
|
|
812
|
+
._priceMonthlyContainer_ct6d7_142 {
|
|
813
813
|
display: block;
|
|
814
814
|
}
|
|
815
815
|
|
|
816
|
-
.
|
|
816
|
+
._priceMonthlyDetails_ct6d7_107 {
|
|
817
817
|
display: block;
|
|
818
818
|
}
|
|
819
819
|
|
|
820
|
-
.
|
|
820
|
+
._flexRow_ct6d7_150 {
|
|
821
821
|
display: flex;
|
|
822
822
|
align-items: center;
|
|
823
823
|
}
|
|
824
824
|
|
|
825
|
-
.
|
|
825
|
+
._tooltipTrigger_ct6d7_155 {
|
|
826
826
|
padding: var(--teddy-spacing-100);
|
|
827
827
|
}
|
|
828
828
|
|
|
829
|
-
.
|
|
829
|
+
._tooltipTrigger_ct6d7_155 svg {
|
|
830
830
|
width: 1.25rem;
|
|
831
831
|
height: 1.25rem;
|
|
832
832
|
}
|
|
833
833
|
|
|
834
|
-
.
|
|
834
|
+
._progressBarWrapper_ct6d7_163 {
|
|
835
835
|
width: 100%;
|
|
836
|
+
}
|
|
837
|
+
|
|
838
|
+
._highlightedLine_ct6d7_167 {
|
|
839
|
+
color: var(--teddy-color-purple-700);
|
|
840
|
+
}
|
|
841
|
+
|
|
842
|
+
._highlightedLineTop_ct6d7_171 {
|
|
843
|
+
display: flex;
|
|
844
|
+
justify-content: space-between;
|
|
845
|
+
align-items: center;
|
|
846
|
+
gap: var(--teddy-spacing-100);
|
|
847
|
+
}
|
|
848
|
+
|
|
849
|
+
._highlightedLineLeft_ct6d7_178 {
|
|
850
|
+
display: flex;
|
|
851
|
+
align-items: center;
|
|
852
|
+
gap: var(--teddy-spacing-100);
|
|
853
|
+
}
|
|
854
|
+
|
|
855
|
+
._highlightedLineIcon_ct6d7_184 {
|
|
856
|
+
width: 1.5rem;
|
|
857
|
+
height: 1.5rem;
|
|
858
|
+
flex-shrink: 0;
|
|
859
|
+
}
|
|
860
|
+
|
|
861
|
+
._highlightedLineHeading_ct6d7_190 {
|
|
862
|
+
font-family: var(--teddy-typography-family-default);
|
|
863
|
+
font-weight: var(--teddy-typography-weight-medium);
|
|
864
|
+
}
|
|
865
|
+
|
|
866
|
+
._highlightedLinePrice_ct6d7_195 {
|
|
867
|
+
font-family: var(--teddy-typography-family-default);
|
|
868
|
+
font-weight: var(--teddy-typography-weight-medium);
|
|
869
|
+
white-space: nowrap;
|
|
870
|
+
}
|
|
871
|
+
|
|
872
|
+
._highlightedLineDescription_ct6d7_201 {
|
|
873
|
+
margin: var(--teddy-spacing-050) 0 0;
|
|
836
874
|
}@layer text {
|
|
837
875
|
._teddy-text_19etp_2 {
|
|
838
876
|
color: inherit;
|
package/package.json
CHANGED
|
@@ -1,48 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
const shoppingCart = "_shoppingCart_121r0_1";
|
|
3
|
-
const section = "_section_121r0_8";
|
|
4
|
-
const sectionBody = "_sectionBody_121r0_14";
|
|
5
|
-
const sectionInner = "_sectionInner_121r0_22";
|
|
6
|
-
const horizontalRule = "_horizontalRule_121r0_26";
|
|
7
|
-
const heading = "_heading_121r0_43";
|
|
8
|
-
const continueContainer = "_continueContainer_121r0_47";
|
|
9
|
-
const deliveryContainer = "_deliveryContainer_121r0_63";
|
|
10
|
-
const deliveryProgressbar = "_deliveryProgressbar_121r0_69";
|
|
11
|
-
const deliveryProgressbarText = "_deliveryProgressbarText_121r0_77";
|
|
12
|
-
const deliveryLeft = "_deliveryLeft_121r0_81";
|
|
13
|
-
const labelMedium = "_labelMedium_121r0_87";
|
|
14
|
-
const deliveryIcon = "_deliveryIcon_121r0_93";
|
|
15
|
-
const priceUpfrontContainer = "_priceUpfrontContainer_121r0_99";
|
|
16
|
-
const priceMonthlyDetailsTotal = "_priceMonthlyDetailsTotal_121r0_107";
|
|
17
|
-
const priceRow = "_priceRow_121r0_111";
|
|
18
|
-
const tooltipContent = "_tooltipContent_121r0_133";
|
|
19
|
-
const priceMonthlyContainer = "_priceMonthlyContainer_121r0_142";
|
|
20
|
-
const priceMonthlyDetails = "_priceMonthlyDetails_121r0_107";
|
|
21
|
-
const flexRow = "_flexRow_121r0_150";
|
|
22
|
-
const tooltipTrigger = "_tooltipTrigger_121r0_155";
|
|
23
|
-
const progressBarWrapper = "_progressBarWrapper_121r0_163";
|
|
24
|
-
const styles = {
|
|
25
|
-
shoppingCart,
|
|
26
|
-
section,
|
|
27
|
-
sectionBody,
|
|
28
|
-
sectionInner,
|
|
29
|
-
horizontalRule,
|
|
30
|
-
heading,
|
|
31
|
-
continueContainer,
|
|
32
|
-
deliveryContainer,
|
|
33
|
-
deliveryProgressbar,
|
|
34
|
-
deliveryProgressbarText,
|
|
35
|
-
deliveryLeft,
|
|
36
|
-
labelMedium,
|
|
37
|
-
deliveryIcon,
|
|
38
|
-
priceUpfrontContainer,
|
|
39
|
-
priceMonthlyDetailsTotal,
|
|
40
|
-
priceRow,
|
|
41
|
-
tooltipContent,
|
|
42
|
-
priceMonthlyContainer,
|
|
43
|
-
priceMonthlyDetails,
|
|
44
|
-
flexRow,
|
|
45
|
-
tooltipTrigger,
|
|
46
|
-
progressBarWrapper
|
|
47
|
-
};
|
|
48
|
-
exports.styles = styles;
|
|
@@ -1,49 +0,0 @@
|
|
|
1
|
-
const shoppingCart = "_shoppingCart_121r0_1";
|
|
2
|
-
const section = "_section_121r0_8";
|
|
3
|
-
const sectionBody = "_sectionBody_121r0_14";
|
|
4
|
-
const sectionInner = "_sectionInner_121r0_22";
|
|
5
|
-
const horizontalRule = "_horizontalRule_121r0_26";
|
|
6
|
-
const heading = "_heading_121r0_43";
|
|
7
|
-
const continueContainer = "_continueContainer_121r0_47";
|
|
8
|
-
const deliveryContainer = "_deliveryContainer_121r0_63";
|
|
9
|
-
const deliveryProgressbar = "_deliveryProgressbar_121r0_69";
|
|
10
|
-
const deliveryProgressbarText = "_deliveryProgressbarText_121r0_77";
|
|
11
|
-
const deliveryLeft = "_deliveryLeft_121r0_81";
|
|
12
|
-
const labelMedium = "_labelMedium_121r0_87";
|
|
13
|
-
const deliveryIcon = "_deliveryIcon_121r0_93";
|
|
14
|
-
const priceUpfrontContainer = "_priceUpfrontContainer_121r0_99";
|
|
15
|
-
const priceMonthlyDetailsTotal = "_priceMonthlyDetailsTotal_121r0_107";
|
|
16
|
-
const priceRow = "_priceRow_121r0_111";
|
|
17
|
-
const tooltipContent = "_tooltipContent_121r0_133";
|
|
18
|
-
const priceMonthlyContainer = "_priceMonthlyContainer_121r0_142";
|
|
19
|
-
const priceMonthlyDetails = "_priceMonthlyDetails_121r0_107";
|
|
20
|
-
const flexRow = "_flexRow_121r0_150";
|
|
21
|
-
const tooltipTrigger = "_tooltipTrigger_121r0_155";
|
|
22
|
-
const progressBarWrapper = "_progressBarWrapper_121r0_163";
|
|
23
|
-
const styles = {
|
|
24
|
-
shoppingCart,
|
|
25
|
-
section,
|
|
26
|
-
sectionBody,
|
|
27
|
-
sectionInner,
|
|
28
|
-
horizontalRule,
|
|
29
|
-
heading,
|
|
30
|
-
continueContainer,
|
|
31
|
-
deliveryContainer,
|
|
32
|
-
deliveryProgressbar,
|
|
33
|
-
deliveryProgressbarText,
|
|
34
|
-
deliveryLeft,
|
|
35
|
-
labelMedium,
|
|
36
|
-
deliveryIcon,
|
|
37
|
-
priceUpfrontContainer,
|
|
38
|
-
priceMonthlyDetailsTotal,
|
|
39
|
-
priceRow,
|
|
40
|
-
tooltipContent,
|
|
41
|
-
priceMonthlyContainer,
|
|
42
|
-
priceMonthlyDetails,
|
|
43
|
-
flexRow,
|
|
44
|
-
tooltipTrigger,
|
|
45
|
-
progressBarWrapper
|
|
46
|
-
};
|
|
47
|
-
export {
|
|
48
|
-
styles as s
|
|
49
|
-
};
|