@redotech/redo-hydrogen 1.4.7 → 2.0.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.
Files changed (26) hide show
  1. package/.github/workflows/ci.yml +58 -0
  2. package/.github/workflows/e2e.yml +72 -0
  3. package/.github/workflows/publish.yml +68 -0
  4. package/.prettierrc +7 -0
  5. package/.vscode/settings.json +10 -0
  6. package/CHANGELOG.md +8 -0
  7. package/README.md +37 -2
  8. package/dist/cjs/index.js +2 -2
  9. package/dist/cjs/index.js.map +1 -1
  10. package/dist/esm/index.js +2 -2
  11. package/dist/esm/index.js.map +1 -1
  12. package/dist/types.d.ts +5 -4
  13. package/eslint.config.mjs +22 -0
  14. package/package.json +25 -12
  15. package/src/components/redo-checkout-buttons.tsx +51 -72
  16. package/src/components/redo-info-modal.tsx +486 -345
  17. package/src/hooks/use-purple-dot-preorder.ts +1 -4
  18. package/src/index.ts +12 -4
  19. package/src/providers/redo-coverage-client.tsx +67 -69
  20. package/src/svg.d.ts +2 -2
  21. package/src/types.ts +30 -23
  22. package/src/utils/cart.ts +117 -153
  23. package/src/utils/purple-dot.ts +5 -11
  24. package/src/utils/react-utils.ts +9 -14
  25. package/src/utils/security.ts +3 -8
  26. package/src/utils/timeout.ts +1 -6
package/src/components/redo-info-modal.tsx CHANGED
@@ -7,40 +7,44 @@ import FeaturedPackageCheckIcon from "./icons/featured-package-check.svg";
7
7
  import FeaturedLaptopIcon from "./icons/featured-laptop-2.svg";
8
8
  import FeaturedRefreshIcon from "./icons/featured-refresh-cw-3.svg";
9
9
  import RedoLogo from "./icons/logo.svg";
10
- import CloseIcon from "./icons/modal-close-button.svg"
11
-
10
+ import CloseIcon from "./icons/modal-close-button.svg";
12
11
 
13
12
  interface RedoInfoModalProps {
14
- showInfoIcon?: boolean;
15
- onInfoClick?: () => void;
16
- infoCardImageUrl?: string;
17
- infoModalLogoUrl?: string;
18
- infoModalImageUrl?: string;
19
- infoModalContent?: ReactNode;
13
+ showInfoIcon?: boolean;
14
+ onInfoClick?: () => void;
15
+ infoCardImageUrl?: string;
16
+ infoModalLogoUrl?: string;
17
+ infoModalImageUrl?: string;
18
+ infoModalContent?: ReactNode;
20
19
  }
21
20
 
22
21
  function useInjectStyle(styleContent: string) {
23
- useEffect(() => {
24
- const styleTag = document.createElement('style');
25
- styleTag.textContent = styleContent;
26
- document.head.appendChild(styleTag);
27
- return () => {
28
- if(styleTag?.parentElement) {
29
- styleTag.parentElement.removeChild(styleTag);
30
- }
31
- };
32
- }, [styleContent]);
22
+ useEffect(() => {
23
+ const styleTag = document.createElement("style");
24
+ styleTag.textContent = styleContent;
25
+ document.head.appendChild(styleTag);
26
+ return () => {
27
+ if (styleTag?.parentElement) {
28
+ styleTag.parentElement.removeChild(styleTag);
29
+ }
30
+ };
31
+ }, [styleContent]);
33
32
  }
34
33
 
35
- const Modal = ({ open, onClose, infoModalLogoUrl, infoModalImageUrl, modalContent }:
36
- {
37
- open: boolean;
38
- onClose: () => void;
39
- infoModalLogoUrl?: string;
40
- infoModalImageUrl?: string;
41
- modalContent?: ReactNode;
34
+ const Modal = ({
35
+ open,
36
+ onClose,
37
+ infoModalLogoUrl,
38
+ infoModalImageUrl,
39
+ modalContent,
40
+ }: {
41
+ open: boolean;
42
+ onClose: () => void;
43
+ infoModalLogoUrl?: string;
44
+ infoModalImageUrl?: string;
45
+ modalContent?: ReactNode;
42
46
  }) => {
43
- useInjectStyle( `
47
+ useInjectStyle(`
44
48
  ${fadeInKeyframes}
45
49
  ${slideInKeyframes}
46
50
 
@@ -71,338 +75,477 @@ const Modal = ({ open, onClose, infoModalLogoUrl, infoModalImageUrl, modalConten
71
75
  }
72
76
  `);
73
77
 
74
- if (!open) return <></>;
78
+ if (!open) return <></>;
75
79
 
76
- const fullModalContent = (
77
- <div className="redo-info-modal__backgroundContainer" style={{
78
- position: 'fixed',
79
- top: 0,
80
- left: 0,
81
- right: 0,
82
- bottom: 0,
83
- backgroundColor: 'rgba(0, 0, 0, 0.5)',
84
- display: 'flex',
85
- alignItems: 'center',
86
- justifyContent: 'center',
87
- zIndex: 99999,
88
- transform: 'translateZ(0)',
89
- opacity: 1,
90
- transition: 'opacity 0.2s ease-in-out',
91
- animation: 'fadeIn 0.2s ease-in-out'
92
- }} onClick={onClose}>
93
- <div className="redo-info-modal__container" style={{
94
- backgroundColor: 'white',
95
- borderRadius: '8px',
96
- width: '700px',
97
- maxWidth: '900px',
98
- position: 'absolute',
99
- top: '50%',
100
- left: '50%',
101
- transform: 'translate(-50%, -50%)',
102
- zIndex: 100000,
103
- display: 'flex',
104
- flexDirection: 'row',
105
- alignItems: 'center',
106
- justifyContent: 'left',
107
- maxHeight: '95%',
108
- boxShadow: '0 4px 8px 0 rgba(0, 0, 0, 0.2)',
109
- opacity: 1,
110
- transition: 'opacity 0.2s ease-in-out, transform 0.2s ease-in-out',
111
- animation: 'slideIn 0.2s ease-in-out forwards',
112
- minHeight: '100px',
113
- }} onClick={e => e.stopPropagation()}>
114
- <button
115
- className="redo-info-modal__closeButton"
116
- onClick={onClose}
117
- style={{
118
- position: 'absolute',
119
- right: '16px',
120
- top: '16px',
121
- border: 'none',
122
- background: 'none',
123
- fontSize: '20px',
124
- cursor: 'pointer',
125
- padding: '4px',
126
- zIndex: 1
127
- }}
80
+ const fullModalContent = (
81
+ <div
82
+ className="redo-info-modal__backgroundContainer"
83
+ style={{
84
+ position: "fixed",
85
+ top: 0,
86
+ left: 0,
87
+ right: 0,
88
+ bottom: 0,
89
+ backgroundColor: "rgba(0, 0, 0, 0.5)",
90
+ display: "flex",
91
+ alignItems: "center",
92
+ justifyContent: "center",
93
+ zIndex: 99999,
94
+ transform: "translateZ(0)",
95
+ opacity: 1,
96
+ transition: "opacity 0.2s ease-in-out",
97
+ animation: "fadeIn 0.2s ease-in-out",
98
+ }}
99
+ onClick={onClose}
100
+ >
101
+ <div
102
+ className="redo-info-modal__container"
103
+ style={{
104
+ backgroundColor: "white",
105
+ borderRadius: "8px",
106
+ width: "700px",
107
+ maxWidth: "900px",
108
+ position: "absolute",
109
+ top: "50%",
110
+ left: "50%",
111
+ transform: "translate(-50%, -50%)",
112
+ zIndex: 100000,
113
+ display: "flex",
114
+ flexDirection: "row",
115
+ alignItems: "center",
116
+ justifyContent: "left",
117
+ maxHeight: "95%",
118
+ boxShadow: "0 4px 8px 0 rgba(0, 0, 0, 0.2)",
119
+ opacity: 1,
120
+ transition: "opacity 0.2s ease-in-out, transform 0.2s ease-in-out",
121
+ animation: "slideIn 0.2s ease-in-out forwards",
122
+ minHeight: "100px",
123
+ }}
124
+ onClick={(e) => e.stopPropagation()}
125
+ >
126
+ <button
127
+ className="redo-info-modal__closeButton"
128
+ onClick={onClose}
129
+ style={{
130
+ position: "absolute",
131
+ right: "16px",
132
+ top: "16px",
133
+ border: "none",
134
+ background: "none",
135
+ fontSize: "20px",
136
+ cursor: "pointer",
137
+ padding: "4px",
138
+ zIndex: 1,
139
+ }}
140
+ >
141
+ <CloseIcon />
142
+ </button>
143
+ {infoModalImageUrl ? (
144
+ <div
145
+ className="redo-info-modal__sideImageContainer"
146
+ style={{
147
+ minWidth: "200px",
148
+ width: "200px",
149
+ backgroundImage: `url(${infoModalImageUrl})`,
150
+ backgroundSize: "cover",
151
+ backgroundPosition: "center center",
152
+ borderTopLeftRadius: "8px",
153
+ borderBottomLeftRadius: "8px",
154
+ alignSelf: "stretch",
155
+ }}
156
+ ></div>
157
+ ) : null}
158
+ {modalContent ? (
159
+ modalContent
160
+ ) : (
161
+ <div
162
+ className="redo-info-modal__contentContainer"
163
+ style={{
164
+ padding: "24px",
165
+ fontFamily: 'Inter, "Helvetica Neue", Arial, sans-serif',
166
+ }}
167
+ >
168
+ <div
169
+ className="redo-info-modal__logoContainer"
170
+ style={{
171
+ width: "100%",
172
+ height: "100%",
173
+ display: "block",
174
+ marginBottom: "8px",
175
+ }}
176
+ >
177
+ {infoModalLogoUrl ? (
178
+ <img
179
+ src={infoModalLogoUrl}
180
+ className="redo-info-modal__logo"
181
+ style={{
182
+ width: "auto",
183
+ height: "112px",
184
+ display: "block",
185
+ }}
186
+ />
187
+ ) : (
188
+ <RedoLogo width="112px" height="112px" display="block" />
189
+ )}
190
+ </div>
191
+ <p
192
+ style={{
193
+ fontSize: "20px",
194
+ fontWeight: "600",
195
+ }}
196
+ className="redo-info-modal__title"
197
+ >
198
+ Checkout with confidence
199
+ </p>
200
+
201
+ <p
202
+ style={{
203
+ fontSize: "14px",
204
+ color: "#666",
205
+ marginBottom: "24px",
206
+ }}
207
+ className="redo-info-modal__description"
208
+ >
209
+ Shop with confidence, knowing your purchases are protected every step of the way.
210
+ </p>
211
+
212
+ <div className="redo-info-modal__benefitsContainer" style={{ marginBottom: "24px" }}>
213
+ <div className="redo-info-modal__benefit" style={{ marginBottom: "16px" }}>
214
+ <div
215
+ className="redo-info-modal__benefitIconContainer"
216
+ style={{
217
+ display: "flex",
218
+ flexDirection: "row",
219
+ alignItems: "flex-start",
220
+ justifyContent: "flex-start",
221
+ gap: "10px",
222
+ }}
128
223
  >
129
- <CloseIcon />
130
- </button>
131
- {infoModalImageUrl ? (
132
- <div className="redo-info-modal__sideImageContainer" style={{
133
- minWidth: '200px',
134
- width: '200px',
135
- backgroundImage: `url(${infoModalImageUrl})`,
136
- backgroundSize: 'cover',
137
- backgroundPosition: 'center center',
138
- borderTopLeftRadius: '8px',
139
- borderBottomLeftRadius: '8px',
140
- alignSelf: 'stretch',
141
- }}>
142
- </div>
143
- ) : null}
144
- {modalContent ? modalContent : (
145
- <div className="redo-info-modal__contentContainer" style={{
146
- padding: '24px',
147
- fontFamily: 'Inter, "Helvetica Neue", Arial, sans-serif',
148
- }}>
149
- <div className="redo-info-modal__logoContainer" style={{
150
- width: '100%',
151
- height: '100%',
152
- display: 'block',
153
- marginBottom: '8px'
154
- }}>
155
- {infoModalLogoUrl ? (
156
- <img src={infoModalLogoUrl} className="redo-info-modal__logo" style={{
157
- width: 'auto',
158
- height: '112px',
159
- display: 'block',
160
- }}/>
161
- ) : <RedoLogo width="112px" height="112px" display="block"/>}
162
- </div>
163
- <p style={{
164
- fontSize: '20px',
165
- fontWeight: '600'
166
- }} className="redo-info-modal__title">
167
- Checkout with confidence
224
+ <div
225
+ className="redo-info-modal__benefitIcon"
226
+ style={{
227
+ display: "flex",
228
+ alignItems: "center",
229
+ justifyContent: "center",
230
+ width: "36px",
231
+ height: "36px",
232
+ }}
233
+ >
234
+ <FeaturedRefreshIcon height="32" width="32" />
235
+ </div>
236
+ <div
237
+ className="redo-info-modal__benefitTextContainer"
238
+ style={{ display: "flex", flexDirection: "column", alignItems: "flex-start" }}
239
+ >
240
+ <p
241
+ className="redo-info-modal__benefitText"
242
+ style={{ fontSize: "16px", fontWeight: "600", marginBottom: "4px" }}
243
+ >
244
+ Free returns & exchanges
168
245
  </p>
169
-
170
- <p style={{
171
- fontSize: '14px',
172
- color: '#666',
173
- marginBottom: '24px'
174
- }} className="redo-info-modal__description">
175
- Shop with confidence, knowing your purchases are protected every step of the way.
246
+ <p className="redo-info-modal__benefitSmallText" style={{ fontSize: "12px", color: "#666" }}>
247
+ Return or exchange your items for free. If you're not completely satisfied, we've got you covered.
176
248
  </p>
249
+ </div>
250
+ </div>
251
+ </div>
177
252
 
178
- <div className="redo-info-modal__benefitsContainer" style={{ marginBottom: '24px' }}>
179
- <div className="redo-info-modal__benefit" style={{ marginBottom: '16px' }}>
180
- <div className="redo-info-modal__benefitIconContainer" style={{ display: 'flex', flexDirection: 'row', alignItems: 'flex-start', justifyContent: 'flex-start', gap: '10px' }}>
181
- <div className="redo-info-modal__benefitIcon" style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', width: '36px', height: '36px' }}>
182
- <FeaturedRefreshIcon height="32" width="32" />
183
- </div>
184
- <div className="redo-info-modal__benefitTextContainer" style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-start' }}>
185
- <p className="redo-info-modal__benefitText" style={{ fontSize: '16px', fontWeight: '600', marginBottom: '4px' }}>
186
- Free returns & exchanges
187
- </p>
188
- <p className="redo-info-modal__benefitSmallText" style={{ fontSize: '12px', color: '#666' }}>
189
- Return or exchange your items for free. If you're not completely satisfied, we've got you covered.
190
- </p>
191
- </div>
192
- </div>
193
- </div>
194
-
195
- <div className="redo-info-modal__benefit" style={{ marginBottom: '16px' }}>
196
- <div className="redo-info-modal__benefitIconContainer" style={{ display: 'flex', flexDirection: 'row', alignItems: 'flex-start', gap: '10px' }}>
197
- <div className="redo-info-modal__benefitIcon" style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', width: '36px', height: '36px' }}>
198
- <FeaturedPackageCheckIcon height="32" width="32" />
199
- </div>
200
- <div className="redo-info-modal__benefitTextContainer" style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-start' }}>
201
- <p className="redo-info-modal__benefitText" style={{
202
- fontSize: '16px',
203
- fontWeight: '600',
204
- marginBottom: '4px'
205
- }}>
206
- Package protection
207
- </p>
208
- <p className="redo-info-modal__benefitSmallText" style={{
209
- fontSize: '12px',
210
- color: '#666'
211
- }}>
212
- Rest assured, if your package is lost, stolen, or damaged, we've got you covered.
213
- </p>
214
- </div>
215
- </div>
216
- </div>
217
-
218
- <div className="redo-info-modal__benefit" style={{ marginBottom: '16px' }}>
219
- <div className="redo-info-modal__benefitIconContainer" style={{ display: 'flex', flexDirection: 'row', alignItems: 'flex-start', gap: '10px' }}>
220
- <div className="redo-info-modal__benefitIcon" style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', width: '36px', height: '36px' }}>
221
- <FeaturedLaptopIcon height="32" width="32" />
222
- </div>
223
- <div className="redo-info-modal__benefitTextContainer" style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-start' }}>
224
- <p className="redo-info-modal__benefitText" style={{
225
- fontSize: '16px',
226
- fontWeight: '600',
227
- marginBottom: '4px'
228
- }}>
229
- Easy return portal
230
- </p>
231
- <p className="redo-info-modal__benefitSmallText" style={{
232
- fontSize: '12px',
233
- color: '#666'
234
- }}>
235
- Skip all the back and forth, and submit your return in a few clicks.
236
- </p>
237
- </div>
238
- </div>
239
- </div>
240
- </div>
253
+ <div className="redo-info-modal__benefit" style={{ marginBottom: "16px" }}>
254
+ <div
255
+ className="redo-info-modal__benefitIconContainer"
256
+ style={{ display: "flex", flexDirection: "row", alignItems: "flex-start", gap: "10px" }}
257
+ >
258
+ <div
259
+ className="redo-info-modal__benefitIcon"
260
+ style={{
261
+ display: "flex",
262
+ alignItems: "center",
263
+ justifyContent: "center",
264
+ width: "36px",
265
+ height: "36px",
266
+ }}
267
+ >
268
+ <FeaturedPackageCheckIcon height="32" width="32" />
269
+ </div>
270
+ <div
271
+ className="redo-info-modal__benefitTextContainer"
272
+ style={{ display: "flex", flexDirection: "column", alignItems: "flex-start" }}
273
+ >
274
+ <p
275
+ className="redo-info-modal__benefitText"
276
+ style={{
277
+ fontSize: "16px",
278
+ fontWeight: "600",
279
+ marginBottom: "4px",
280
+ }}
281
+ >
282
+ Package protection
283
+ </p>
284
+ <p
285
+ className="redo-info-modal__benefitSmallText"
286
+ style={{
287
+ fontSize: "12px",
288
+ color: "#666",
289
+ }}
290
+ >
291
+ Rest assured, if your package is lost, stolen, or damaged, we've got you covered.
292
+ </p>
293
+ </div>
294
+ </div>
295
+ </div>
241
296
 
242
- <p className="redo-info-modal__footerText" style={{
243
- fontSize: '12px',
244
- color: '#666',
245
- }}>
246
- By purchasing Redo, you agree and have read the{' '}
247
- <a
248
- href="https://www.getredo.com/privacy-policy"
249
- target="_blank"
250
- rel="noopener noreferrer"
251
- style={{ color: '#000', textDecoration: 'underline' }}
252
- >Privacy Policy</a> and{' '}
253
- <a
254
- href="https://www.getredo.com/terms-conditions"
255
- target="_blank"
256
- rel="noopener noreferrer"
257
- style={{ color: '#000', textDecoration: 'underline' }}
258
- >Terms and Conditions</a>.
259
- {' '}Redo is subject to Merchant's Return Policy.
297
+ <div className="redo-info-modal__benefit" style={{ marginBottom: "16px" }}>
298
+ <div
299
+ className="redo-info-modal__benefitIconContainer"
300
+ style={{ display: "flex", flexDirection: "row", alignItems: "flex-start", gap: "10px" }}
301
+ >
302
+ <div
303
+ className="redo-info-modal__benefitIcon"
304
+ style={{
305
+ display: "flex",
306
+ alignItems: "center",
307
+ justifyContent: "center",
308
+ width: "36px",
309
+ height: "36px",
310
+ }}
311
+ >
312
+ <FeaturedLaptopIcon height="32" width="32" />
313
+ </div>
314
+ <div
315
+ className="redo-info-modal__benefitTextContainer"
316
+ style={{ display: "flex", flexDirection: "column", alignItems: "flex-start" }}
317
+ >
318
+ <p
319
+ className="redo-info-modal__benefitText"
320
+ style={{
321
+ fontSize: "16px",
322
+ fontWeight: "600",
323
+ marginBottom: "4px",
324
+ }}
325
+ >
326
+ Easy return portal
260
327
  </p>
328
+ <p
329
+ className="redo-info-modal__benefitSmallText"
330
+ style={{
331
+ fontSize: "12px",
332
+ color: "#666",
333
+ }}
334
+ >
335
+ Skip all the back and forth, and submit your return in a few clicks.
336
+ </p>
337
+ </div>
261
338
  </div>
262
- )}
339
+ </div>
263
340
  </div>
264
- </div>
265
- );
266
341
 
267
- return createPortal(fullModalContent, document.body);
342
+ <p
343
+ className="redo-info-modal__footerText"
344
+ style={{
345
+ fontSize: "12px",
346
+ color: "#666",
347
+ }}
348
+ >
349
+ By purchasing Redo, you agree and have read the{" "}
350
+ <a
351
+ href="https://www.getredo.com/privacy-policy"
352
+ target="_blank"
353
+ rel="noopener noreferrer"
354
+ style={{ color: "#000", textDecoration: "underline" }}
355
+ >
356
+ Privacy Policy
357
+ </a>{" "}
358
+ and{" "}
359
+ <a
360
+ href="https://www.getredo.com/terms-conditions"
361
+ target="_blank"
362
+ rel="noopener noreferrer"
363
+ style={{ color: "#000", textDecoration: "underline" }}
364
+ >
365
+ Terms and Conditions
366
+ </a>
367
+ . Redo is subject to Merchant's Return Policy.
368
+ </p>
369
+ </div>
370
+ )}
371
+ </div>
372
+ </div>
373
+ );
374
+
375
+ return createPortal(fullModalContent, document.body);
268
376
  };
269
377
 
270
- const RedoInfoCard = ({
271
- showInfoIcon = true,
272
- onInfoClick,
273
- infoCardImageUrl,
274
- infoModalLogoUrl,
275
- infoModalImageUrl,
276
- infoModalContent,
378
+ const RedoInfoCard = ({
379
+ showInfoIcon = true,
380
+ onInfoClick,
381
+ infoCardImageUrl,
382
+ infoModalLogoUrl,
383
+ infoModalImageUrl,
384
+ infoModalContent,
277
385
  }: RedoInfoModalProps) => {
278
- const { price, eligible } = useRedoCoverageClient();
279
- const [isModalOpen, setIsModalOpen] = useState(false);
386
+ const { price, eligible } = useRedoCoverageClient();
387
+ const [isModalOpen, setIsModalOpen] = useState(false);
280
388
 
281
- const handleInfoClick = () => {
282
- if (onInfoClick) {
283
- onInfoClick();
284
- } else {
285
- setIsModalOpen(true);
286
- }
287
- };
288
-
289
- if (!eligible) {
290
- return <></>;
389
+ const handleInfoClick = () => {
390
+ if (onInfoClick) {
391
+ onInfoClick();
392
+ } else {
393
+ setIsModalOpen(true);
291
394
  }
395
+ };
292
396
 
293
- return (
294
- <>
295
- <div className="redo-info-card__container" data-target="info-card-container" style={{
296
- display: 'flex',
297
- borderRadius: '4px',
298
- padding: '12px',
299
- alignItems: 'center',
300
- gap: '12px',
301
- marginTop: '8px'
302
- }}>
303
- <div className="redo-info-card__imageContainer" style={{
304
- width: '44px',
305
- height: '44px',
306
- borderRadius: '100%',
307
- display: 'flex',
308
- justifyContent: 'center',
309
- alignItems: 'center',
310
- flexShrink: 0,
311
- }}>
312
- {infoCardImageUrl ? (
313
- <img src={infoCardImageUrl} alt="Redo Info" className="redo-info-card__image" style={{
314
- width: '100%',
315
- height: '100%',
316
- objectFit: 'contain'
317
- }} />
318
- ) : (
319
- <ShieldIcon style={{
320
- width: '100%',
321
- height: '100%',
322
- color: 'black',
323
- display: 'block',
324
- viewBox: '0 0 24 24',
325
- }}/>
326
- )}
327
- </div>
328
-
329
- <div className="redo-info-card__content" data-target="text-and-buttons-container" style={{
330
- flex: 1
331
- }}>
332
- <div className="redo-info-card__textWrapper" style={{
333
- display: 'flex',
334
- flexDirection: 'column',
335
- }}>
336
- <span className="redo-info-card__title" data-target="toggle-label" style={{
337
- color: '#000000',
338
- fontSize: '14px',
339
- fontWeight: 600,
340
- display: 'flex',
341
- alignItems: 'center',
342
- gap: '5px',
343
- verticalAlign: 'middle'
344
- }}>
345
- Checkout+
346
- {showInfoIcon && (
347
- <span className="redo-info-card__infoIconWrapper" data-target="toggle-info">
348
- <button
349
- className="redo-info-card__infoButton"
350
- data-target="toggle-info-button"
351
- onClick={handleInfoClick}
352
- type="button"
353
- style={{
354
- border: 'none',
355
- background: 'none',
356
- padding: 0,
357
- cursor: 'pointer',
358
- color: '#969696',
359
- display: 'flex',
360
- alignItems: 'center',
361
- justifyContent: 'center'
362
- }}
363
- >
364
- <InfoIcon
365
- style={{
366
- width: '16px',
367
- height: '16px',
368
- verticalAlign: 'middle'
369
- }}
370
- className="redo-info-card__infoIcon"
371
- />
372
- </button>
373
- </span>
374
- )}
375
- </span>
376
- <p className="redo-info-card__subtext" data-target="toggle-subtext" style={{
377
- color: '#000000',
378
- fontSize: '12px',
379
- lineHeight: '16px'
380
- }}>
381
- Free Returns + Package Protection
382
- </p>
383
- </div>
384
- </div>
385
-
386
- <div className="redo-info-card__priceContainer">
387
- <p style={{
388
- color: '#000000',
389
- fontSize: '14px',
390
- fontWeight: 400,
391
- }} className="redo-info-card__price" data-target="price">${price}</p>
392
- </div>
393
- </div>
394
-
395
- {!onInfoClick && (
396
- <Modal
397
- open={isModalOpen}
398
- onClose={() => setIsModalOpen(false)}
399
- infoModalLogoUrl={infoModalLogoUrl}
400
- infoModalImageUrl={infoModalImageUrl}
401
- modalContent={infoModalContent}
402
- />
403
- )}
404
- </>
405
- );
397
+ if (!eligible) {
398
+ return <></>;
399
+ }
400
+
401
+ return (
402
+ <>
403
+ <div
404
+ className="redo-info-card__container"
405
+ data-target="info-card-container"
406
+ style={{
407
+ display: "flex",
408
+ borderRadius: "4px",
409
+ padding: "12px",
410
+ alignItems: "center",
411
+ gap: "12px",
412
+ marginTop: "8px",
413
+ }}
414
+ >
415
+ <div
416
+ className="redo-info-card__imageContainer"
417
+ style={{
418
+ width: "44px",
419
+ height: "44px",
420
+ borderRadius: "100%",
421
+ display: "flex",
422
+ justifyContent: "center",
423
+ alignItems: "center",
424
+ flexShrink: 0,
425
+ }}
426
+ >
427
+ {infoCardImageUrl ? (
428
+ <img
429
+ src={infoCardImageUrl}
430
+ alt="Redo Info"
431
+ className="redo-info-card__image"
432
+ style={{
433
+ width: "100%",
434
+ height: "100%",
435
+ objectFit: "contain",
436
+ }}
437
+ />
438
+ ) : (
439
+ <ShieldIcon
440
+ viewBox="0 0 24 24"
441
+ style={{
442
+ width: "100%",
443
+ height: "100%",
444
+ color: "black",
445
+ display: "block",
446
+ }}
447
+ />
448
+ )}
449
+ </div>
450
+
451
+ <div
452
+ className="redo-info-card__content"
453
+ data-target="text-and-buttons-container"
454
+ style={{
455
+ flex: 1,
456
+ }}
457
+ >
458
+ <div
459
+ className="redo-info-card__textWrapper"
460
+ style={{
461
+ display: "flex",
462
+ flexDirection: "column",
463
+ }}
464
+ >
465
+ <span
466
+ className="redo-info-card__title"
467
+ data-target="toggle-label"
468
+ style={{
469
+ color: "#000000",
470
+ fontSize: "14px",
471
+ fontWeight: 600,
472
+ display: "flex",
473
+ alignItems: "center",
474
+ gap: "5px",
475
+ verticalAlign: "middle",
476
+ }}
477
+ >
478
+ Checkout+
479
+ {showInfoIcon && (
480
+ <span className="redo-info-card__infoIconWrapper" data-target="toggle-info">
481
+ <button
482
+ className="redo-info-card__infoButton"
483
+ data-target="toggle-info-button"
484
+ onClick={handleInfoClick}
485
+ type="button"
486
+ style={{
487
+ border: "none",
488
+ background: "none",
489
+ padding: 0,
490
+ cursor: "pointer",
491
+ color: "#969696",
492
+ display: "flex",
493
+ alignItems: "center",
494
+ justifyContent: "center",
495
+ }}
496
+ >
497
+ <InfoIcon
498
+ style={{
499
+ width: "16px",
500
+ height: "16px",
501
+ verticalAlign: "middle",
502
+ }}
503
+ className="redo-info-card__infoIcon"
504
+ />
505
+ </button>
506
+ </span>
507
+ )}
508
+ </span>
509
+ <p
510
+ className="redo-info-card__subtext"
511
+ data-target="toggle-subtext"
512
+ style={{
513
+ color: "#000000",
514
+ fontSize: "12px",
515
+ lineHeight: "16px",
516
+ }}
517
+ >
518
+ Free Returns + Package Protection
519
+ </p>
520
+ </div>
521
+ </div>
522
+
523
+ <div className="redo-info-card__priceContainer">
524
+ <p
525
+ style={{
526
+ color: "#000000",
527
+ fontSize: "14px",
528
+ fontWeight: 400,
529
+ }}
530
+ className="redo-info-card__price"
531
+ data-target="price"
532
+ >
533
+ ${price}
534
+ </p>
535
+ </div>
536
+ </div>
537
+
538
+ {!onInfoClick && (
539
+ <Modal
540
+ open={isModalOpen}
541
+ onClose={() => setIsModalOpen(false)}
542
+ infoModalLogoUrl={infoModalLogoUrl}
543
+ infoModalImageUrl={infoModalImageUrl}
544
+ modalContent={infoModalContent}
545
+ />
546
+ )}
547
+ </>
548
+ );
406
549
  };
407
550
 
408
551
  const fadeInKeyframes = `
@@ -429,6 +572,4 @@ const slideInKeyframes = `
429
572
  }
430
573
  `;
431
574
 
432
-
433
-
434
- export { RedoInfoCard };
575
+ export { RedoInfoCard };