@saasquatch/mint-components 1.15.0-117 → 1.15.0-118

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 (63) hide show
  1. package/dist/cjs/{ShadowViewAddon-f1bd9b26.js → ShadowViewAddon-8fed996f.js} +1 -1
  2. package/dist/cjs/sqm-big-stat_43.cjs.entry.js +2 -2
  3. package/dist/cjs/sqm-stencilbook.cjs.entry.js +1 -1
  4. package/dist/collection/components/sqm-leaderboard/sqm-leaderboard-view.js +1 -1
  5. package/dist/collection/components/sqm-reward-exchange-list/sqm-reward-exchange-list.js +1 -1
  6. package/dist/esm/{ShadowViewAddon-c0600f22.js → ShadowViewAddon-928bfc1a.js} +1 -1
  7. package/dist/esm/sqm-big-stat_43.entry.js +2 -2
  8. package/dist/esm/sqm-stencilbook.entry.js +1 -1
  9. package/dist/esm-es5/{ShadowViewAddon-c0600f22.js → ShadowViewAddon-928bfc1a.js} +1 -1
  10. package/dist/esm-es5/sqm-big-stat_43.entry.js +1 -1
  11. package/dist/esm-es5/sqm-stencilbook.entry.js +1 -1
  12. package/dist/mint-components/mint-components.esm.js +1 -1
  13. package/dist/mint-components/{p-ed69dc98.system.entry.js → p-10507209.system.entry.js} +1 -1
  14. package/dist/mint-components/{p-be770d69.system.entry.js → p-3f1f78c0.system.entry.js} +1 -1
  15. package/dist/mint-components/{p-f9f67437.entry.js → p-56a5e3b2.entry.js} +1 -1
  16. package/dist/mint-components/{p-bdc86ee3.system.js → p-84a5b46a.system.js} +1 -1
  17. package/dist/mint-components/{p-1276830a.entry.js → p-a0c8162d.entry.js} +2 -2
  18. package/dist/mint-components/p-a89baf7b.system.js +1 -1
  19. package/dist/mint-components/{p-6b904749.js → p-d278519f.js} +1 -1
  20. package/docs/docs.docx +0 -0
  21. package/package.json +1 -1
  22. package/dist/cjs/RewardExchangeListData-a787ce54.js +0 -1144
  23. package/dist/cjs/copy-text-view-f0313f78.js +0 -121
  24. package/dist/cjs/sqm-coupon-code-view-a869384e.js +0 -35
  25. package/dist/cjs/sqm-coupon-code.cjs.entry.js +0 -285
  26. package/dist/cjs/sqm-referral-code.cjs.entry.js +0 -177
  27. package/dist/cjs/sqm-reward-exchange-list.cjs.entry.js +0 -1018
  28. package/dist/cjs/sqm-share-code.cjs.entry.js +0 -147
  29. package/dist/cjs/sqm-share-link.cjs.entry.js +0 -102
  30. package/dist/esm/RewardExchangeListData-11c043e3.js +0 -1122
  31. package/dist/esm/copy-text-view-3129fb22.js +0 -119
  32. package/dist/esm/sqm-coupon-code-view-af016712.js +0 -33
  33. package/dist/esm/sqm-coupon-code.entry.js +0 -281
  34. package/dist/esm/sqm-referral-code.entry.js +0 -173
  35. package/dist/esm/sqm-reward-exchange-list.entry.js +0 -1014
  36. package/dist/esm/sqm-share-code.entry.js +0 -143
  37. package/dist/esm/sqm-share-link.entry.js +0 -98
  38. package/dist/esm-es5/RewardExchangeListData-11c043e3.js +0 -1
  39. package/dist/esm-es5/copy-text-view-3129fb22.js +0 -1
  40. package/dist/esm-es5/sqm-coupon-code-view-af016712.js +0 -1
  41. package/dist/esm-es5/sqm-coupon-code.entry.js +0 -1
  42. package/dist/esm-es5/sqm-referral-code.entry.js +0 -1
  43. package/dist/esm-es5/sqm-reward-exchange-list.entry.js +0 -1
  44. package/dist/esm-es5/sqm-share-code.entry.js +0 -1
  45. package/dist/esm-es5/sqm-share-link.entry.js +0 -1
  46. package/dist/mint-components/RewardExchangeListData-11c043e3.js +0 -1122
  47. package/dist/mint-components/RewardExchangeListData-546ffbb9.system.js +0 -1
  48. package/dist/mint-components/copy-text-view-3129fb22.js +0 -119
  49. package/dist/mint-components/copy-text-view-33cac657.system.js +0 -1
  50. package/dist/mint-components/sqm-coupon-code-view-40fd8d8b.system.js +0 -1
  51. package/dist/mint-components/sqm-coupon-code-view-af016712.js +0 -33
  52. package/dist/mint-components/sqm-coupon-code.entry.js +0 -281
  53. package/dist/mint-components/sqm-coupon-code.system.entry.js +0 -1
  54. package/dist/mint-components/sqm-referral-code.entry.js +0 -173
  55. package/dist/mint-components/sqm-referral-code.system.entry.js +0 -1
  56. package/dist/mint-components/sqm-reward-exchange-list.entry.js +0 -1014
  57. package/dist/mint-components/sqm-reward-exchange-list.system.entry.js +0 -1
  58. package/dist/mint-components/sqm-share-code.entry.js +0 -143
  59. package/dist/mint-components/sqm-share-code.system.entry.js +0 -1
  60. package/dist/mint-components/sqm-share-link.entry.js +0 -98
  61. package/dist/mint-components/sqm-share-link.system.entry.js +0 -1
  62. package/dist/mint-components/sqm-stencilbook.entry.js +0 -20330
  63. package/dist/mint-components/sqm-stencilbook.system.entry.js +0 -1
@@ -1,1122 +0,0 @@
1
- import { h, j as getAssetPath } from './index-bfb7f924.js';
2
- import { i as intl } from './global-c7169457.js';
3
- import { c as createStyleSheet } from './JSS-8c381d8b.js';
4
- import { H as HostBlock } from './mixins-acc245cc.js';
5
- import { C as CopyTextView } from './copy-text-view-3129fb22.js';
6
-
7
- const LeftArrow = () => (h("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", style: { marginBottom: "-2px", marginRight: "5px" } },
8
- h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M7.34655 1.90573C7.75405 2.31323 7.75405 2.97392 7.34655 3.38143L3.56266 7.16531H14.9565C15.5328 7.16531 16 7.6325 16 8.20879C16 8.78509 15.5328 9.25227 14.9565 9.25227H3.56266L7.69437 13.384C8.10188 13.7915 8.10188 14.4522 7.69437 14.8597C7.28687 15.2672 6.62617 15.2672 6.21867 14.8597L0.305628 8.94664C-0.101876 8.53914 -0.101876 7.87845 0.305628 7.47094L5.87084 1.90573C6.27835 1.49822 6.93904 1.49822 7.34655 1.90573Z", fill: "#858585" })));
9
- const ExchangeArrows = () => (h("svg", { width: 19, height: 15, fill: "none", xmlns: "http://www.w3.org/2000/svg" },
10
- h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M5.125 14.783a.6.6 0 0 1-.851 0l-3.9-3.923a.6.6 0 1 1 .85-.846L4.1 12.905V1.52a.6.6 0 0 1 1.2 0v11.385l2.875-2.891a.6.6 0 1 1 .85.846l-3.9 3.923Zm9.6-13.686a.6.6 0 0 0-.851 0l-3.9 3.923a.6.6 0 0 0 .85.846L13.7 2.975V14.36a.6.6 0 1 0 1.2 0V2.975l2.875 2.891a.6.6 0 1 0 .85-.846l-3.9-3.923Z", fill: "#333" })));
11
- const CheckMark = () => (h("svg", { width: 12, height: 10, fill: "none", xmlns: "http://www.w3.org/2000/svg" },
12
- h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M11.58.23c.475.371.56 1.057.19 1.532L5.69 9.554a1.091 1.091 0 0 1-1.631.1L.32 5.915a1.09 1.09 0 1 1 1.542-1.542L4.73 7.239 10.049.42A1.09 1.09 0 0 1 11.58.23Z", fill: "#fff" })));
13
- const CheckmarkFilled = () => (h("svg", { width: "18", height: "18", viewBox: "0 0 18 18", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
14
- h("path", { d: "M0 9C0 4.02944 4.02944 0 9 0C13.9706 0 18 4.02944 18 9C18 13.9706 13.9706 18 9 18C4.02944 18 0 13.9706 0 9Z", fill: "currentColor" }),
15
- h("path", { d: "M5.68394 8.77046C5.28103 8.39273 4.64819 8.41315 4.27046 8.81606C3.89273 9.21897 3.91315 9.85181 4.31606 10.2295L5.68394 8.77046ZM7.66667 12L6.98273 12.7295C7.36738 13.0902 7.96595 13.0902 8.35061 12.7295L7.66667 12ZM13.6839 7.72954C14.0869 7.35181 14.1073 6.71897 13.7295 6.31606C13.3518 5.91315 12.719 5.89273 12.3161 6.27046L13.6839 7.72954ZM4.31606 10.2295L6.98273 12.7295L8.35061 11.2705L5.68394 8.77046L4.31606 10.2295ZM8.35061 12.7295L13.6839 7.72954L12.3161 6.27046L6.98273 11.2705L8.35061 12.7295Z", fill: "white" })));
16
- const Gift = () => (h("svg", { width: 156, height: 157, fill: "none", xmlns: "http://www.w3.org/2000/svg" },
17
- h("path", { d: "M40.18 126h83.663a3 3 0 0 0 3-3V73.966a3 3 0 0 0-3-3H40.18a3 3 0 0 0-3 3V123a3 3 0 0 0 3 3Z", fill: "#FFD34F" }),
18
- h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M37.18 73.862v7.966h89.663v-7.966H37.18Z", fill: "#E9BB30" }),
19
- h("path", { d: "M133.039 74.224a2.18 2.18 0 0 0 2.187-2.172v-19.19c0-1.2-.98-2.172-2.187-2.172H31.347a2.18 2.18 0 0 0-2.187 2.172v19.19c0 1.2.98 2.172 2.187 2.172H133.04Z", fill: "#FFC000" }),
20
- h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M123.287 35.172c0 6.056-9.155 15.226-13.76 15.654H88.888V126H75.141V50.826H58.534c-9.462-2.038-17.803-9.258-17.803-16.944 0-7.49 3.274-13.422 9.23-15.983 5.693-2.446 12.265-1.105 17.46 2.479 6.378 4.398 9.956 12.654 13.202 20.144.284.657.567 1.308.848 1.95.274-.608.55-1.228.83-1.856 3.216-7.22 6.887-15.464 13.057-19.89 5.454-3.913 12.387-5.39 18.38-2.711 6.197 2.77 9.549 9.127 9.549 17.157Zm-23.306-8.266c3.305-2.37 7.262-2.8 10.645 0 2.946 2.44 3.103 3.588 3.482 6.351l.067.483c0 4.09-3.549 10.252-7.097 10.252-2.515 0-4.489-.022-6.34-.041-3.375-.036-6.337-.068-11.403.04.966-1.86 1.737-3.644 2.473-5.346 1.967-4.553 3.678-8.515 8.173-11.739Zm-39.034 0c-1.6-1.103-5.268-.61-6.79.043-1.257.54-3.134 2.19-3.134 6.933 0 4.61 7.511 8.59 7.511 8.59s5.962 1.52 16.607 1.52c-3.624-8.922-8.757-13.336-14.194-17.086Z", fill: "#EB5757" }),
21
- h("path", { d: "M75.086 74.224h13.85v7.604h-13.85v-7.604Z", fill: "#DD4747" }),
22
- h("g", { filter: "url(#a)" },
23
- h("ellipse", { cx: 82.008, cy: 141.207, rx: 36.813, ry: 5.793, fill: "#E0DDDD", "fill-opacity": 0.8 })),
24
- h("path", { d: "M150.446 79.134a.5.5 0 0 1 .9 0l1.133 2.336c.05.102.132.184.234.233l2.344 1.122a.5.5 0 0 1 0 .902l-2.344 1.122a.503.503 0 0 0-.234.233l-1.133 2.336a.5.5 0 0 1-.9 0l-1.134-2.336a.499.499 0 0 0-.234-.233l-2.343-1.122a.5.5 0 0 1 0-.902l2.343-1.122a.499.499 0 0 0 .234-.233l1.134-2.336Z", fill: "#FAB6B6" }),
25
- h("path", { d: "M14.86 29.168a.5.5 0 0 1 .9 0l1.133 2.336a.5.5 0 0 0 .234.233l2.344 1.122a.5.5 0 0 1 0 .902l-2.344 1.122a.5.5 0 0 0-.234.233l-1.133 2.336a.5.5 0 0 1-.9 0l-1.134-2.336a.5.5 0 0 0-.234-.233l-2.343-1.122a.5.5 0 0 1 0-.902l2.344-1.122a.5.5 0 0 0 .233-.233l1.134-2.336Z", fill: "#F4EFBC" }),
26
- h("path", { d: "m125.382 0 .712 1.466 1.475.706-1.475.707-.712 1.466-.711-1.466-1.476-.707 1.476-.706.711-1.466Z", fill: "#FDA802" }),
27
- h("path", { d: "m2.187 103.552.711 1.466 1.476.706-1.476.707-.711 1.466-.711-1.466L0 105.724l1.476-.706.71-1.466Z", fill: "#E4599C" }),
28
- h("defs", null,
29
- h("filter", { id: "a", x: 35.195, y: 125.414, width: 93.625, height: 31.586, filterUnits: "userSpaceOnUse", "color-interpolation-filters": "s-rGB" },
30
- h("feFlood", { "flood-opacity": 0, result: "BackgroundImageFix" }),
31
- h("feBlend", { in: "SourceGraphic", in2: "BackgroundImageFix", result: "shape" }),
32
- h("feGaussianBlur", { stdDeviation: 5, result: "effect1_foregroundBlur_653_17907" })))));
33
-
34
- function Dot({ active, completed, incomplete, stage, }) {
35
- return (h("div", { style: {
36
- display: "flex",
37
- } },
38
- h("div", { style: {
39
- backgroundColor: completed
40
- ? "var(--sqm-success-color-icon)"
41
- : incomplete
42
- ? "var(--sqm-border-color)"
43
- : "white",
44
- border: active
45
- ? "1px solid var(--sqm-success-color-border)"
46
- : incomplete
47
- ? "1px solid var(--sqm-border-color)"
48
- : "1px solid var(--sqm-success-color-border)",
49
- borderRadius: "50%",
50
- width: "23px",
51
- height: "23px",
52
- margin: "-11px",
53
- zIndex: "1",
54
- boxSizing: "content-box",
55
- } }, completed ? (h("div", { style: { top: "-10.5%", left: "23.5%", position: "relative" } },
56
- h(CheckMark, null))) : (h("div", { style: {
57
- color: active
58
- ? "var(--sqm-success-color-border)"
59
- : "var(--sqm-text-subdued)",
60
- width: "23px",
61
- lineHeight: "24px",
62
- textAlign: "center",
63
- position: "relative",
64
- } }, stage + 1)))));
65
- }
66
- function ProgressLine({ incomplete = false, active = false, invisible = false, }) {
67
- return (h("div", { style: {
68
- content: "''",
69
- flex: "0.5 0.5 0",
70
- height: "4px",
71
- borderRadius: "4px",
72
- background: incomplete || active
73
- ? "var(--sqm-border-color)"
74
- : "var(--sqm-success-color-icon)",
75
- position: "relative",
76
- bottom: "0",
77
- left: "0",
78
- display: "flex",
79
- justifyContent: "center",
80
- columnGap: "50px",
81
- marginRight: "-2px",
82
- boxSizing: "content-box",
83
- opacity: invisible ? "0" : "1",
84
- } }));
85
- }
86
- function Progress({ active, completed, incomplete, stage }) {
87
- return [
88
- h(ProgressLine, { incomplete: incomplete, invisible: stage === 0 }),
89
- h(Dot, { active: active, completed: completed, incomplete: incomplete, stage: stage }),
90
- h(ProgressLine, { incomplete: incomplete, active: active, invisible: stage === 2 }),
91
- ];
92
- }
93
- function ProgressBar({ stageCount, currentStage, }) {
94
- return (h("div", { style: { display: "flex", columnGap: "-2px" } }, Array.from(Array(stageCount).keys()).map((stage) => (h(Progress, { active: currentStage === stage, completed: currentStage > stage, incomplete: currentStage < stage, stage: stage })))));
95
- }
96
-
97
- const style = {
98
- HostBlock: HostBlock,
99
- Container: {
100
- minWidth: "300px",
101
- position: "relative",
102
- },
103
- FullImage: {
104
- objectFit: "contain",
105
- maxWidth: "100%",
106
- height: "250px",
107
- display: "flex",
108
- margin: "0 auto",
109
- },
110
- Select: {
111
- "&::part(base)": {
112
- borderRadius: "var(--sqm-input-border-radius)",
113
- },
114
- "&::part(label)": {
115
- color: "var(--sqm-input-label-color)",
116
- },
117
- "&::part(menu)": {
118
- maxHeight: "450px",
119
- },
120
- "& sl-menu-item::part(checked-icon)": {
121
- top: "8px",
122
- color: "var(--sqm-text)",
123
- },
124
- "& sl-menu-item::part(base)": {
125
- flexDirection: "column",
126
- },
127
- "& sl-menu-item::part(base):focus": {
128
- background: "var(--sqm-accent-color-background)",
129
- color: "var(--sqm-text)",
130
- },
131
- },
132
- ProgressBar: {
133
- maxWidth: "350px",
134
- width: "100%",
135
- margin: "auto",
136
- marginBottom: "var(--sl-spacing-xxx-large)",
137
- "& .text-area": {
138
- marginTop: "5px",
139
- display: "flex",
140
- justifyContent: "center",
141
- textAlign: "center",
142
- whiteSpace: "nowrap",
143
- marginBottom: "6px",
144
- "& .text": {
145
- marginBottom: "var(--sl-spacing-x-small)",
146
- flex: "1 1 0",
147
- },
148
- "& .text.subdued": {
149
- color: "var(--sqm-text-subdued)",
150
- },
151
- },
152
- },
153
- CardLayout: {
154
- display: "flex",
155
- width: "100%",
156
- borderRadius: "3px",
157
- background: "rgba(0, 0, 0, 0)",
158
- },
159
- Card: {
160
- display: "flex",
161
- userSelect: "none",
162
- height: "120px",
163
- "&::part(base)": {
164
- background: "var(--sqm-portal-background)",
165
- border: "var(--sqm-border-thickness) solid var(--sqm-border-color)",
166
- borderRadius: "var(--sqm-border-radius-normal)",
167
- boxShadow: "none",
168
- width: "100%",
169
- },
170
- "&::part(body)": {
171
- display: "flex",
172
- padding: 0,
173
- },
174
- "& .selected": {
175
- borderRadius: "var(--sqm-border-radius-normal)",
176
- position: "relative",
177
- top: "-2%",
178
- left: "100%",
179
- color: "var(--sqm-primary-color)",
180
- margin: "-9px",
181
- },
182
- },
183
- Title: {
184
- fontSize: "var(--sl-font-size-large)",
185
- fontWeight: "var(--sl-font-weight-semibold)",
186
- margin: "var(--sl-spacing-large) 0",
187
- },
188
- Image: {
189
- padding: "var(--sl-spacing-small)",
190
- minWidth: "96px",
191
- maxWidth: "96px",
192
- "& .image": {
193
- width: "100%",
194
- height: "100%",
195
- objectFit: "contain",
196
- borderRadius: "4px",
197
- },
198
- "& .image.subdued": {
199
- filter: "brightness(0.95)",
200
- opacity: "0.5",
201
- },
202
- },
203
- TextArea: {
204
- textAlign: "left",
205
- padding: "var(--sl-spacing-small)",
206
- paddingLeft: "0",
207
- "& .title": {
208
- fontSize: "var(--sl-font-size-medium)",
209
- lineHeight: "var(--sl-line-height-dense)",
210
- fontWeight: "600",
211
- color: "var(--sqm-text)",
212
- display: "-webkit-box",
213
- "-webkit-line-clamp": "1",
214
- "-webkit-box-orient": "vertical",
215
- overflow: "hidden",
216
- },
217
- "& .amount": {
218
- fontSize: "var(--sl-font-size-small)",
219
- lineHeight: "var(--sl-line-height-dense)",
220
- marginTop: "var(--sl-spacing-x-small)",
221
- color: "var(--sqm-text-subdued)",
222
- display: "-webkit-box",
223
- "-webkit-line-clamp": "1",
224
- "-webkit-box-orient": "vertical",
225
- overflow: "hidden",
226
- },
227
- "& .error": {
228
- fontSize: "var(--sl-font-size-small)",
229
- lineHeight: "var(--sl-line-height-dense)",
230
- marginTop: "var(--sl-spacing-x-small)",
231
- fontWeight: "600",
232
- color: "var(--sqm-warning-color-icon)",
233
- display: "-webkit-box",
234
- "-webkit-line-clamp": "1",
235
- "-webkit-box-orient": "vertical",
236
- overflow: "hidden",
237
- "& .icon": {
238
- position: "relative",
239
- top: "0.1em",
240
- marginRight: "var(--sl-spacing-xx-small)",
241
- },
242
- },
243
- },
244
- ChooseAmount: {
245
- maxWidth: "800px",
246
- margin: "auto",
247
- "& .wrapper": {
248
- display: "flex",
249
- gap: "var(--sl-spacing-xx-large)",
250
- "@media (max-width: 799px)": {
251
- flexDirection: "column",
252
- },
253
- },
254
- "& .image": {
255
- width: "50%",
256
- objectFit: "contain",
257
- maxWidth: "100%",
258
- height: "250px",
259
- display: "flex",
260
- "@media (max-width: 799px)": {
261
- width: "auto",
262
- },
263
- },
264
- "& .text": {
265
- width: "50%",
266
- maxWidth: "400px",
267
- "@media (max-width: 799px)": {
268
- width: "auto",
269
- margin: "auto",
270
- },
271
- },
272
- "& .title": {
273
- fontSize: "var(--sl-font-size-large)",
274
- fontWeight: "var(--sl-font-weight-semibold)",
275
- color: "var(--sqm-text)",
276
- },
277
- "& .points": {
278
- fontSize: "var(--sl-font-size-large)",
279
- fontWeight: "var(--sl-font-weight-semibold)",
280
- color: "var(--sqm-accent-color-text)",
281
- },
282
- "& .description": {
283
- fontSize: "var(--sl-font-size-medium)",
284
- fontWeight: "var(--sl-font-weight-normal)",
285
- color: "var(--sqm-text-subdued)",
286
- margin: "var(--sl-spacing-medium) 0",
287
- lineHeight: "var(--sl-line-height-dense)",
288
- marginTop: "var(--sl-spacing-xx-small)",
289
- },
290
- "& .space": {
291
- marginBottom: "var(--sl-spacing-xxx-large)",
292
- },
293
- "& sl-menu-item[disabled]::part(label)": {
294
- color: "var(sqm-text-subdued)",
295
- },
296
- "& sl-menu-item[disabled]": {
297
- "& .step-cost": {
298
- color: "var(sqm-text-subdued)",
299
- },
300
- "& .step-value": {
301
- color: "var(sqm-text-subdued)",
302
- },
303
- },
304
- },
305
- SelectItem: {
306
- display: "flex",
307
- flexDirection: "column",
308
- "&::part(label)": {
309
- color: "var(--sqm-text)",
310
- margin: "0",
311
- },
312
- "& .step-cost": {
313
- color: "var(--sqm-text-subdued)",
314
- marginBottom: "var(--sl-spacing-x-small)",
315
- },
316
- "& .step-unavailable": {
317
- fontSize: "var(--sl-font-size-small)",
318
- color: "var(--sqm-warning-color-text)",
319
- margin: "0",
320
- },
321
- },
322
- Success: {
323
- textAlign: "center",
324
- "& .title": {
325
- fontSize: "var(--sl-font-size-large)",
326
- fontWeight: "var(--sl-font-weight-semibold)",
327
- color: "var(--sqm-text)",
328
- },
329
- "& .description": {
330
- color: "var(--sqm-text-subued)",
331
- maxWidth: "350px",
332
- margin: "0 auto",
333
- lineHeight: "var(--sl-line-height-dense)",
334
- marginBottom: "var(--sl-spacing-xx-large)",
335
- marginTop: "var(--sl-spacing-xx-small)",
336
- },
337
- "& .promo": {
338
- maxWidth: "350px",
339
- margin: "-30px auto var(--sl-spacing-xxx-large) auto",
340
- textAlign: "left",
341
- color: "var(--sqm-text-subdued)",
342
- },
343
- },
344
- Grid: {
345
- display: "grid",
346
- justifyContent: "center",
347
- gap: "20px",
348
- gridTemplateColumns: "repeat(auto-fill, minmax(300px, 1fr))",
349
- },
350
- Confirmation: {
351
- maxWidth: "800px",
352
- margin: "auto",
353
- "& .wrapper": {
354
- display: "flex",
355
- "@media (max-width: 499px)": {
356
- flexDirection: "column",
357
- },
358
- },
359
- "& .reward-item-container": {
360
- "@media (max-width: 499px)": {
361
- display: "flex",
362
- flexDirection: "row-reverse",
363
- justifyContent: "flex-end",
364
- alignItems: "center",
365
- },
366
- },
367
- "& .reward-item-container .reward-title": {
368
- paddingBottom: "var(--sl-spacing-medium)",
369
- lineHeight: "20px",
370
- "@media (max-width: 499px)": {
371
- paddingBottom: "none",
372
- paddingLeft: "var(--sl-spacing-small)",
373
- },
374
- },
375
- "& .padding": {
376
- padding: "var(--sl-spacing-medium) 0",
377
- "@media (max-width: 499px)": {
378
- padding: "var(--sl-spacing-small) 0",
379
- },
380
- },
381
- "& .field": {
382
- width: "30%",
383
- fontSize: "var(--sl-font-size-medium)",
384
- fontWeight: "var(--sl-font-weight-normal)",
385
- color: "var(--sqm-text-subdued)",
386
- textAlign: "left",
387
- paddingRight: "var(--sl-spacing-xxx-large)",
388
- "@media (max-width: 499px)": {
389
- width: "100%",
390
- paddingRight: "0",
391
- paddingBottom: "0",
392
- },
393
- },
394
- "& .value": {
395
- fontSize: "var(--sl-font-size-large)",
396
- fontWeight: "var(--sl-font-weight-semibold)",
397
- },
398
- "& .top-border": {
399
- borderTop: "var(--sqm-border-thickness) solid var(--sqm-border-color)",
400
- },
401
- "& .image": {
402
- width: "200px",
403
- "@media (max-width: 499px)": {
404
- width: "100px",
405
- },
406
- },
407
- },
408
- Button: {
409
- display: "flex",
410
- flexWrap: "wrap-reverse",
411
- margin: "var(--sl-spacing-medium) 0",
412
- "& .cancel": {
413
- marginLeft: "auto",
414
- marginRight: "var(--sl-spacing-medium)",
415
- "@media (max-width: 499px)": {
416
- width: "100%",
417
- marginRight: "0",
418
- marginTop: "var(--sl-spacing-small)",
419
- },
420
- },
421
- "& .continue": {
422
- "@media (max-width: 499px)": {
423
- width: "100%",
424
- },
425
- },
426
- "& .continue.right": {
427
- marginLeft: "auto",
428
- },
429
- "& .continue.center": {
430
- margin: "0 auto",
431
- },
432
- },
433
- Confetti: {
434
- pointerEvents: "none",
435
- position: "absolute",
436
- width: "100%",
437
- height: "100%",
438
- top: "0%",
439
- left: "0%",
440
- zIndex: "1",
441
- },
442
- };
443
- // JSS config
444
- const sheet = createStyleSheet(style);
445
- const styleString = sheet.toString();
446
- const stageList = ["chooseReward", "chooseAmount", "confirmation", "success"];
447
- function RewardExchangeView(props) {
448
- const { states, data, callbacks, refs } = props;
449
- const { selectedItem, selectedStep } = states;
450
- const stageProgressList = {
451
- chooseReward: states.content.text.chooseRewardTitle,
452
- chooseAmount: states.content.text.chooseAmountTitle,
453
- confirmation: states.content.text.confirmationTitle,
454
- };
455
- function getInput() {
456
- var _a, _b, _c;
457
- const item = states.selectedItem;
458
- if (!item || (item === null || item === void 0 ? void 0 : item.ruleType) === "FIXED_GLOBAL_REWARD")
459
- return h("span", { class: "points" }, item === null || item === void 0 ? void 0 : item.prettySourceValue);
460
- if (!((_a = item.steps) === null || _a === void 0 ? void 0 : _a.length)) {
461
- return (h("p", null, intl.formatMessage({
462
- id: "notEnoughError",
463
- defaultMessage: states.content.text.notEnoughError,
464
- }, {
465
- sourceUnit: item.sourceUnit,
466
- })));
467
- }
468
- return (h("sl-select", { style: { width: "auto" }, label: (_b = states === null || states === void 0 ? void 0 : states.content) === null || _b === void 0 ? void 0 : _b.text.selectText, class: sheet.classes.Select, value: states.selectedStep, "onSl-select": (e) => {
469
- var _a, _b, _c, _d, _e;
470
- return callbacks.setExchangeState({
471
- amount: (_c = (_b = (_a = e.detail) === null || _a === void 0 ? void 0 : _a.item) === null || _b === void 0 ? void 0 : _b.value) === null || _c === void 0 ? void 0 : _c.sourceValue,
472
- selectedStep: (_e = (_d = e.detail) === null || _d === void 0 ? void 0 : _d.item) === null || _e === void 0 ? void 0 : _e.value,
473
- });
474
- } }, (_c = item.steps) === null || _c === void 0 ? void 0 : _c.map((step) => {
475
- var _a, _b;
476
- return (h("sl-menu-item", { value: step, disabled: !step.available, class: sheet.classes.SelectItem },
477
- step.prettyDestinationValue,
478
- h("br", null),
479
- h("div", { class: "step-cost", slot: "suffix" },
480
- step.prettySourceValue,
481
- step.unavailableReasonCode && (h("p", { class: "step-unavailable" }, intl.formatMessage({
482
- id: "unavailableCode",
483
- defaultMessage: (_b = (_a = states.content) === null || _a === void 0 ? void 0 : _a.text) === null || _b === void 0 ? void 0 : _b.notAvailableError,
484
- }, {
485
- unavailableReasonCode: step.unavailableReasonCode,
486
- sourceUnit: item.sourceUnit,
487
- sourceValue: step.prettySourceValue || item.prettySourceMinValue,
488
- }))))));
489
- })));
490
- }
491
- function chooseReward() {
492
- var _a;
493
- return [
494
- h("div", { part: "choose-reward-container" },
495
- h("div", { class: sheet.classes.Title }, states.content.text.rewardTitle),
496
- states.loading || states.queryError ? (loading()) : (h("div", { class: sheet.classes.Grid }, (_a = data.exchangeList) === null || _a === void 0 ? void 0 : _a.map((item) => {
497
- var _a, _b, _c, _d, _e;
498
- const style = {
499
- boxShadow: item.key === (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.key)
500
- ? "0 0 0 2px var(--sqm-primary-color)"
501
- : "none",
502
- borderRadius: "var(--sqm-border-radius-normal)",
503
- borderColor: "none",
504
- };
505
- return (h("div", { key: item.key, style: style },
506
- h("sl-card", { exportparts: "base: exchange-card-container", class: sheet.classes.Card, style: {
507
- cursor: item.unavailableReasonCode
508
- ? "not-allowed"
509
- : "pointer",
510
- }, onClick: () => item.available &&
511
- callbacks.setExchangeState({ selectedItem: item }) },
512
- item.key === (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.key) && (h("div", { class: "selected" },
513
- h(CheckmarkFilled, null))),
514
- h("div", { style: {
515
- display: "flex",
516
- width: "100%",
517
- height: "120px",
518
- borderRadius: "3px",
519
- background: item.unavailableReasonCode
520
- ? "rgba(0, 0, 0, 0.05)"
521
- : "rgba(0, 0, 0, 0)",
522
- } },
523
- h("div", { class: sheet.classes.Image, style: {
524
- opacity: item.unavailableReasonCode ? "0.5" : "1",
525
- } },
526
- h("img", { class: item.unavailableReasonCode
527
- ? "image subdued"
528
- : "image", src: (item === null || item === void 0 ? void 0 : item.imageUrl) ||
529
- getAssetPath("./assets/Reward-image.png") })),
530
- h("div", { class: sheet.classes.TextArea, style: {
531
- opacity: item.unavailableReasonCode ? "0.5" : "1",
532
- } },
533
- h("div", { class: "title", style: {
534
- "-webkit-line-clamp": item.unavailableReasonCode
535
- ? "1"
536
- : "2",
537
- } }, (_a = item.name) !== null && _a !== void 0 ? _a : ""),
538
- h("div", { class: "amount", style: {
539
- "-webkit-line-clamp": item.unavailableReasonCode
540
- ? "1"
541
- : "2",
542
- } }, intl.formatMessage({
543
- id: "sourceAmountMessage",
544
- defaultMessage: (_c = (_b = states.content) === null || _b === void 0 ? void 0 : _b.text) === null || _c === void 0 ? void 0 : _c.sourceAmountMessage,
545
- }, {
546
- ruleType: item.ruleType,
547
- sourceValue: item.prettySourceValue,
548
- sourceMinValue: item.prettySourceMinValue,
549
- sourceMaxValue: item.prettySourceMaxValue,
550
- })),
551
- item.unavailableReasonCode && (h("div", { class: "error" },
552
- h("sl-icon", { class: "icon", name: "exclamation-triangle-fill" }),
553
- intl.formatMessage({
554
- id: "unavailableCode",
555
- defaultMessage: (_e = (_d = states.content) === null || _d === void 0 ? void 0 : _d.text) === null || _e === void 0 ? void 0 : _e.notAvailableError,
556
- }, {
557
- unavailableReasonCode: item.unavailableReasonCode,
558
- sourceUnit: item.sourceUnit,
559
- sourceValue: item.prettySourceValue ||
560
- item.prettySourceMinValue,
561
- }))))))));
562
- }))),
563
- h("div", { class: sheet.classes.Button },
564
- h("sl-button", { exportparts: "base: primarybutton-base", type: "primary", class: "continue right", size: "large", onClick: () => callbacks.setStage("chooseAmount"), loading: states.loading, disabled: !states.selectedItem }, states.content.text.continueText))),
565
- ];
566
- }
567
- function chooseAmount() {
568
- var _a, _b, _c, _d;
569
- const input = getInput();
570
- const isDisabled = ((_a = states.selectedItem) === null || _a === void 0 ? void 0 : _a.ruleType) === "FIXED_GLOBAL_REWARD"
571
- ? false
572
- : input && !states.amount;
573
- return (h("div", null,
574
- h("div", { class: sheet.classes.ChooseAmount, part: "choose-amount-container" },
575
- h("div", { class: "wrapper" },
576
- h("img", { class: "image", src: (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.imageUrl) ||
577
- getAssetPath("./assets/Reward-image.png") }),
578
- h("div", { class: "text" },
579
- h("div", { class: "title" }, (_b = selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.name) !== null && _b !== void 0 ? _b : ""),
580
- ((_c = states.selectedItem) === null || _c === void 0 ? void 0 : _c.ruleType) === "FIXED_GLOBAL_REWARD" ? (h("div", { class: "points" }, input)) : (h("div", { class: "description" }, selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.description)),
581
- ((_d = states.selectedItem) === null || _d === void 0 ? void 0 : _d.ruleType) === "FIXED_GLOBAL_REWARD" ? (h("div", { class: "description" }, selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.description)) : (h("div", null, input)),
582
- h("div", { class: "space" }))),
583
- h("div", { class: sheet.classes.Button },
584
- h("sl-button", { exportparts: "base: secondarybutton-base", class: "cancel", size: "large", type: "secondary", onClick: () => callbacks.resetState() }, states.content.text.cancelText),
585
- h("sl-button", { exportparts: "base: primarybutton-base", class: "continue", size: "large", type: "primary", onClick: () => callbacks.setStage("confirmation"), disabled: isDisabled }, states.content.text.continueToConfirmationText)))));
586
- }
587
- function confirmation() {
588
- const cost = (selectedStep === null || selectedStep === void 0 ? void 0 : selectedStep.prettySourceValue) || selectedItem.prettySourceValue;
589
- const amount = selectedStep === null || selectedStep === void 0 ? void 0 : selectedStep.prettyDestinationValue;
590
- return (h("div", null,
591
- h("div", { class: sheet.classes.Confirmation, part: "confirmation-container" },
592
- h("div", { class: sheet.classes.Title }, states.content.text.redeemTitle),
593
- h("div", { class: "wrapper" },
594
- h("div", { class: "field" }, states.content.text.rewardNameTitle),
595
- h("div", { class: "reward-item-container" },
596
- h("div", { class: "reward-title" }, selectedItem.name),
597
- h("img", { class: "image", src: (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.imageUrl) ||
598
- getAssetPath("./assets/Reward-image.png") }))),
599
- h("div", { class: "wrapper padding" },
600
- h("div", { class: "field" })),
601
- amount && (h("div", { class: "wrapper top-border padding" },
602
- h("div", { class: "field" }, states.content.text.rewardAmountTitle),
603
- h("div", null, amount))),
604
- h("div", { class: "wrapper top-border padding" },
605
- h("div", { class: "field" }, states.content.text.costTitle),
606
- h("div", { class: "value" }, cost)),
607
- h("div", { class: sheet.classes.Button },
608
- h("sl-button", { class: "cancel", type: "secondary", size: "large", onClick: () => callbacks.setStage("chooseAmount") }, states.content.text.backText),
609
- h("sl-button", { class: "continue", size: "large", type: "primary", loading: states.loading, onClick: callbacks.exchangeReward }, states.content.text.redeemText)))));
610
- }
611
- function success() {
612
- var _a, _b, _c, _d, _e, _f;
613
- return (h("div", { class: sheet.classes.Success, part: "success-container" },
614
- h(Gift, null),
615
- h(Confetti, null),
616
- h("div", { class: "title" }, (_a = states.content.text) === null || _a === void 0 ? void 0 : _a.rewardRedeemedText),
617
- h("div", { class: "description" }, intl.formatMessage({
618
- id: "successMessage",
619
- defaultMessage: states.content.text.redemptionSuccessText,
620
- }, {
621
- sourceValue: (_b = states.selectedItem.prettySourceValue) !== null && _b !== void 0 ? _b : (_c = states.selectedStep) === null || _c === void 0 ? void 0 : _c.prettySourceValue,
622
- destinationValue: ((_d = states.selectedStep) === null || _d === void 0 ? void 0 : _d.prettyDestinationValue) || ((_e = states.selectedItem) === null || _e === void 0 ? void 0 : _e.name) ||
623
- states.selectedItem.globalRewardKey,
624
- })),
625
- (data === null || data === void 0 ? void 0 : data.fuelTankCode) && (h("div", { class: "promo" },
626
- states.content.text.promoCode,
627
- h(CopyTextView, { copyString: data.fuelTankCode, tooltiptext: (_f = states === null || states === void 0 ? void 0 : states.content) === null || _f === void 0 ? void 0 : _f.text.tooltipText, open: states.open, onClick: callbacks.copyFuelTankCode }))),
628
- h("div", { class: sheet.classes.Button },
629
- h("sl-button", { class: "continue center", type: "primary", size: "large", onClick: () => callbacks.resetState(true) }, states.content.text.doneText))));
630
- }
631
- const stages = {
632
- chooseReward: () => chooseReward(),
633
- chooseAmount: () => chooseAmount(),
634
- confirmation: () => confirmation(),
635
- success: () => success(),
636
- };
637
- const currentStage = stages[states.redeemStage];
638
- function stageMap() {
639
- const stageNumber = stageList.indexOf(states.redeemStage);
640
- return (h("div", { class: sheet.classes.ProgressBar },
641
- h("div", { class: "text-area" }, Object.keys(stageProgressList).map((stage) => {
642
- if (stageList.indexOf(stage) <= stageNumber) {
643
- return h("span", { class: "text" }, stageProgressList[stage]);
644
- }
645
- else {
646
- return (h("span", { class: "text subdued" }, stageProgressList[stage]));
647
- }
648
- })),
649
- h(ProgressBar, { stageCount: 3, currentStage: stageNumber })));
650
- }
651
- function loading() {
652
- return (h("div", { class: sheet.classes.Grid, part: "loading-container" }, [...Array(states.content.text.skeletonCardNum)].map(() => {
653
- return (h("div", null,
654
- h("sl-card", { class: sheet.classes.Card },
655
- h("div", { class: sheet.classes.CardLayout },
656
- h("div", null,
657
- h("sl-skeleton", { style: {
658
- width: "100px",
659
- height: "100px",
660
- margin: "9px",
661
- "--border-radius": "var(--sqm-border-radius-normal)",
662
- } })),
663
- h("div", { style: {
664
- margin: "var(--sl-spacing-small) var(--sl-spacing-small) 0 0",
665
- width: "100%",
666
- } },
667
- h("sl-skeleton", { style: { marginBottom: "var(--sl-spacing-small)" } }),
668
- h("sl-skeleton", { style: { marginBottom: "var(--sl-spacing-small)" } }),
669
- h("sl-skeleton", { style: { width: "45%" } }))))));
670
- })));
671
- }
672
- function errorMessage() {
673
- return (h("sl-alert", { type: "danger", open: true },
674
- h("sl-icon", { slot: "icon", name: "exclamation-octagon" }),
675
- states.content.text.redemptionError));
676
- }
677
- function queryErrorMessage() {
678
- return (h("sl-alert", { type: "danger", open: true },
679
- h("sl-icon", { slot: "icon", name: "exclamation-octagon" }),
680
- states.content.text.queryError));
681
- }
682
- function Confetti() {
683
- return (h("canvas", { ref: (canvas) => {
684
- if (!(refs === null || refs === void 0 ? void 0 : refs.canvasRef))
685
- return;
686
- refs.canvasRef.current = canvas;
687
- }, id: "my-canvas", class: sheet.classes.Confetti }));
688
- }
689
- if (states.noExchangeOptions)
690
- return states.content.text.empty;
691
- return (h("div", { class: sheet.classes.Container, part: "sqm-base" },
692
- h("style", { type: "text/css" }, styleString),
693
- h("div", null,
694
- stageMap(),
695
- states.exchangeError && errorMessage(),
696
- states.queryError && !states.exchangeError && queryErrorMessage(),
697
- currentStage && currentStage(),
698
- states.redeemStage === "success")));
699
- }
700
-
701
- const baseResponse = (data, stage = "chooseReward", selectedItem = null, selectedStep = null, exchangeError = false, loading = false, fueltank = null, noExchangeOptions = false, queryError = false) => ({
702
- states: {
703
- content: {
704
- text: {
705
- notAvailableError: "{unavailableReasonCode, select, NOT_CHAMPION {CUSTOM ERROR MESSAGE } US_TAX {Exceeds tax limit for this year} INSUFFICIENT_REDEEMABLE_CREDIT {{sourceValue} required} AVAILABILITY_PREDICATE {Not available} other {unavailableReasonCode} }",
706
- chooseRewardTitle: "Rewards",
707
- chooseAmountTitle: "Select",
708
- confirmationTitle: "Confirm",
709
- rewardTitle: "Choose a reward",
710
- cancelText: "Cancel",
711
- backText: "Back",
712
- continueText: "Continue",
713
- continueToConfirmationText: "Continue to confirmation",
714
- redeemText: "Redeem",
715
- redeemTitle: "Confirm and redeem",
716
- redemptionSuccessText: "Redeemed {sourceValue} for {destinationValue}",
717
- doneText: "Done",
718
- tooltipText: "Copied!",
719
- selectText: "Select amount to receive",
720
- sourceAmountMessage: "{ruleType, select, FIXED_GLOBAL_REWARD {{sourceValue}} other {{sourceMinValue} to {sourceMaxValue}}}",
721
- rewardRedeemedText: "Reward redeemed",
722
- redemptionError: "An error occured trying to redeem this reward. Please try again",
723
- queryError: "Unable to load reward exchange list. Please try again",
724
- promoCode: "Promo code",
725
- skeletonCardNum: 8,
726
- rewardNameTitle: "Reward Name",
727
- rewardAmountTitle: "Reward Amount",
728
- costTitle: "Cost",
729
- notEnoughError: "Sorry not enough!",
730
- empty: (h("sqm-empty", { emptyStateImage: "https://res.cloudinary.com/saasquatch/image/upload/v1644360953/squatch-assets/empty_exchange2.png", emptyStateHeader: "Redeem rewards", emptyStateText: "Use your points to redeem rewards once they become available" })),
731
- },
732
- },
733
- queryError: queryError,
734
- redeemStage: stage,
735
- amount: 0,
736
- exchangeError: exchangeError,
737
- loading: loading,
738
- selectedItem: selectedItem,
739
- selectedStep: selectedStep,
740
- noExchangeOptions: noExchangeOptions,
741
- open: false,
742
- },
743
- data: {
744
- exchangeList: data,
745
- fuelTankCode: fueltank,
746
- },
747
- callbacks: {
748
- exchangeReward: null,
749
- resetState: null,
750
- setStage: null,
751
- setExchangeState: null,
752
- copyFuelTankCode: null,
753
- },
754
- refs: null,
755
- });
756
- const baseReward = {
757
- key: "reward",
758
- name: "Demo Reward",
759
- description: "Description of reward. Lorem ipsum dolor sit amet, consectetur adipiscing. Id nec semper sapien dignissim rhoncus nunc.",
760
- imageUrl: "https://res.cloudinary.com/saasquatch/image/upload/v1643653103/squatch-assets/default_rewards_1.png",
761
- available: true,
762
- unavailableReasonCode: null,
763
- ruleType: "FIXED_GLOBAL_REWARD",
764
- sourceUnit: "POINT",
765
- sourceValue: 10,
766
- prettySourceValue: "10 SaaSquatch Points",
767
- sourceMinValue: null,
768
- prettySourceMinValue: null,
769
- sourceMaxValue: null,
770
- prettySourceMaxValue: null,
771
- destinationMinValue: null,
772
- prettyDestinationMinValue: null,
773
- destinationMaxValue: null,
774
- prettyDestinationMaxValue: null,
775
- globalRewardKey: "",
776
- destinationUnit: null,
777
- steps: [
778
- {
779
- prettyDestinationValue: "Reward Step 1",
780
- prettySourceValue: "50 Points",
781
- available: true,
782
- unavailableReasonCode: null,
783
- destinationValue: 10,
784
- sourceValue: 1,
785
- globalRewardKey: "reward1",
786
- rewardInput: {
787
- accountId: "zach",
788
- userId: "zach",
789
- },
790
- },
791
- {
792
- prettyDestinationValue: "Reward Step 2",
793
- prettySourceValue: "100 Points",
794
- available: false,
795
- unavailableReasonCode: "Not enough points",
796
- destinationValue: 10,
797
- sourceValue: 1,
798
- globalRewardKey: "reward1",
799
- rewardInput: {
800
- accountId: "zach",
801
- userId: "zach",
802
- },
803
- },
804
- ],
805
- };
806
- const notEnoughPoints = {
807
- available: false,
808
- unavailableReasonCode: "INSUFFICIENT_REDEEMABLE_CREDIT",
809
- };
810
- const usTax = {
811
- available: false,
812
- unavailableReasonCode: "US_TAX",
813
- };
814
- const customError = {
815
- available: false,
816
- unavailableReasonCode: "NOT_CHAMPION",
817
- };
818
- const selected = {
819
- key: "r1",
820
- };
821
- const imageUrl = (props) => ({
822
- imageUrl: props,
823
- });
824
- const name = (props) => ({
825
- name: props,
826
- });
827
- const description = (props) => ({
828
- description: props,
829
- });
830
- const fixedValue = (props) => ({
831
- prettySourceValue: props,
832
- });
833
- const variableValue = (min, max, unit) => ({
834
- ruleType: "VARIABLE_CREDIT_REWARD",
835
- sourceMinValue: min,
836
- prettySourceMinValue: min + " " + unit,
837
- sourceMaxValue: max,
838
- prettySourceMaxValue: max + " " + unit,
839
- });
840
- const demoData = [
841
- {
842
- ...baseReward,
843
- ...name("Free swag with a promo code"),
844
- ...imageUrl("https://res.cloudinary.com/saasquatch/image/upload/v1643653103/squatch-assets/default_rewards_1.png"),
845
- ...fixedValue("40 Points"),
846
- },
847
- {
848
- ...baseReward,
849
- ...selected,
850
- ...name("Visa® Prepaid Card USD"),
851
- ...imageUrl("https://res.cloudinary.com/saasquatch/image/upload/v1644000268/squatch-assets/veHErQX.png"),
852
- ...variableValue(20, 80, "Points"),
853
- },
854
- {
855
- ...baseReward,
856
- ...name("$50 Store credit"),
857
- ...imageUrl("https://res.cloudinary.com/saasquatch/image/upload/v1644000270/squatch-assets/WkCMVSE.png"),
858
- ...fixedValue("100 Points"),
859
- },
860
- {
861
- ...baseReward,
862
- ...name("Variable amount of store credit"),
863
- ...imageUrl("https://res.cloudinary.com/saasquatch/image/upload/v1644000240/squatch-assets/Jn2fE0s.png"),
864
- ...variableValue(20, 100, "Points"),
865
- },
866
- ];
867
- const data = [
868
- {
869
- ...baseReward,
870
- ...name("Free swag with a promo code"),
871
- ...imageUrl("https://res.cloudinary.com/saasquatch/image/upload/v1643653103/squatch-assets/default_rewards_1.png"),
872
- ...fixedValue("40 SaaSquatch Points"),
873
- },
874
- {
875
- ...baseReward,
876
- ...selected,
877
- ...name("Visa® Prepaid Card USD"),
878
- ...imageUrl("https://res.cloudinary.com/saasquatch/image/upload/v1644000268/squatch-assets/veHErQX.png"),
879
- ...variableValue(20, 80, "Points"),
880
- },
881
- {
882
- ...baseReward,
883
- ...name("A very exclusive gift box"),
884
- ...imageUrl("https://res.cloudinary.com/saasquatch/image/upload/v1644000223/squatch-assets/93BvEgH.png"),
885
- ...fixedValue("30 SaaSquatch Points"),
886
- },
887
- {
888
- ...baseReward,
889
- ...name("$50 Store credit"),
890
- ...imageUrl("https://res.cloudinary.com/saasquatch/image/upload/v1644000270/squatch-assets/WkCMVSE.png"),
891
- ...fixedValue("100 SaaSquatch Points"),
892
- },
893
- {
894
- ...baseReward,
895
- ...name("Variable amount of store credit"),
896
- ...imageUrl("https://res.cloudinary.com/saasquatch/image/upload/v1644000240/squatch-assets/Jn2fE0s.png"),
897
- ...variableValue(20, 100, "Points"),
898
- },
899
- {
900
- ...baseReward,
901
- ...notEnoughPoints,
902
- ...name("A very rare cactus"),
903
- ...imageUrl("https://res.cloudinary.com/saasquatch/image/upload/v1644000224/squatch-assets/hhlF2Ey.png"),
904
- ...fixedValue("2000 SaaSquatch Points"),
905
- },
906
- {
907
- ...baseReward,
908
- ...usTax,
909
- ...name("$1000 Store credit with a really super long name in the front page"),
910
- ...imageUrl("https://res.cloudinary.com/saasquatch/image/upload/v1644000273/squatch-assets/y9HSls1.png"),
911
- ...fixedValue("2000 SaaSquatch Long Points"),
912
- },
913
- {
914
- ...baseReward,
915
- ...notEnoughPoints,
916
- ...name("A holiday gift box"),
917
- ...imageUrl("https://res.cloudinary.com/saasquatch/image/upload/v1644000223/squatch-assets/dWEdB3p.png"),
918
- ...fixedValue("100 SaaSquatch Points"),
919
- },
920
- ];
921
- const rewardExchange = {
922
- ...baseResponse(data),
923
- };
924
- const demoRewardExchange = {
925
- ...baseResponse(demoData),
926
- };
927
- const rewardExchangeLongText = {
928
- ...baseResponse([
929
- {
930
- ...baseReward,
931
- ...notEnoughPoints,
932
- ...name("Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt ratione a itaque non obcaecati iste, amet repudiandae at consequatur adipisci culpa nam, incidunt exercitationem aliquid."),
933
- ...imageUrl("https://res.cloudinary.com/saasquatch/image/upload/v1644000223/squatch-assets/dWEdB3p.png"),
934
- ...fixedValue("Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt ratione a itaque non obcaecati iste, amet repudiandae at consequatur adipisci culpa nam, incidunt exercitationem aliquid."),
935
- },
936
- {
937
- ...baseReward,
938
- ...name("Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt ratione a itaque non obcaecati iste, amet repudiandae at consequatur adipisci culpa nam, incidunt exercitationem aliquid."),
939
- ...imageUrl("https://res.cloudinary.com/saasquatch/image/upload/v1644000273/squatch-assets/y9HSls1.png"),
940
- ...fixedValue("Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt ratione a itaque non obcaecati iste, amet repudiandae at consequatur adipisci culpa nam, incidunt exercitationem aliquid."),
941
- },
942
- {
943
- ...baseReward,
944
- ...name("Suuuuuuuuper aweeeeesssssoooommme reward!!!!!!"),
945
- ...imageUrl("https://res.cloudinary.com/saasquatch/image/upload/v1644000270/squatch-assets/WkCMVSE.png"),
946
- ...fixedValue("Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt ratione a itaque non obcaecati iste, amet repudiandae at consequatur adipisci culpa nam, incidunt exercitationem aliquid."),
947
- },
948
- ...data,
949
- ]),
950
- };
951
- const rewardExchangeCustomErrorMsg = {
952
- ...baseResponse([
953
- {
954
- ...baseReward,
955
- ...customError,
956
- ...name("A very rare cactus"),
957
- ...imageUrl("https://res.cloudinary.com/saasquatch/image/upload/v1644000224/squatch-assets/hhlF2Ey.png"),
958
- ...fixedValue("2000 SaaSquatch Points"),
959
- },
960
- ...data,
961
- ]),
962
- };
963
- const rewardExchangeSelected = {
964
- ...baseResponse(data, "chooseReward", {
965
- ...baseReward,
966
- ...selected,
967
- ...name("Visa® Prepaid Card USD"),
968
- ...imageUrl("https://res.cloudinary.com/saasquatch/image/upload/v1644000268/squatch-assets/veHErQX.png"),
969
- ...variableValue(20, 80, "Points"),
970
- }),
971
- };
972
- const stepsData = (start, end, inc) => {
973
- const steps = [];
974
- for (let i = start; i <= end; i += inc) {
975
- steps.push({
976
- sourceValue: i,
977
- prettySourceValue: i + " SaaSquatch Points",
978
- destinationValue: i,
979
- prettyDestinationValue: "$" + i,
980
- available: true,
981
- unavailableReasonCode: null,
982
- });
983
- }
984
- return steps;
985
- };
986
- const baseStep = (dst, dstUnit, src, srcUnit, available = true, unavailableReason = null) => ({
987
- destinationValue: dst,
988
- prettyDestinationValue: dstUnit + dst,
989
- sourceValue: src,
990
- prettySourceValue: src + " " + srcUnit,
991
- available: available,
992
- unavailableReasonCode: unavailableReason,
993
- });
994
- const chooseAmountVariable = {
995
- ...baseResponse(data, "chooseAmount", {
996
- ...baseReward,
997
- ...name("Visa® Prepaid Card USD"),
998
- ...imageUrl("https://res.cloudinary.com/saasquatch/image/upload/v1644000268/squatch-assets/veHErQX.png"),
999
- ...variableValue(20, 80, "Points"),
1000
- steps: [
1001
- baseStep(20, "$", 40, "Points"),
1002
- baseStep(30, "$", 60, "Points"),
1003
- baseStep(40, "$", 80, "Points"),
1004
- baseStep(50, "$", 100, "Points"),
1005
- baseStep(60, "$", 120, "Points"),
1006
- ],
1007
- }),
1008
- };
1009
- const chooseAmountVariableNoDescription = {
1010
- ...baseResponse(data, "chooseAmount", {
1011
- ...baseReward,
1012
- ...name("Visa® Prepaid Card USD"),
1013
- ...description(""),
1014
- ...imageUrl("https://i.imgur.com/veHErQX.png"),
1015
- ...variableValue(20, 80, "Points"),
1016
- steps: [
1017
- baseStep(20, "$", 40, "Points"),
1018
- baseStep(30, "$", 60, "Points"),
1019
- baseStep(40, "$", 80, "Points"),
1020
- baseStep(50, "$", 100, "Points"),
1021
- baseStep(60, "$", 120, "Points"),
1022
- ],
1023
- }),
1024
- };
1025
- const chooseAmountVariableDisabled = {
1026
- ...baseResponse(data, "chooseAmount", {
1027
- ...baseReward,
1028
- ...name("Visa® Prepaid Card USD"),
1029
- ...imageUrl("https://res.cloudinary.com/saasquatch/image/upload/v1644000268/squatch-assets/veHErQX.png"),
1030
- ...variableValue(20, 80, "Points"),
1031
- steps: [
1032
- baseStep(20, "$", 40, "Points"),
1033
- baseStep(30, "$", 60, "Points"),
1034
- baseStep(40, "$", 80, "Points", false, "INSUFFICIENT_REDEEMABLE_CREDIT"),
1035
- baseStep(50, "$", 100, "Points", false, "INSUFFICIENT_REDEEMABLE_CREDIT"),
1036
- baseStep(60, "$", 120, "Points", false, "INSUFFICIENT_REDEEMABLE_CREDIT"),
1037
- ],
1038
- }),
1039
- };
1040
- const chooseAmountVariableUnavailable = {
1041
- ...baseResponse(data, "chooseAmount", {
1042
- ...baseReward,
1043
- ...name("Visa® Prepaid Card USD"),
1044
- ...imageUrl("https://res.cloudinary.com/saasquatch/image/upload/v1644000268/squatch-assets/veHErQX.png"),
1045
- ...variableValue(20, 80, "Points"),
1046
- steps: [
1047
- baseStep(20, "$", 40, "Points"),
1048
- baseStep(30, "$", 60, "Points"),
1049
- baseStep(40, "$", 80, "Points", false, "US_TAX"),
1050
- baseStep(50, "$", 100, "Points", false, "US_TAX"),
1051
- baseStep(60, "$", 120, "Points", false, "US_TAX"),
1052
- ],
1053
- }),
1054
- };
1055
- const chooseAmountFixed = {
1056
- ...baseResponse(data, "chooseAmount", {
1057
- ...baseReward,
1058
- ...name("Free swag with a promo code"),
1059
- ...imageUrl("https://res.cloudinary.com/saasquatch/image/upload/v1644000252/squatch-assets/n7vC4BR.png"),
1060
- ...fixedValue("40 SaaSquatch Points"),
1061
- }),
1062
- };
1063
- const chooseAmountFixedNoDescription = {
1064
- ...baseResponse(data, "chooseAmount", {
1065
- ...baseReward,
1066
- ...description(""),
1067
- ...name("Free swag with a promo code"),
1068
- ...imageUrl("https://i.imgur.com/n7vC4BR.png"),
1069
- ...fixedValue("40 SaaSquatch Points"),
1070
- }),
1071
- };
1072
- const confirmFixed = {
1073
- ...baseResponse(data, "confirmation", {
1074
- ...baseReward,
1075
- ...name("Free swag with a promo code"),
1076
- ...imageUrl("https://res.cloudinary.com/saasquatch/image/upload/v1644000252/squatch-assets/n7vC4BR.png"),
1077
- ...fixedValue("40 SaaSquatch Points"),
1078
- }),
1079
- };
1080
- const confirmVariable = {
1081
- ...baseResponse(data, "confirmation", {
1082
- ...baseReward,
1083
- ...name("Visa® Prepaid Card USD"),
1084
- ...imageUrl("https://res.cloudinary.com/saasquatch/image/upload/v1644000268/squatch-assets/veHErQX.png"),
1085
- ...variableValue(20, 80, "Points"),
1086
- }, baseStep(20, "$", 40, "Points")),
1087
- };
1088
- const redemptionError = {
1089
- ...baseResponse(data, "confirmation", {
1090
- ...baseReward,
1091
- ...name("Visa® Prepaid Card USD"),
1092
- ...imageUrl("https://res.cloudinary.com/saasquatch/image/upload/v1644000268/squatch-assets/veHErQX.png"),
1093
- ...variableValue(20, 80, "Points"),
1094
- }, baseStep(20, "$", 40, "Points"), true),
1095
- };
1096
- const queryError = {
1097
- ...baseResponse(undefined, "chooseReward", undefined, undefined, undefined, undefined, undefined, undefined, true),
1098
- };
1099
- const success = {
1100
- ...baseResponse(data, "success", {
1101
- ...baseReward,
1102
- ...name("Free swag with a promo code"),
1103
- ...imageUrl("https://res.cloudinary.com/saasquatch/image/upload/v1644000252/squatch-assets/n7vC4BR.png"),
1104
- ...fixedValue("40 SaaSquatch Points"),
1105
- }, undefined, undefined, undefined, "4ah2-hh46-gk7r"),
1106
- };
1107
- const successVariable = {
1108
- ...baseResponse(data, "success", {
1109
- ...baseReward,
1110
- ...name("Visa® Prepaid Card USD"),
1111
- ...imageUrl("https://res.cloudinary.com/saasquatch/image/upload/v1644000223/squatch-assets/93BvEgH.png"),
1112
- ...variableValue(20, 80, "Points"),
1113
- }, baseStep(20, "$", 40, "Points")),
1114
- };
1115
- const loading = {
1116
- ...baseResponse(null, "chooseReward", null, null, false, true),
1117
- };
1118
- const empty = {
1119
- ...baseResponse(null, "chooseReward", null, null, false, false, null, true),
1120
- };
1121
-
1122
- export { ProgressBar as P, RewardExchangeView as R, rewardExchangeCustomErrorMsg as a, rewardExchangeLongText as b, rewardExchangeSelected as c, chooseAmountFixed as d, chooseAmountFixedNoDescription as e, chooseAmountVariable as f, chooseAmountVariableNoDescription as g, chooseAmountVariableDisabled as h, chooseAmountVariableUnavailable as i, confirmFixed as j, confirmVariable as k, redemptionError as l, successVariable as m, loading as n, empty as o, demoRewardExchange as p, queryError as q, rewardExchange as r, success as s };