@windstream/react-shared-components 0.1.63 → 0.1.64
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/contentful/index.esm.js +1 -1
- package/dist/contentful/index.esm.js.map +1 -1
- package/dist/contentful/index.js +1 -1
- package/dist/contentful/index.js.map +1 -1
- package/dist/core.d.ts +1 -1
- package/dist/index.d.ts +1 -1
- package/package.json +1 -1
- package/src/contentful/blocks/cart-retention-banner/index.tsx +105 -97
package/dist/core.d.ts
CHANGED
|
@@ -63,7 +63,7 @@ declare const Input: React$1.ForwardRefExoticComponent<Omit<React$1.InputHTMLAtt
|
|
|
63
63
|
size?: "slim" | "medium" | "large" | undefined;
|
|
64
64
|
label?: string | undefined;
|
|
65
65
|
errorText?: string | undefined;
|
|
66
|
-
prefixIconName?: "
|
|
66
|
+
prefixIconName?: "location_on" | "search" | undefined;
|
|
67
67
|
prefixIconSize?: 20 | 24 | 40 | 48 | undefined;
|
|
68
68
|
prefixIconFill?: boolean | undefined;
|
|
69
69
|
suffixIconFill?: boolean | undefined;
|
package/dist/index.d.ts
CHANGED
|
@@ -346,7 +346,7 @@ type ButtonAsAnchor = ButtonCustomProps & Omit<AnchorHTMLAttributes<HTMLAnchorEl
|
|
|
346
346
|
};
|
|
347
347
|
type ButtonProps = ButtonAsButton | ButtonAsAnchor;
|
|
348
348
|
|
|
349
|
-
declare const BrandButton: React__default.ForwardRefExoticComponent<ButtonProps$2 & React__default.RefAttributes<
|
|
349
|
+
declare const BrandButton: React__default.ForwardRefExoticComponent<ButtonProps$2 & React__default.RefAttributes<HTMLButtonElement | HTMLAnchorElement>>;
|
|
350
350
|
|
|
351
351
|
declare const Checklist: React__default.FC<ChecklistProps>;
|
|
352
352
|
|
package/package.json
CHANGED
|
@@ -1,97 +1,105 @@
|
|
|
1
|
-
"use client";
|
|
2
|
-
|
|
3
|
-
import
|
|
4
|
-
import {
|
|
5
|
-
|
|
6
|
-
import {
|
|
7
|
-
import {
|
|
8
|
-
import {
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
const
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
1
|
+
"use client";
|
|
2
|
+
|
|
3
|
+
import { useEffect, useState } from "react";
|
|
4
|
+
import type { TypeCartRetentionBannerFields } from "./types";
|
|
5
|
+
|
|
6
|
+
import { Text } from "@shared/components/text";
|
|
7
|
+
import { Button } from "@shared/contentful/blocks/button";
|
|
8
|
+
import { Modal } from "@shared/contentful/blocks/modal";
|
|
9
|
+
import { renderContentfulRichText } from "@shared/hooks/contentful/use-contentful-rich-text";
|
|
10
|
+
import { toDocument } from "@shared/utils/contentful/to-document";
|
|
11
|
+
|
|
12
|
+
const CartRetentionBanner: React.FC<{
|
|
13
|
+
fields: TypeCartRetentionBannerFields;
|
|
14
|
+
sys?: any;
|
|
15
|
+
isInPopupContainer?: boolean;
|
|
16
|
+
onClose?: () => void;
|
|
17
|
+
onContinueCheckout?: () => void;
|
|
18
|
+
checkShouldShowBanner?: () => boolean;
|
|
19
|
+
onBannerShown?: () => void;
|
|
20
|
+
}> = ({
|
|
21
|
+
fields,
|
|
22
|
+
isInPopupContainer = false,
|
|
23
|
+
onClose,
|
|
24
|
+
onContinueCheckout,
|
|
25
|
+
checkShouldShowBanner,
|
|
26
|
+
onBannerShown,
|
|
27
|
+
}) => {
|
|
28
|
+
const { anchorId, mainHeading, description, cta } = fields;
|
|
29
|
+
|
|
30
|
+
const [modalOpen, setModalOpen] = useState<boolean>(false);
|
|
31
|
+
|
|
32
|
+
useEffect(() => {
|
|
33
|
+
const checkRetentionCookie = () => {
|
|
34
|
+
if (checkShouldShowBanner?.() && !modalOpen) {
|
|
35
|
+
setModalOpen(true);
|
|
36
|
+
onBannerShown?.();
|
|
37
|
+
}
|
|
38
|
+
};
|
|
39
|
+
checkRetentionCookie();
|
|
40
|
+
const timeoutId = setTimeout(checkRetentionCookie, 100);
|
|
41
|
+
return () => clearTimeout(timeoutId);
|
|
42
|
+
}, []);
|
|
43
|
+
|
|
44
|
+
const handleClose = () => {
|
|
45
|
+
onClose?.();
|
|
46
|
+
setModalOpen(false);
|
|
47
|
+
};
|
|
48
|
+
|
|
49
|
+
const continueCheckout = () => {
|
|
50
|
+
onContinueCheckout?.();
|
|
51
|
+
};
|
|
52
|
+
|
|
53
|
+
if (isInPopupContainer) {
|
|
54
|
+
return (
|
|
55
|
+
<div
|
|
56
|
+
className="pop-up-body mb-5 mt-10 flex w-full flex-col items-center justify-center"
|
|
57
|
+
data-section-type={"cart-retention-banner"}
|
|
58
|
+
data-section-index={"0"}
|
|
59
|
+
>
|
|
60
|
+
<Text className="heading5 text-center lg:heading3">
|
|
61
|
+
{mainHeading || "Welcome back. Let’s finish your order"}
|
|
62
|
+
</Text>
|
|
63
|
+
{description &&
|
|
64
|
+
renderContentfulRichText(
|
|
65
|
+
toDocument(description?.json),
|
|
66
|
+
false,
|
|
67
|
+
"body1 my-4"
|
|
68
|
+
)}
|
|
69
|
+
<Button
|
|
70
|
+
onClick={continueCheckout}
|
|
71
|
+
buttonLabel={cta?.buttonLabel ?? "Continue checkout"}
|
|
72
|
+
/>
|
|
73
|
+
</div>
|
|
74
|
+
);
|
|
75
|
+
}
|
|
76
|
+
return (
|
|
77
|
+
<section id={anchorId} data-testid="cart-retention-banner">
|
|
78
|
+
<Modal
|
|
79
|
+
size="sm"
|
|
80
|
+
isOpen={modalOpen}
|
|
81
|
+
onRequestClose={handleClose}
|
|
82
|
+
bodyClassName="flex items-center justify-center"
|
|
83
|
+
type="cart-retention-banner"
|
|
84
|
+
>
|
|
85
|
+
<div className="pop-up-body mb-5 mt-10 flex w-full flex-col items-center justify-center">
|
|
86
|
+
<Text className="heading5 text-center lg:heading3">
|
|
87
|
+
{mainHeading || "Welcome back. Let's finish your order"}
|
|
88
|
+
</Text>
|
|
89
|
+
{description &&
|
|
90
|
+
renderContentfulRichText(
|
|
91
|
+
toDocument(description?.json),
|
|
92
|
+
false,
|
|
93
|
+
"body1 my-4"
|
|
94
|
+
)}
|
|
95
|
+
<Button
|
|
96
|
+
onClick={continueCheckout}
|
|
97
|
+
buttonLabel={cta?.buttonLabel ?? "Continue checkout"}
|
|
98
|
+
/>
|
|
99
|
+
</div>
|
|
100
|
+
</Modal>
|
|
101
|
+
</section>
|
|
102
|
+
);
|
|
103
|
+
};
|
|
104
|
+
|
|
105
|
+
export default CartRetentionBanner;
|