Yoast/wordpress-seo | Build 0 | packages/js/src/introductions/components/modals/black-friday-announcement.js | Coveralls

1

import { useSelect } from "@wordpress/data";

2

import { useMemo } from "@wordpress/element";

3

import { __, sprintf } from "@wordpress/i18n";

4

import { Button, useModalContext } from "@yoast/ui-library";

5

import { LockOpenIcon } from "@heroicons/react/outline";

6

import { STORE_NAME_INTRODUCTIONS } from "../../constants";

7

import { Modal } from "../modal";

8

import { get } from "lodash";

9

10

/**

11

 * @param {Object} thumbnail The thumbnail: img props.

12

 * @param {string} buttonLink The button link.

13

 * @param {Boolean} isWooEnabled Whether WooCommerce is enabled.

14

 * @returns {JSX.Element} The element.

15

*/

17

        thumbnail,

18

        buttonLink,

19

        isWooEnabled,

20

} ) => {

22

25

        }, [ isWooEnabled ] );

26

29

31

                        /* translators: %1$s expands to either Premium or WooCommerce SEO. */

32

                        __( "Get %1$s with 30%% off", "wordpress-seo" ),

33

                        product

34

);

35

        }, [ isWooEnabled ] );

36

39

        }, [ isWooEnabled ] );

40

43

        }, [ isWooEnabled ] );

44

47

        }, [ isWooEnabled ] );

48

50

                /* eslint-disable stylistic/max-len */

52

                        ? sprintf(

53

                                /* translators: %1$s expands to Premium, %2$s expands to Local, %3$s expands to News, %4$s expands to Video SEO, %5$s expands to Google. */

54

                                __( "We added even more value than ever this year: %1$s, %2$s, %3$s, %4$s, and seamless %5$s Docs add-on, all included. If you've been waiting to upgrade, now’s the time..", "wordpress-seo" ),

55

                                "Premium",

56

                                "Local",

57

                                "News",

58

                                "Video SEO",

59

                                "Google"

60

61

                        : sprintf(

62

                                /* translators: %1$s expands to Local, %2$s expands to News, %3$s expands to Video SEO, %4$s expands to Google. */

63

                                __( "We added even more value than ever this year: %1$s, %2$s, %3$s, and seamless %4$s Docs add-on, all included. If you've been waiting to upgrade, now’s the time.", "wordpress-seo" ),

64

                                "Local",

65

                                "News",

66

                                "Video SEO",

67

                                "Google"

68

);

69

                /* eslint-enable stylistic/max-len */

70

        }, [ isWooEnabled ] );

71

73

<>

74

                        <div className={ `yst-px-10 yst-pt-10 yst-text-center ${introductionClass}` }>

75

                                <img

76

                                        className="yst-w-full yst-h-auto yst-rounded-md yst-drop-shadow-md"

77

                                        alt={ __( "Thumbnail for the Black Friday announcement", "wordpress-seo" ) }

78

                                        loading="lazy"

79

                                        decoding="async"

80

                                        { ...thumbnail }

81

/>

82

                                <div className="yst-mt-6 yst-text-xs yst-font-medium yst-flex yst-flex-col yst-items-center">

83

                                        <span className="yst-introduction-modal-uppercase yst-flex yst-gap-2 yst-items-center">

84

                                                <span className={ iconClass } />

85

                                                { productName }

86

                                        </span>

87

                                </div>

88

                        </div>

89

                        <div className="yst-px-10 yst-pb-4 yst-flex yst-flex-col yst-items-center">

90

                                <div className="yst-mt-4 yst-mx-1.5 yst-text-center">

91

                                        <h3 className="yst-text-slate-900 yst-text-lg yst-font-medium">

92

93

                                                        __( "Black Friday: Our biggest sale just dropped!", "wordpress-seo" )

94

95

                                        </h3>

96

                                        <div className="yst-mt-2 yst-text-slate-600 yst-text-sm">

97

                                                <p>{ description }</p>

98

                                        </div>

99

                                </div>

100

                                <div className="yst-w-full yst-flex yst-mt-6">

101

                                        <Button

102

                                                as="a"

103

                                                className="yst-grow yst-border-slate-200"

104

                                                size="extra-large"

105

                                                variant="upsell"

106

                                                href={ buttonLink }

107

                                                target="_blank"

108

                                                ref={ initialFocus }

109

                                                data-action="load-nfd-ctb"

110

                                                data-ctb-id={ ctbId }

111

112

                                                <LockOpenIcon className="yst--ms-1 yst-me-2 yst-h-5 yst-w-5" />

113

                                                { buttonLabel }

114

                                                <span className="yst-sr-only">

115

116

                                                                /* translators: Hidden accessibility text. */

117

                                                                __( "(Opens in a new browser tab)", "wordpress-seo" )

118

119

                                                </span>

120

                                        </Button>

121

                                </div>

122

                                <Button

123

                                        className="yst-mt-2"

124

                                        variant="tertiary"

125

                                        onClick={ onClose }

126

127

                                        { __( "Close", "wordpress-seo" ) }

128

                                </Button>

129

                        </div>

130

</>

131

);

132

};

133

134

/**

135

 * @returns {JSX.Element} The element.

136

*/

142

144

                src: imageLink,

145

                width: "432",

146

                height: "243",

147

        } ), [ imageLink ] );

148

150

                <Modal>

151

                        <BlackFridayAnnouncementContent

153

                                thumbnail={ thumbnail }

154

                                isWooEnabled={ isWooEnabled }

155

/>

156

                </Modal>

157

);

158

};

Yoast / wordpress-seo / e6a7e0b80499bdb8a730b54214937f6933fbef32

Source File
Press 'n' to go to next uncovered line, 'b' for previous

1	import { useSelect } from "@wordpress/data";
2	import { useMemo } from "@wordpress/element";
3	import { __, sprintf } from "@wordpress/i18n";
4	import { Button, useModalContext } from "@yoast/ui-library";
5	import { LockOpenIcon } from "@heroicons/react/outline";
6	import { STORE_NAME_INTRODUCTIONS } from "../../constants";
7	import { Modal } from "../modal";
8	import { get } from "lodash";
9
10	/**
11	* @param {Object} thumbnail The thumbnail: img props.
12	* @param {string} buttonLink The button link.
13	* @param {Boolean} isWooEnabled Whether WooCommerce is enabled.
14	* @returns {JSX.Element} The element.
15	*/
NEW 16	const BlackFridayAnnouncementContent = ( {	×
17	thumbnail,
18	buttonLink,
19	isWooEnabled,
20	} ) => {
NEW 21	const { onClose, initialFocus } = useModalContext();	×
22
NEW 23	const productName = useMemo( () => {	×
NEW 24	return isWooEnabled ? "Yoast WooCommerce SEO" : "Yoast SEO Premium";	×
25	}, [ isWooEnabled ] );
26
NEW 27	const buttonLabel = useMemo( () => {	×
NEW 28	const product = isWooEnabled ? "WooCommerce SEO" : "Premium";	×
29
NEW 30	return sprintf(	×
31	/* translators: %1$s expands to either Premium or WooCommerce SEO. */
32	__( "Get %1$s with 30%% off", "wordpress-seo" ),
33	product
34	);
35	}, [ isWooEnabled ] );
36
NEW 37	const iconClass = useMemo( () => {	×
NEW 38	return isWooEnabled ? "yst-cart-icon" : "yst-logo-icon";	×
39	}, [ isWooEnabled ] );
40
NEW 41	const introductionClass = useMemo( () => {	×
NEW 42	return isWooEnabled ? "yst-woo-introduction-gradient" : "yst-introduction-gradient";	×
43	}, [ isWooEnabled ] );
44
NEW 45	const ctbId = useMemo( () => {	×
NEW 46	return isWooEnabled ? "c7e7baa1-2020-420c-a427-89701700b607" : "f6a84663-465f-4cb5-8ba5-f7a6d72224b2";	×
47	}, [ isWooEnabled ] );
48
NEW 49	const description = useMemo( () => {	×
50	/* eslint-disable stylistic/max-len */
NEW 51	return isWooEnabled	×
52	? sprintf(
53	/* translators: %1$s expands to Premium, %2$s expands to Local, %3$s expands to News, %4$s expands to Video SEO, %5$s expands to Google. */
54	__( "We added even more value than ever this year: %1$s, %2$s, %3$s, %4$s, and seamless %5$s Docs add-on, all included. If you've been waiting to upgrade, now’s the time..", "wordpress-seo" ),
55	"Premium",
56	"Local",
57	"News",
58	"Video SEO",
59	"Google"
60	)
61	: sprintf(
62	/* translators: %1$s expands to Local, %2$s expands to News, %3$s expands to Video SEO, %4$s expands to Google. */
63	__( "We added even more value than ever this year: %1$s, %2$s, %3$s, and seamless %4$s Docs add-on, all included. If you've been waiting to upgrade, now’s the time.", "wordpress-seo" ),
64	"Local",
65	"News",
66	"Video SEO",
67	"Google"
68	);
69	/* eslint-enable stylistic/max-len */
70	}, [ isWooEnabled ] );
71
NEW 72	return (	×
73	<>
74	<div className={ `yst-px-10 yst-pt-10 yst-text-center ${introductionClass}` }>
75	<img
76	className="yst-w-full yst-h-auto yst-rounded-md yst-drop-shadow-md"
77	alt={ __( "Thumbnail for the Black Friday announcement", "wordpress-seo" ) }
78	loading="lazy"
79	decoding="async"
80	{ ...thumbnail }
81	/>
82	<div className="yst-mt-6 yst-text-xs yst-font-medium yst-flex yst-flex-col yst-items-center">
83	<span className="yst-introduction-modal-uppercase yst-flex yst-gap-2 yst-items-center">
84	<span className={ iconClass } />
85	{ productName }
86	</span>
87	</div>
88	</div>
89	<div className="yst-px-10 yst-pb-4 yst-flex yst-flex-col yst-items-center">
90	<div className="yst-mt-4 yst-mx-1.5 yst-text-center">
91	<h3 className="yst-text-slate-900 yst-text-lg yst-font-medium">
92	{
93	__( "Black Friday: Our biggest sale just dropped!", "wordpress-seo" )
94	}
95	</h3>
96	<div className="yst-mt-2 yst-text-slate-600 yst-text-sm">
97	<p>{ description }</p>
98	</div>
99	</div>
100	<div className="yst-w-full yst-flex yst-mt-6">
101	<Button
102	as="a"
103	className="yst-grow yst-border-slate-200"
104	size="extra-large"
105	variant="upsell"
106	href={ buttonLink }
107	target="_blank"
108	ref={ initialFocus }
109	data-action="load-nfd-ctb"
110	data-ctb-id={ ctbId }
111	>
112	<LockOpenIcon className="yst--ms-1 yst-me-2 yst-h-5 yst-w-5" />
113	{ buttonLabel }
114	<span className="yst-sr-only">
115	{
116	/* translators: Hidden accessibility text. */
117	__( "(Opens in a new browser tab)", "wordpress-seo" )
118	}
119	</span>
120	</Button>
121	</div>
122	<Button
123	className="yst-mt-2"
124	variant="tertiary"
125	onClick={ onClose }
126	>
127	{ __( "Close", "wordpress-seo" ) }
128	</Button>
129	</div>
130	</>
131	);
132	};
133
134	/**
135	* @returns {JSX.Element} The element.
136	*/
NEW 137	export const BlackFridayAnnouncement = () => {	×
NEW 138	const imageLink = useSelect( select => select( STORE_NAME_INTRODUCTIONS ).selectImageLink( "ai-brand-insights-pre-launch.png" ), [] );	×
NEW 139	const isWooEnabled = useMemo( () => Boolean( get( window, "wpseoIntroductions.isWooEnabled", false ) ), [] );	×
NEW 140	const buttonPremiumLink = useSelect( select => select( STORE_NAME_INTRODUCTIONS ).selectLink( "https://yoa.st/black-friday-modal-premium/" ), [] );	×
NEW 141	const buttonWooLink = useSelect( select => select( STORE_NAME_INTRODUCTIONS ).selectLink( "https://yoa.st/black-friday-modal-ecommerce/" ), [] );	×
142
NEW 143	const thumbnail = useMemo( () => ( {	×
144	src: imageLink,
145	width: "432",
146	height: "243",
147	} ), [ imageLink ] );
148
NEW 149	return (	×
150	<Modal>
151	<BlackFridayAnnouncementContent
152	buttonLink={ isWooEnabled ? buttonWooLink : buttonPremiumLink }	×
153	thumbnail={ thumbnail }
154	isWooEnabled={ isWooEnabled }
155	/>
156	</Modal>
157	);
158	};

Yoast / wordpress-seo / e6a7e0b80499bdb8a730b54214937f6933fbef32

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous