@saasquatch/mint-components 1.3.2-2 → 1.3.2-3
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/cjs/sqm-divided-layout_27.cjs.entry.js +70 -61
- package/dist/collection/components/sqm-reward-exchange-list/progressBar.js +21 -36
- package/dist/collection/components/sqm-reward-exchange-list/sqm-reward-exchange-list-view.js +32 -23
- package/dist/collection/components/sqm-reward-exchange-list/useRewardExchangeList.js +1 -0
- package/dist/esm/sqm-divided-layout_27.entry.js +70 -61
- package/dist/esm-es5/sqm-divided-layout_27.entry.js +1 -1
- package/dist/mint-components/mint-components.esm.js +1 -1
- package/dist/mint-components/mint-components.js +1 -1
- package/dist/mint-components/{p-bca8867d.entry.js → p-4cc79fb9.entry.js} +10 -9
- package/dist/mint-components/p-8c605e30.system.entry.js +1 -0
- package/dist/mint-components/p-91d39961.system.js +1 -1
- package/dist/types/components/sqm-reward-exchange-list/progressBar.d.ts +3 -2
- package/package.json +1 -1
- package/dist/mint-components/p-0ba3c956.system.entry.js +0 -1
|
@@ -14771,6 +14771,7 @@ const GET_EXCHANGE_LIST = index_module.dist.gql `
|
|
|
14771
14771
|
destinationValue
|
|
14772
14772
|
prettyDestinationValue
|
|
14773
14773
|
available
|
|
14774
|
+
unavailableReasonCode
|
|
14774
14775
|
}
|
|
14775
14776
|
}
|
|
14776
14777
|
totalCount
|
|
@@ -14963,51 +14964,50 @@ function Dot({ active, completed, incomplete, }) {
|
|
|
14963
14964
|
boxSizing: "content-box",
|
|
14964
14965
|
} })));
|
|
14965
14966
|
}
|
|
14967
|
+
function ProgressLine({ incomplete = false, active = false }) {
|
|
14968
|
+
return (index.h("div", { style: {
|
|
14969
|
+
content: "''",
|
|
14970
|
+
flex: "0.5 0.5 0",
|
|
14971
|
+
height: "4px",
|
|
14972
|
+
borderRadius: "4px",
|
|
14973
|
+
background: incomplete || active ? "#E5E5E5" : "#9E9E9E",
|
|
14974
|
+
position: "relative",
|
|
14975
|
+
bottom: "0",
|
|
14976
|
+
left: "0",
|
|
14977
|
+
display: "flex",
|
|
14978
|
+
justifyContent: "center",
|
|
14979
|
+
columnGap: "50px",
|
|
14980
|
+
marginRight: "-2px",
|
|
14981
|
+
boxSizing: "content-box",
|
|
14982
|
+
} }));
|
|
14983
|
+
}
|
|
14966
14984
|
function Progress({ active, completed, incomplete }) {
|
|
14967
14985
|
return [
|
|
14968
|
-
index.h(
|
|
14969
|
-
content: "''",
|
|
14970
|
-
flex: "0.5 0.5 0",
|
|
14971
|
-
height: "4px",
|
|
14972
|
-
borderRadius: "4px",
|
|
14973
|
-
background: incomplete ? "#E5E5E5" : "#9E9E9E",
|
|
14974
|
-
position: "relative",
|
|
14975
|
-
bottom: "0",
|
|
14976
|
-
left: "0",
|
|
14977
|
-
display: "flex",
|
|
14978
|
-
justifyContent: "center",
|
|
14979
|
-
columnGap: "50px",
|
|
14980
|
-
marginRight: "-2px",
|
|
14981
|
-
boxSizing: "content-box",
|
|
14982
|
-
} }),
|
|
14986
|
+
index.h(ProgressLine, { incomplete: incomplete }),
|
|
14983
14987
|
index.h(Dot, { active: active, completed: completed, incomplete: incomplete }),
|
|
14984
|
-
index.h(
|
|
14985
|
-
content: "''",
|
|
14986
|
-
flex: "0.5 0.5 0",
|
|
14987
|
-
height: "4px",
|
|
14988
|
-
borderRadius: "4px",
|
|
14989
|
-
background: incomplete || active ? "#E5E5E5" : "#9E9E9E",
|
|
14990
|
-
position: "relative",
|
|
14991
|
-
bottom: "0",
|
|
14992
|
-
left: "0",
|
|
14993
|
-
display: "flex",
|
|
14994
|
-
justifyContent: "center",
|
|
14995
|
-
columnGap: "50px",
|
|
14996
|
-
marginRight: "-2px",
|
|
14997
|
-
boxSizing: "content-box",
|
|
14998
|
-
} }),
|
|
14988
|
+
index.h(ProgressLine, { incomplete: incomplete, active: active }),
|
|
14999
14989
|
];
|
|
15000
14990
|
}
|
|
15001
|
-
function ProgressBar({
|
|
15002
|
-
|
|
15003
|
-
return (index.h("div", { style: { display: "flex", columnGap: "-2px" } },
|
|
15004
|
-
index.h(Progress, { active: stage === 0, completed: stage > 0, incomplete: stage < 0 }),
|
|
15005
|
-
index.h(Progress, { active: stage === 1, completed: stage > 1, incomplete: stage < 1 }),
|
|
15006
|
-
index.h(Progress, { active: stage === 2, completed: stage > 2, incomplete: stage < 2 })));
|
|
14991
|
+
function ProgressBar({ stageCount, currentStage, }) {
|
|
14992
|
+
return (index.h("div", { style: { display: "flex", columnGap: "-2px" } }, Array.from(Array(stageCount).keys()).map((stage) => (index.h(Progress, { active: currentStage === stage, completed: currentStage > stage, incomplete: currentStage < stage })))));
|
|
15007
14993
|
}
|
|
15008
14994
|
|
|
15009
14995
|
const LeftArrow = () => (index.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" } },
|
|
15010
|
-
index.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" })));
|
|
14996
|
+
index.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" })));
|
|
14997
|
+
const ExchangeArrows = () => (index.h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "42", height: "42", viewBox: "0 0 42 42", fill: "none" },
|
|
14998
|
+
index.h("g", { filter: "url(#filter0_d_428_4515)" },
|
|
14999
|
+
index.h("circle", { cx: "21", cy: "21", r: "15", fill: "white" })),
|
|
15000
|
+
index.h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M16.6255 27.783C16.5129 27.8963 16.3597 27.96 16.2 27.96C16.0402 27.96 15.887 27.8963 15.7744 27.783L11.8744 23.8597C11.6408 23.6247 11.6419 23.2448 11.877 23.0112C12.112 22.7775 12.4919 22.7787 12.7255 23.0137L15.6 25.9054V14.52C15.6 14.1886 15.8686 13.92 16.2 13.92C16.5313 13.92 16.8 14.1886 16.8 14.52V25.9054L19.6744 23.0137C19.908 22.7787 20.2879 22.7775 20.5229 23.0112C20.758 23.2448 20.7591 23.6247 20.5255 23.8597L16.6255 27.783ZM26.2255 14.0971C26.1129 13.9838 25.9597 13.9201 25.8 13.9201C25.6402 13.9201 25.487 13.9838 25.3744 14.0971L21.4744 18.0204C21.2408 18.2554 21.2419 18.6353 21.477 18.8689C21.712 19.1025 22.0919 19.1014 22.3255 18.8664L25.2 15.9747V27.3601C25.2 27.6914 25.4686 27.9601 25.8 27.9601C26.1313 27.9601 26.4 27.6914 26.4 27.3601V15.9747L29.2744 18.8664C29.508 19.1014 29.8879 19.1025 30.1229 18.8689C30.358 18.6353 30.3591 18.2554 30.1255 18.0204L26.2255 14.0971Z", fill: "#333333" }),
|
|
15001
|
+
index.h("defs", null,
|
|
15002
|
+
index.h("filter", { id: "filter0_d_428_4515", x: "0", y: "0", width: "42", height: "42", filterUnits: "userSpaceOnUse", "color-interpolation-filters": "sRGB" },
|
|
15003
|
+
index.h("feFlood", { "flood-opacity": "0", result: "BackgroundImageFix" }),
|
|
15004
|
+
index.h("feColorMatrix", { in: "SourceAlpha", type: "matrix", values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0", result: "hardAlpha" }),
|
|
15005
|
+
index.h("feOffset", null),
|
|
15006
|
+
index.h("feGaussianBlur", { stdDeviation: "3" }),
|
|
15007
|
+
index.h("feComposite", { in2: "hardAlpha", operator: "out" }),
|
|
15008
|
+
index.h("feColorMatrix", { type: "matrix", values: "0 0 0 0 0.670833 0 0 0 0 0.670833 0 0 0 0 0.670833 0 0 0 0.2 0" }),
|
|
15009
|
+
index.h("feBlend", { mode: "normal", in2: "BackgroundImageFix", result: "effect1_dropShadow_428_4515" }),
|
|
15010
|
+
index.h("feBlend", { mode: "normal", in: "SourceGraphic", in2: "effect1_dropShadow_428_4515", result: "shape" })))));
|
|
15011
15011
|
|
|
15012
15012
|
const stageList = ["chooseReward", "chooseAmount", "confirmation", "success"];
|
|
15013
15013
|
const stageProgressList = {
|
|
@@ -15110,7 +15110,8 @@ function RewardExchangeView(props) {
|
|
|
15110
15110
|
});
|
|
15111
15111
|
} }, (_b = item.steps) === null || _b === void 0 ? void 0 : _b.map((step) => (index.h("sl-menu-item", { value: step, disabled: !step.available },
|
|
15112
15112
|
step.prettyDestinationValue,
|
|
15113
|
-
index.h("
|
|
15113
|
+
index.h("div", { slot: "suffix", style: { fontSize: "75%", float: "right" } }, step.prettySourceValue),
|
|
15114
|
+
step.unavailableReasonCode && (index.h("p", { style: { fontSize: "70%", color: "#F2994A" } }, step.unavailableReasonCode)))))));
|
|
15114
15115
|
}
|
|
15115
15116
|
function chooseReward() {
|
|
15116
15117
|
var _a;
|
|
@@ -15131,12 +15132,24 @@ function RewardExchangeView(props) {
|
|
|
15131
15132
|
boxShadow: item.key === (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.key) ? "0 1px 8px #87ceeb" : "none",
|
|
15132
15133
|
marginBottom: "10px 0",
|
|
15133
15134
|
flex: "1",
|
|
15134
|
-
minWidth: "
|
|
15135
|
+
minWidth: "100%",
|
|
15136
|
+
color: !item.available && "#eee",
|
|
15137
|
+
"&:hover": {
|
|
15138
|
+
boxShadow: !item.available && "none",
|
|
15139
|
+
},
|
|
15135
15140
|
};
|
|
15136
|
-
return (index.h("div", { key: item.key, class: sheet.classes.CardContainer,
|
|
15137
|
-
|
|
15141
|
+
return (index.h("div", { key: item.key, class: sheet.classes.CardContainer,
|
|
15142
|
+
//@ts-ignore
|
|
15143
|
+
style: style },
|
|
15144
|
+
index.h("sl-card", { class: sheet.classes.Base, onClick: () => item.available &&
|
|
15145
|
+
callbacks.setExchangeState({ selectedItem: item }) },
|
|
15138
15146
|
index.h("img", { class: sheet.classes.PreviewImage, src: (item === null || item === void 0 ? void 0 : item.imageUrl) || index.getAssetPath("./assets/Reward-icon.png") }),
|
|
15139
|
-
index.h("p",
|
|
15147
|
+
index.h("p", { style: { marginBottom: "0" } }, item.description),
|
|
15148
|
+
item.unavailableReasonCode && (index.h("p", { style: {
|
|
15149
|
+
fontSize: "70%",
|
|
15150
|
+
color: "#F2994A",
|
|
15151
|
+
marginTop: "0",
|
|
15152
|
+
} }, item.unavailableReasonCode)))));
|
|
15140
15153
|
}),
|
|
15141
15154
|
index.h("div", { class: sheet.classes.Buttons },
|
|
15142
15155
|
index.h("sl-button", { onClick: () => callbacks.setStage(nextStage), style: { display: "block" }, class: sheet.classes.Button, disabled: !states.selectedItem }, "Continue"),
|
|
@@ -15154,24 +15167,20 @@ function RewardExchangeView(props) {
|
|
|
15154
15167
|
}
|
|
15155
15168
|
console.log({ selectedItem, selectedStep });
|
|
15156
15169
|
function confirmation() {
|
|
15157
|
-
console.log("confirmation:", { selectedItem });
|
|
15158
|
-
const redemptionAmount = () => {
|
|
15159
|
-
var _a;
|
|
15160
|
-
if ((selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.ruleType) === "FIXED_GLOBAL_REWARD") {
|
|
15161
|
-
return `Redeem ${selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.sourceValue} ${selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.sourceUnit} for ${selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.globalRewardKey}`;
|
|
15162
|
-
}
|
|
15163
|
-
else {
|
|
15164
|
-
const amount = states.amount;
|
|
15165
|
-
const reward = (_a = selectedStep === null || selectedStep === void 0 ? void 0 : selectedStep.prettyDestinationValue) !== null && _a !== void 0 ? _a : `${amount} ${selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.destinationUnit}`;
|
|
15166
|
-
return `Redeem ${amount} ${selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.sourceUnit} for ${reward}`;
|
|
15167
|
-
}
|
|
15168
|
-
};
|
|
15169
15170
|
const previousStage = (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.ruleType) === "FIXED_GLOBAL_REWARD"
|
|
15170
15171
|
? "chooseReward"
|
|
15171
15172
|
: "chooseAmount";
|
|
15172
15173
|
return (index.h("div", null,
|
|
15173
|
-
index.h("h2", null, "Confirm
|
|
15174
|
-
|
|
15174
|
+
index.h("h2", null, "Confirm and redeem"),
|
|
15175
|
+
index.h("div", { style: { textAlign: "center" } },
|
|
15176
|
+
index.h("p", null,
|
|
15177
|
+
index.h("b", null, selectedStep === null || selectedStep === void 0 ? void 0 : selectedStep.sourceValue)),
|
|
15178
|
+
index.h("p", null,
|
|
15179
|
+
index.h("b", null, selectedStep === null || selectedStep === void 0 ? void 0 : selectedStep.prettySourceValue)),
|
|
15180
|
+
index.h("p", null,
|
|
15181
|
+
index.h(ExchangeArrows, null)),
|
|
15182
|
+
index.h("p", null, selectedStep === null || selectedStep === void 0 ? void 0 : selectedStep.destinationValue),
|
|
15183
|
+
index.h("p", null, selectedStep === null || selectedStep === void 0 ? void 0 : selectedStep.prettyDestinationValue)),
|
|
15175
15184
|
index.h("div", { class: sheet.classes.Buttons },
|
|
15176
15185
|
index.h("sl-button", { onClick: callbacks.exchangeReward, style: { display: "block" }, class: sheet.classes.Button }, "Redeem"),
|
|
15177
15186
|
index.h("a", { onClick: () => callbacks.setStage(previousStage), style: { display: "block" }, class: sheet.classes.Button }, "Back"))));
|
|
@@ -15193,7 +15202,7 @@ function RewardExchangeView(props) {
|
|
|
15193
15202
|
function stageMap() {
|
|
15194
15203
|
const stageNumber = stageList.indexOf(states.redeemStage);
|
|
15195
15204
|
return (index.h("div", { style: { fontSize: "80%" } },
|
|
15196
|
-
index.h(ProgressBar, {
|
|
15205
|
+
index.h(ProgressBar, { stageCount: 3, currentStage: stageNumber }),
|
|
15197
15206
|
index.h("div", { style: {
|
|
15198
15207
|
marginTop: "5px",
|
|
15199
15208
|
display: "flex",
|
|
@@ -15209,7 +15218,7 @@ function RewardExchangeView(props) {
|
|
|
15209
15218
|
return index.h("i", { style: { flex: "1 1 0" } }, stageProgressList[stage]);
|
|
15210
15219
|
}))));
|
|
15211
15220
|
}
|
|
15212
|
-
const
|
|
15221
|
+
const BackButton = () => {
|
|
15213
15222
|
if (states.redeemStage === "success")
|
|
15214
15223
|
return "";
|
|
15215
15224
|
let previousStage = "";
|
|
@@ -15231,7 +15240,7 @@ function RewardExchangeView(props) {
|
|
|
15231
15240
|
index.h("style", { type: "text/css" }, styleString),
|
|
15232
15241
|
index.h("div", null,
|
|
15233
15242
|
index.h("sl-drawer", { ref: (ref) => (refs.drawerRef.current = ref), placement: "right", class: sheet.classes.Drawer, open: stageList.indexOf(states.redeemStage) >= 0 },
|
|
15234
|
-
index.h(
|
|
15243
|
+
index.h(BackButton, null),
|
|
15235
15244
|
stageMap(),
|
|
15236
15245
|
currentStage && currentStage(),
|
|
15237
15246
|
states.exchangeError &&
|
|
@@ -24053,7 +24062,7 @@ const ReferralIframeReadme = "# sqm-referral-iframe\r\n\r\n\r\n\r\n<!-- Auto Gen
|
|
|
24053
24062
|
|
|
24054
24063
|
const ForgotPasswordReadme = "# sqm-portal-forgot-password\r\n\r\n\r\n\r\n<!-- Auto Generated Below -->\r\n\r\n\r\n## Properties\r\n\r\n| Property | Attribute | Description | Type | Default |\r\n| ------------- | -------------- | ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------- |\r\n| `demoData` | -- | | `{ states?: { error: string; loading: boolean; success: boolean; }; content?: { secondaryButton: any; messageSlot: any; emailLabel?: string; submitLabel?: string; }; }` | `undefined` |\r\n| `emailLabel` | `email-label` | | `string` | `\"Email\"` |\r\n| `submitLabel` | `submit-label` | | `string` | `\"Request Password Reset\"` |\r\n\r\n\r\n## Dependencies\r\n\r\n### Depends on\r\n\r\n- [sqm-form-message](../sqm-form-message)\r\n\r\n### Graph\r\n```mermaid\r\ngraph TD;\r\n sqm-portal-forgot-password --> sqm-form-message\r\n style sqm-portal-forgot-password fill:#f9f,stroke:#333,stroke-width:4px\r\n```\r\n\r\n----------------------------------------------\r\n\r\n*Built with [StencilJS](https://stenciljs.com/)*\r\n";
|
|
24055
24064
|
|
|
24056
|
-
const RegisterReadme = "# sqm-portal-register\r\n\r\n\r\n\r\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| -------------------------- | ---------------------------- | ----------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------- |\n| `confirmPassword` | `confirm-password` | | `boolean` | `false` |\n| `confirmPasswordLabel` | `confirm-password-label` | | `string` | `\"Confirm Password\"` |\n| `demoData` | -- | | `{ states?: { error: string; loading: boolean; confirmPassword: boolean; hideInputs: boolean; validationState?: FormState; enablePasswordValidation?: boolean; }; refs?: { formRef: any; }; content?: { formData?: any; passwordField?: any; secondaryButton?: any; emailLabel?: string; passwordLabel?: string; submitLabel?: string; pageLabel?: string; confirmPasswordLabel: string; }; }` | `undefined` |\n| `emailLabel` | `email-label` | | `string` | `\"Email\"` |\n| `enablePasswordValidation` | `enable-password-validation` | | `boolean` | `true` |\n| `hideInputs` | `hide-inputs` | | `boolean` | `false` |\n| `loginLabel` | `login-label` | | `string` | `\"Sign in\"` |\n| `nextPage` | `next-page` | | `string` | `\"/\"` |\n| `pageLabel` | `page-label` | | `string` | `\"Register\"` |\n| `passwordLabel` | `password-label` | | `string` | `\"Password\"` |\n| `submitLabel` | `submit-label` | | `string` | `\"Register\"` |\n\n\n## Dependencies\n\n### Used by\n\n - [sqm-stencilbook](../sqm-stencilbook)\n\n### Depends on\n\n- [sqm-form-message](../sqm-form-message)\n- [sqm-password-field](../sqm-password-field)\n\n### Graph\n```mermaid\ngraph TD;\n sqm-portal-register --> sqm-form-message\n sqm-portal-register --> sqm-password-field\n sqm-stencilbook --> sqm-portal-register\n style sqm-portal-register fill:#f9f,stroke:#333,stroke-width:4px\n```\n\n----------------------------------------------\n\n*Built with [StencilJS](https://stenciljs.com/)*\n";
|
|
24065
|
+
const RegisterReadme = "# sqm-portal-register\r\n\r\n\r\n\r\n<!-- Auto Generated Below -->\r\n\r\n\r\n## Properties\r\n\r\n| Property | Attribute | Description | Type | Default |\r\n| -------------------------- | ---------------------------- | ----------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------- |\r\n| `confirmPassword` | `confirm-password` | | `boolean` | `false` |\r\n| `confirmPasswordLabel` | `confirm-password-label` | | `string` | `\"Confirm Password\"` |\r\n| `demoData` | -- | | `{ states?: { error: string; loading: boolean; confirmPassword: boolean; hideInputs: boolean; validationState?: FormState; enablePasswordValidation?: boolean; }; refs?: { formRef: any; }; content?: { formData?: any; passwordField?: any; secondaryButton?: any; emailLabel?: string; passwordLabel?: string; submitLabel?: string; pageLabel?: string; confirmPasswordLabel: string; }; }` | `undefined` |\r\n| `emailLabel` | `email-label` | | `string` | `\"Email\"` |\r\n| `enablePasswordValidation` | `enable-password-validation` | | `boolean` | `true` |\r\n| `hideInputs` | `hide-inputs` | | `boolean` | `false` |\r\n| `loginLabel` | `login-label` | | `string` | `\"Sign in\"` |\r\n| `nextPage` | `next-page` | | `string` | `\"/\"` |\r\n| `pageLabel` | `page-label` | | `string` | `\"Register\"` |\r\n| `passwordLabel` | `password-label` | | `string` | `\"Password\"` |\r\n| `submitLabel` | `submit-label` | | `string` | `\"Register\"` |\r\n\r\n\r\n## Dependencies\r\n\r\n### Used by\r\n\r\n - [sqm-stencilbook](../sqm-stencilbook)\r\n\r\n### Depends on\r\n\r\n- [sqm-form-message](../sqm-form-message)\r\n- [sqm-password-field](../sqm-password-field)\r\n\r\n### Graph\r\n```mermaid\r\ngraph TD;\r\n sqm-portal-register --> sqm-form-message\r\n sqm-portal-register --> sqm-password-field\r\n sqm-stencilbook --> sqm-portal-register\r\n style sqm-portal-register fill:#f9f,stroke:#333,stroke-width:4px\r\n```\r\n\r\n----------------------------------------------\r\n\r\n*Built with [StencilJS](https://stenciljs.com/)*\r\n";
|
|
24057
24066
|
|
|
24058
24067
|
const EditProfileReadme = "# sqm-portal-profile\r\n\r\n\r\n\r\n<!-- Auto Generated Below -->\r\n\r\n\r\n## Properties\r\n\r\n| Property | Attribute | Description | Type | Default |\r\n| ------------------------ | --------------------------- | ----------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------ |\r\n| `countrytext` | `countrytext` | | `string` | `\"Country\"` |\r\n| `demoData` | -- | | `{ states?: { success: boolean; loading: boolean; submitDisabled: boolean; showCountry: boolean; formState: { country: string; firstName: string; lastName: string; errors: any; error: string; }; user: { id: string; accountId: string; firstName: string; lastName: string; email: string; countryCode: string; }; text: { firstnametext: string; lastnametext: string; emailtext: string; countrytext: string; editProfileHeader: string; editProfileSubHeader: string; submitChangeButtonText: string; }; }; }` | `undefined` |\r\n| `editProfileHeader` | `edit-profile-header` | | `string` | `\"Edit your profile\"` |\r\n| `editProfileSubHeader` | `edit-profile-sub-header` | | `string` | `\"Personal Information\"` |\r\n| `emailtext` | `emailtext` | | `string` | `\"Email\"` |\r\n| `firstnametext` | `firstnametext` | | `string` | `\"First Name\"` |\r\n| `lastnametext` | `lastnametext` | | `string` | `\"Last Name\"` |\r\n| `showCountry` | `show-country` | | `boolean` | `true` |\r\n| `submitChangeButtonText` | `submit-change-button-text` | | `string` | `\"Submit Changes\"` |\r\n\r\n\r\n## Dependencies\r\n\r\n### Depends on\r\n\r\n- [sqm-form-message](../sqm-form-message)\r\n\r\n### Graph\r\n```mermaid\r\ngraph TD;\r\n sqm-portal-profile --> sqm-form-message\r\n style sqm-portal-profile fill:#f9f,stroke:#333,stroke-width:4px\r\n```\r\n\r\n----------------------------------------------\r\n\r\n*Built with [StencilJS](https://stenciljs.com/)*\r\n";
|
|
24059
24068
|
|
|
@@ -24061,7 +24070,7 @@ const ResetPasswordReadme = "# sqm-portal-reset-password\r\n\r\n\r\n\r\n<!-- Aut
|
|
|
24061
24070
|
|
|
24062
24071
|
const EmailVerificationReadme = "# sqm-portal-email-verification\r\n\r\n\r\n\r\n<!-- Auto Generated Below -->\r\n\r\n\r\n## Properties\r\n\r\n| Property | Attribute | Description | Type | Default |\r\n| ------------------------- | --------------------------- | ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------- |\r\n| `demoData` | -- | | `{ states?: { error: string; loading: boolean; success: boolean; }; content?: { email: string; verifyMessage: string; emailVerificationHeader: string; resendEmailButtonText: string; }; }` | `undefined` |\r\n| `emailVerificationHeader` | `email-verification-header` | | `string` | `\"Verify your email\"` |\r\n| `resendEmailButtonText` | `resend-email-button-text` | | `string` | `\"Re-send Email\"` |\r\n| `verifyMessage` | `verify-message` | | `string` | `\"A verification email was sent to {email}. Please verify your email to continue to the portal.\"` |\r\n\r\n\r\n## Dependencies\r\n\r\n### Depends on\r\n\r\n- [sqm-form-message](../sqm-form-message)\r\n\r\n### Graph\r\n```mermaid\r\ngraph TD;\r\n sqm-portal-email-verification --> sqm-form-message\r\n style sqm-portal-email-verification fill:#f9f,stroke:#333,stroke-width:4px\r\n```\r\n\r\n----------------------------------------------\r\n\r\n*Built with [StencilJS](https://stenciljs.com/)*\r\n";
|
|
24063
24072
|
|
|
24064
|
-
const EmailVerifiedReadme = "# sqm-portal-verify-email\r\n\r\n\r\n\r\n<!-- Auto Generated Below -->\
|
|
24073
|
+
const EmailVerifiedReadme = "# sqm-portal-verify-email\r\n\r\n\r\n\r\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| ---------- | ----------- | ----------- | ---------------------------------------------------------------------------------------------------- | ----------- |\n| `demoData` | -- | | `{ states?: { error: string; loading: boolean; verified: boolean; }; data?: { oobCode: string; }; }` | `undefined` |\n| `nextPage` | `next-page` | | `string` | `\"/\"` |\n\n\n## Dependencies\n\n### Depends on\n\n- [sqm-form-message](../sqm-form-message)\n\n### Graph\n```mermaid\ngraph TD;\n sqm-portal-verify-email --> sqm-form-message\n style sqm-portal-verify-email fill:#f9f,stroke:#333,stroke-width:4px\n```\n\n----------------------------------------------\n\n*Built with [StencilJS](https://stenciljs.com/)*\n";
|
|
24065
24074
|
|
|
24066
24075
|
const PortalTemplates_stories = {
|
|
24067
24076
|
title: "Templates / Portal",
|
|
@@ -30,45 +30,30 @@ function Dot({ active, completed, incomplete, }) {
|
|
|
30
30
|
boxSizing: "content-box",
|
|
31
31
|
} })));
|
|
32
32
|
}
|
|
33
|
+
function ProgressLine({ incomplete = false, active = false }) {
|
|
34
|
+
return (h("div", { style: {
|
|
35
|
+
content: "''",
|
|
36
|
+
flex: "0.5 0.5 0",
|
|
37
|
+
height: "4px",
|
|
38
|
+
borderRadius: "4px",
|
|
39
|
+
background: incomplete || active ? "#E5E5E5" : "#9E9E9E",
|
|
40
|
+
position: "relative",
|
|
41
|
+
bottom: "0",
|
|
42
|
+
left: "0",
|
|
43
|
+
display: "flex",
|
|
44
|
+
justifyContent: "center",
|
|
45
|
+
columnGap: "50px",
|
|
46
|
+
marginRight: "-2px",
|
|
47
|
+
boxSizing: "content-box",
|
|
48
|
+
} }));
|
|
49
|
+
}
|
|
33
50
|
function Progress({ active, completed, incomplete }) {
|
|
34
51
|
return [
|
|
35
|
-
h(
|
|
36
|
-
content: "''",
|
|
37
|
-
flex: "0.5 0.5 0",
|
|
38
|
-
height: "4px",
|
|
39
|
-
borderRadius: "4px",
|
|
40
|
-
background: incomplete ? "#E5E5E5" : "#9E9E9E",
|
|
41
|
-
position: "relative",
|
|
42
|
-
bottom: "0",
|
|
43
|
-
left: "0",
|
|
44
|
-
display: "flex",
|
|
45
|
-
justifyContent: "center",
|
|
46
|
-
columnGap: "50px",
|
|
47
|
-
marginRight: "-2px",
|
|
48
|
-
boxSizing: "content-box",
|
|
49
|
-
} }),
|
|
52
|
+
h(ProgressLine, { incomplete: incomplete }),
|
|
50
53
|
h(Dot, { active: active, completed: completed, incomplete: incomplete }),
|
|
51
|
-
h(
|
|
52
|
-
content: "''",
|
|
53
|
-
flex: "0.5 0.5 0",
|
|
54
|
-
height: "4px",
|
|
55
|
-
borderRadius: "4px",
|
|
56
|
-
background: incomplete || active ? "#E5E5E5" : "#9E9E9E",
|
|
57
|
-
position: "relative",
|
|
58
|
-
bottom: "0",
|
|
59
|
-
left: "0",
|
|
60
|
-
display: "flex",
|
|
61
|
-
justifyContent: "center",
|
|
62
|
-
columnGap: "50px",
|
|
63
|
-
marginRight: "-2px",
|
|
64
|
-
boxSizing: "content-box",
|
|
65
|
-
} }),
|
|
54
|
+
h(ProgressLine, { incomplete: incomplete, active: active }),
|
|
66
55
|
];
|
|
67
56
|
}
|
|
68
|
-
export function ProgressBar({
|
|
69
|
-
|
|
70
|
-
return (h("div", { style: { display: "flex", columnGap: "-2px" } },
|
|
71
|
-
h(Progress, { active: stage === 0, completed: stage > 0, incomplete: stage < 0 }),
|
|
72
|
-
h(Progress, { active: stage === 1, completed: stage > 1, incomplete: stage < 1 }),
|
|
73
|
-
h(Progress, { active: stage === 2, completed: stage > 2, incomplete: stage < 2 })));
|
|
57
|
+
export function ProgressBar({ stageCount, currentStage, }) {
|
|
58
|
+
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 })))));
|
|
74
59
|
}
|
package/dist/collection/components/sqm-reward-exchange-list/sqm-reward-exchange-list-view.js
CHANGED
|
@@ -2,7 +2,7 @@ import { getAssetPath, h } from "@stencil/core";
|
|
|
2
2
|
import jss from "jss";
|
|
3
3
|
import preset from "jss-preset-default";
|
|
4
4
|
import { ProgressBar } from "./progressBar";
|
|
5
|
-
import { LeftArrow } from "./SVGs";
|
|
5
|
+
import { LeftArrow, ExchangeArrows } from "./SVGs";
|
|
6
6
|
const stageList = ["chooseReward", "chooseAmount", "confirmation", "success"];
|
|
7
7
|
const stageProgressList = {
|
|
8
8
|
chooseReward: "Choose reward",
|
|
@@ -104,7 +104,8 @@ export function RewardExchangeView(props) {
|
|
|
104
104
|
});
|
|
105
105
|
} }, (_b = item.steps) === null || _b === void 0 ? void 0 : _b.map((step) => (h("sl-menu-item", { value: step, disabled: !step.available },
|
|
106
106
|
step.prettyDestinationValue,
|
|
107
|
-
h("
|
|
107
|
+
h("div", { slot: "suffix", style: { fontSize: "75%", float: "right" } }, step.prettySourceValue),
|
|
108
|
+
step.unavailableReasonCode && (h("p", { style: { fontSize: "70%", color: "#F2994A" } }, step.unavailableReasonCode)))))));
|
|
108
109
|
}
|
|
109
110
|
function chooseReward() {
|
|
110
111
|
var _a;
|
|
@@ -125,12 +126,24 @@ export function RewardExchangeView(props) {
|
|
|
125
126
|
boxShadow: item.key === (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.key) ? "0 1px 8px #87ceeb" : "none",
|
|
126
127
|
marginBottom: "10px 0",
|
|
127
128
|
flex: "1",
|
|
128
|
-
minWidth: "
|
|
129
|
+
minWidth: "100%",
|
|
130
|
+
color: !item.available && "#eee",
|
|
131
|
+
"&:hover": {
|
|
132
|
+
boxShadow: !item.available && "none",
|
|
133
|
+
},
|
|
129
134
|
};
|
|
130
|
-
return (h("div", { key: item.key, class: sheet.classes.CardContainer,
|
|
131
|
-
|
|
135
|
+
return (h("div", { key: item.key, class: sheet.classes.CardContainer,
|
|
136
|
+
//@ts-ignore
|
|
137
|
+
style: style },
|
|
138
|
+
h("sl-card", { class: sheet.classes.Base, onClick: () => item.available &&
|
|
139
|
+
callbacks.setExchangeState({ selectedItem: item }) },
|
|
132
140
|
h("img", { class: sheet.classes.PreviewImage, src: (item === null || item === void 0 ? void 0 : item.imageUrl) || getAssetPath("./assets/Reward-icon.png") }),
|
|
133
|
-
h("p",
|
|
141
|
+
h("p", { style: { marginBottom: "0" } }, item.description),
|
|
142
|
+
item.unavailableReasonCode && (h("p", { style: {
|
|
143
|
+
fontSize: "70%",
|
|
144
|
+
color: "#F2994A",
|
|
145
|
+
marginTop: "0",
|
|
146
|
+
} }, item.unavailableReasonCode)))));
|
|
134
147
|
}),
|
|
135
148
|
h("div", { class: sheet.classes.Buttons },
|
|
136
149
|
h("sl-button", { onClick: () => callbacks.setStage(nextStage), style: { display: "block" }, class: sheet.classes.Button, disabled: !states.selectedItem }, "Continue"),
|
|
@@ -148,24 +161,20 @@ export function RewardExchangeView(props) {
|
|
|
148
161
|
}
|
|
149
162
|
console.log({ selectedItem, selectedStep });
|
|
150
163
|
function confirmation() {
|
|
151
|
-
console.log("confirmation:", { selectedItem });
|
|
152
|
-
const redemptionAmount = () => {
|
|
153
|
-
var _a;
|
|
154
|
-
if ((selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.ruleType) === "FIXED_GLOBAL_REWARD") {
|
|
155
|
-
return `Redeem ${selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.sourceValue} ${selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.sourceUnit} for ${selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.globalRewardKey}`;
|
|
156
|
-
}
|
|
157
|
-
else {
|
|
158
|
-
const amount = states.amount;
|
|
159
|
-
const reward = (_a = selectedStep === null || selectedStep === void 0 ? void 0 : selectedStep.prettyDestinationValue) !== null && _a !== void 0 ? _a : `${amount} ${selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.destinationUnit}`;
|
|
160
|
-
return `Redeem ${amount} ${selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.sourceUnit} for ${reward}`;
|
|
161
|
-
}
|
|
162
|
-
};
|
|
163
164
|
const previousStage = (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.ruleType) === "FIXED_GLOBAL_REWARD"
|
|
164
165
|
? "chooseReward"
|
|
165
166
|
: "chooseAmount";
|
|
166
167
|
return (h("div", null,
|
|
167
|
-
h("h2", null, "Confirm
|
|
168
|
-
|
|
168
|
+
h("h2", null, "Confirm and redeem"),
|
|
169
|
+
h("div", { style: { textAlign: "center" } },
|
|
170
|
+
h("p", null,
|
|
171
|
+
h("b", null, selectedStep === null || selectedStep === void 0 ? void 0 : selectedStep.sourceValue)),
|
|
172
|
+
h("p", null,
|
|
173
|
+
h("b", null, selectedStep === null || selectedStep === void 0 ? void 0 : selectedStep.prettySourceValue)),
|
|
174
|
+
h("p", null,
|
|
175
|
+
h(ExchangeArrows, null)),
|
|
176
|
+
h("p", null, selectedStep === null || selectedStep === void 0 ? void 0 : selectedStep.destinationValue),
|
|
177
|
+
h("p", null, selectedStep === null || selectedStep === void 0 ? void 0 : selectedStep.prettyDestinationValue)),
|
|
169
178
|
h("div", { class: sheet.classes.Buttons },
|
|
170
179
|
h("sl-button", { onClick: callbacks.exchangeReward, style: { display: "block" }, class: sheet.classes.Button }, "Redeem"),
|
|
171
180
|
h("a", { onClick: () => callbacks.setStage(previousStage), style: { display: "block" }, class: sheet.classes.Button }, "Back"))));
|
|
@@ -187,7 +196,7 @@ export function RewardExchangeView(props) {
|
|
|
187
196
|
function stageMap() {
|
|
188
197
|
const stageNumber = stageList.indexOf(states.redeemStage);
|
|
189
198
|
return (h("div", { style: { fontSize: "80%" } },
|
|
190
|
-
h(ProgressBar, {
|
|
199
|
+
h(ProgressBar, { stageCount: 3, currentStage: stageNumber }),
|
|
191
200
|
h("div", { style: {
|
|
192
201
|
marginTop: "5px",
|
|
193
202
|
display: "flex",
|
|
@@ -203,7 +212,7 @@ export function RewardExchangeView(props) {
|
|
|
203
212
|
return h("i", { style: { flex: "1 1 0" } }, stageProgressList[stage]);
|
|
204
213
|
}))));
|
|
205
214
|
}
|
|
206
|
-
const
|
|
215
|
+
const BackButton = () => {
|
|
207
216
|
if (states.redeemStage === "success")
|
|
208
217
|
return "";
|
|
209
218
|
let previousStage = "";
|
|
@@ -225,7 +234,7 @@ export function RewardExchangeView(props) {
|
|
|
225
234
|
h("style", { type: "text/css" }, styleString),
|
|
226
235
|
h("div", null,
|
|
227
236
|
h("sl-drawer", { ref: (ref) => (refs.drawerRef.current = ref), placement: "right", class: sheet.classes.Drawer, open: stageList.indexOf(states.redeemStage) >= 0 },
|
|
228
|
-
h(
|
|
237
|
+
h(BackButton, null),
|
|
229
238
|
stageMap(),
|
|
230
239
|
currentStage && currentStage(),
|
|
231
240
|
states.exchangeError &&
|