@saasquatch/mint-components 1.14.7-9 → 1.14.7

package/dist/collection/components/sqm-router/sqm-router.e2e.js

@@ -0,0 +1,180 @@
+import { newE2EPage } from "@stencil/core/testing";
+function newRoute(id, path) {
+  return /*html*/ `
+  <sqm-route path="${path}">
+    <div id=${id}></div>
+  </sqm-route>`;
+}
+function newTemplate(id, path) {
+  return /*html*/ `
+  <template path="${path}">
+    <div id=${id}></div>
+  </template>`;
+}
+function newPageFunctions(page) {
+  return {
+    expectElement: async (selector) => { var _a; 
+    // convert to string because jest pretty printing the object causes errors
+    return expect((_a = (await page.find(selector))) === null || _a === void 0 ? void 0 : _a.id).not.toBeUndefined(); },
+    dontExpectElement: async (selector) => { var _a; return expect((_a = (await page.find(selector))) === null || _a === void 0 ? void 0 : _a.id).toBeUndefined(); },
+    expectTemplate: async (selector) => { var _a; return expect((_a = (await page.find("#" + selector))) === null || _a === void 0 ? void 0 : _a.id).not.toBeUndefined(); },
+    dontExpectTemplate: async (selector) => { var _a; return expect((_a = (await page.find("#" + selector))) === null || _a === void 0 ? void 0 : _a.id).toBeUndefined(); },
+    expectRoute: async (selector) => {
+      var _a;
+      return expect((_a = (await page.find('div[style="display: contents;"] > div#' + selector))) === null || _a === void 0 ? void 0 : _a.id).not.toBeUndefined();
+    },
+    dontExpectRoute: async (selector) => {
+      var _a;
+      return expect((_a = (await page.find('div[style="display: contents;"] > div#' + selector))) === null || _a === void 0 ? void 0 : _a.id).toBeUndefined();
+    },
+    history: {
+      push: (path) => page.evaluate((x) => window.squatchHistory.push(x), path),
+      back: () => page.evaluate(() => window.squatchHistory.back()),
+    },
+  };
+}
+describe("sqm-router", () => {
+  test("Default route", async () => {
+    const html = /*html*/ `
+    <sqm-router>
+      ${newRoute("RouteA", "/")}
+      ${newRoute("RouteB", "/B")}
+    </sqm-router>
+    `;
+    const page = await newE2EPage();
+    await page.setContent(html);
+    const { expectElement, expectRoute, dontExpectRoute } = newPageFunctions(page);
+    await expectElement("sqm-router");
+    await expectRoute("RouteA");
+    await dontExpectRoute("RouteB");
+    page.close();
+  });
+  test("Changing pages", async () => {
+    const html = /*html*/ `
+    <sqm-router>
+      ${newRoute("RouteA", "/")}
+      ${newRoute("RouteB", "/B")}
+    </sqm-router>
+    `;
+    const page = await newE2EPage();
+    await page.setContent(html);
+    const { expectElement, expectRoute, dontExpectRoute, history, } = newPageFunctions(page);
+    await expectElement("sqm-router");
+    await expectRoute("RouteA");
+    await dontExpectRoute("RouteB");
+    await history.push("/B");
+    await page.waitForChanges();
+    await dontExpectRoute("RouteA");
+    await expectRoute("RouteB");
+    await history.push("/");
+    await page.waitForChanges();
+    await expectRoute("RouteA");
+    await dontExpectRoute("RouteB");
+    page.close();
+  });
+  test("Going back", async () => {
+    const html = /*html*/ `
+    <sqm-router>
+      ${newRoute("RouteA", "/")}
+      ${newRoute("RouteB", "/B")}
+      ${newRoute("RouteC", "/C")}
+    </sqm-router>
+    `;
+    const page = await newE2EPage();
+    await page.setContent(html);
+    const { expectElement, expectRoute, dontExpectRoute, history, } = newPageFunctions(page);
+    await expectElement("sqm-router");
+    await expectRoute("RouteA");
+    await dontExpectRoute("RouteB");
+    await dontExpectRoute("RouteC");
+    await history.push("/B");
+    await page.waitForChanges();
+    await dontExpectRoute("RouteA");
+    await expectRoute("RouteB");
+    await dontExpectRoute("RouteC");
+    await history.push("/C");
+    await page.waitForChanges();
+    await dontExpectRoute("RouteA");
+    await dontExpectRoute("RouteB");
+    await expectRoute("RouteC");
+    await history.back();
+    await page.waitForChanges();
+    await dontExpectRoute("RouteA");
+    await expectRoute("RouteB");
+    await dontExpectRoute("RouteC");
+    await history.back();
+    await page.waitForChanges();
+    await expectRoute("RouteA");
+    await dontExpectRoute("RouteB");
+    await dontExpectRoute("RouteC");
+    page.close();
+  });
+  test("Template has precedence over route", async () => {
+    const html = /*html*/ `
+    <sqm-router>
+      ${newRoute("RouteA", "/")}
+      ${newTemplate("RouteB", "/")}
+      ${newRoute("RouteC", "/B")}
+    </sqm-router>
+    `;
+    const page = await newE2EPage();
+    await page.setContent(html);
+    const { expectElement, expectTemplate, dontExpectTemplate, expectRoute, dontExpectRoute, history, } = newPageFunctions(page);
+    await expectElement("sqm-router");
+    await dontExpectRoute("RouteA");
+    await expectTemplate("RouteB");
+    await dontExpectRoute("RouteC");
+    await history.push("/B");
+    await page.waitForChanges();
+    await dontExpectRoute("RouteA");
+    await dontExpectTemplate("RouteB");
+    await expectRoute("RouteC");
+    await history.push("/");
+    await page.waitForChanges();
+    await dontExpectRoute("RouteA");
+    await expectTemplate("RouteB");
+    await dontExpectRoute("RouteC");
+    page.close();
+  });
+  test("First matching element is chosen, with precedence", async () => {
+    const html = /*html*/ `
+    <sqm-router>
+      ${newRoute("RootA", "/")}
+      ${newRoute("RootB", "/")}
+      ${newTemplate("RootC", "/")}
+      ${newTemplate("RootD", "/")}
+      ${newRoute("StuffA", "/stuff")}
+      ${newRoute("StuffB", "/stuff")}
+    </sqm-router>
+    `;
+    const page = await newE2EPage();
+    await page.setContent(html);
+    const { expectElement, expectTemplate, dontExpectTemplate, expectRoute, dontExpectRoute, history, } = newPageFunctions(page);
+    await expectElement("sqm-router");
+    await dontExpectRoute("RootA");
+    await dontExpectRoute("RootB");
+    await expectTemplate("RootC");
+    await dontExpectTemplate("RootD");
+    await dontExpectRoute("StuffA");
+    await dontExpectRoute("StuffB");
+    await history.push("/stuff");
+    await page.waitForChanges();
+    await dontExpectRoute("RootA");
+    await dontExpectRoute("RootB");
+    await dontExpectTemplate("RootC");
+    await dontExpectTemplate("RootD");
+    await expectRoute("StuffA");
+    await dontExpectRoute("StuffB");
+    await history.push("/");
+    await page.waitForChanges();
+    await dontExpectRoute("RootA");
+    await dontExpectRoute("RootB");
+    await expectTemplate("RootC");
+    await dontExpectTemplate("RootD");
+    await dontExpectRoute("StuffA");
+    await dontExpectRoute("StuffB");
+    page.close();
+  });
+});
+// nice debugging tool
+//   console.log(await page.evaluate(()=>document.body.innerHTML))

package/dist/collection/utils/utils.spec.js

@@ -0,0 +1,71 @@
+import { newSpecPage } from "@stencil/core/testing";
+import { format, sanitizeUrlPath } from "./utils";
+describe("format", () => {
+  it("returns empty string for no names defined", () => {
+    expect(format(undefined, undefined, undefined)).toEqual("");
+  });
+  it("formats just first names", () => {
+    expect(format("Joseph", undefined, undefined)).toEqual("Joseph");
+  });
+  it("formats first and last names", () => {
+    expect(format("Joseph", undefined, "Publique")).toEqual("Joseph Publique");
+  });
+  it("formats first, middle and last names", () => {
+    expect(format("Joseph", "Quincy", "Publique")).toEqual("Joseph Quincy Publique");
+  });
+});
+describe("Users are redirected to the value of the nextPage url parameter as if it were a relative path", () => {
+  const expectUrlToRedirectTo = async (currentUrl, expectedUrl) => {
+    await newSpecPage({
+      components: [],
+      html: ``,
+      url: currentUrl,
+    });
+    const urlParams = new URLSearchParams(window.location.search);
+    const nextPage = urlParams.get("nextPage");
+    const url = sanitizeUrlPath(nextPage);
+    expect(url.href).toEqual(expectedUrl);
+  };
+  it("https://www.example.com?nextPage=activity --> https://www.example.com/activity", async () => {
+    await expectUrlToRedirectTo("https://www.example.com?nextPage=activity", "https://www.example.com/activity");
+  });
+  it("https://www.example.com?nextPage=./activity --> https://www.example.com/activity", async () => {
+    await expectUrlToRedirectTo("https://www.example.com?nextPage=./activity", "https://www.example.com/activity");
+  });
+  it("https://www.example.com?nextPage=/activity --> https://www.example.com/activity", async () => {
+    await expectUrlToRedirectTo("https://www.example.com?nextPage=/activity", "https://www.example.com/activity");
+  });
+  it("http://www.example.com/nest/page?oob=123&other&nextPage=activity#heading-1 --> http://www.example.com/activity", async () => {
+    await expectUrlToRedirectTo("http://www.example.com/nest/page?oob=123&other&nextPage=activity#heading-1", "http://www.example.com/activity");
+  });
+  it("https://www.example.com?nextPage=www.google.com --> https://www.example.com/www.google.com", async () => {
+    await expectUrlToRedirectTo("https://www.example.com?nextPage=www.google.com", "https://www.example.com/www.google.com");
+  });
+  it("https://www.example.com?nextPage=//foo.com --> https://www.example.com/", async () => {
+    await expectUrlToRedirectTo("https://www.example.com?nextPage=//foo.com", "https://www.example.com/");
+  });
+  it("https://www.example.com?nextPage=https://malicious.example.com --> https://www.example.com/", async () => {
+    await expectUrlToRedirectTo("https://www.example.com?nextPage=https://malicious.example.com", "https://www.example.com/");
+  });
+  it("https://www.example.com?nextPage=activity?foo=bar --> https://www.example.com/activity", async () => {
+    await expectUrlToRedirectTo("https://www.example.com?nextPage=activity?foo=bar", "https://www.example.com/activity?foo=bar");
+  });
+  it("https://www.example.com?nextPage=%2Factivity%3Ffoo%3Dbar --> https://www.example.com/activity?foo=bar", async () => {
+    await expectUrlToRedirectTo("https://www.example.com?nextPage=%2Factivity%3Ffoo%3Dbar", "https://www.example.com/activity?foo=bar");
+  });
+  it("https://www.example.com?nextPage=%2Factivity%3Ffoo%3Dbar#hash --> https://www.example.com/activity?foo=bar", async () => {
+    await expectUrlToRedirectTo("https://www.example.com?nextPage=%2Factivity%3Ffoo%3Dbar#hash", "https://www.example.com/activity?foo=bar");
+  });
+  it("https://www.example.com?nextPage=%2Factivity%3Ffoo%3Dbar%23hash --> https://www.example.com/activity?foo=bar#hash", async () => {
+    await expectUrlToRedirectTo("https://www.example.com?nextPage=%2Factivity%3Ffoo%3Dbar%23hash", "https://www.example.com/activity?foo=bar#hash");
+  });
+  it("https://www.example.com:1337?nextPage=activity --> https://www.example.com:1337/activity", async () => {
+    await expectUrlToRedirectTo("https://www.example.com:1337?nextPage=activity", "https://www.example.com:1337/activity");
+  });
+  it("http://1.1.1.1:1111?nextPage=activity --> http://1.1.1.1:1111/activity", async () => {
+    await expectUrlToRedirectTo("http://1.1.1.1:1111?nextPage=activity", "http://1.1.1.1:1111/activity");
+  });
+  it("@landmine https://user:pass@www.example.com:444?nextPage=activity --> https://www.example.com:444/activity", async () => {
+    await expectUrlToRedirectTo("https://user:pass@www.example.com:444?nextPage=activity", "https://www.example.com:444/activity");
+  });
+});

package/dist/esm/{ShadowViewAddon-64194d20.js → ShadowViewAddon-f2176779.js}

@@ -1663,7 +1663,6 @@ function PortalRegisterView(props) {
 const style$4 = {
   ErrorStyle: {
     "&::part(control)": {
-      background: "var(--sl-color-danger-10)",
       borderColor: "var(--sl-color-danger-500)",
       outline: "var(--sl-color-danger-500)",
     },
@@ -1702,8 +1701,9 @@ jss.setup(create());
 const sheet$4 = jss.createStyleSheet(style$4);
 const styleString$4 = sheet$4.toString();
 function CheckboxFieldView(props) {
-  var _b, _c;
+  var _a, _b, _c, _d, _e;
   const { states, content, callbacks } = props;
+  const validationErrors = (_a = states === null || states === void 0 ? void 0 : states.registrationFormState) === null || _a === void 0 ? void 0 : _a.validationErrors;
   return (h("div", { class: sheet$4.classes.FieldContainer, part: "sqm-base" },
     h("style", { type: "text/css" },
       vanillaStyle$2,
@@ -1711,12 +1711,20 @@ function CheckboxFieldView(props) {
     h("sl-checkbox", Object.assign({ exportparts: "label: input-label, base: input-base", name: `/${content.checkboxName}`, checked: states.checked, "onSl-change": (e) => {
         e.target.value = e.target.checked;
         callbacks.setChecked(e.target.value);
-      } }, (!content.checkboxOptional ? { required: false } : []), { disabled: ((_b = states.registrationFormState) === null || _b === void 0 ? void 0 : _b.loading) || ((_c = states.registrationFormState) === null || _c === void 0 ? void 0 : _c.disabled), required: false }), intl.formatMessage({
+      } }, (!content.checkboxOptional ? { required: false } : []), { disabled: ((_b = states.registrationFormState) === null || _b === void 0 ? void 0 : _b.loading) || ((_c = states.registrationFormState) === null || _c === void 0 ? void 0 : _c.disabled), validationError: ({ value }) => {
+        if (!value && !content.checkboxOptional) {
+          return content.errorMessage;
+        }
+      } }, (((_e = (_d = states.registrationFormState) === null || _d === void 0 ? void 0 : _d.validationErrors) === null || _e === void 0 ? void 0 : _e[content.checkboxName]) ? {
+      class: sheet$4.classes.ErrorStyle,
+    }
+      : [])), intl.formatMessage({
       id: content.checkboxName + "-message",
       defaultMessage: content.checkboxLabel,
     }, {
       labelLink: (h("a", { href: content.checkboxLabelLink, target: "_blank" }, content.checkboxLabelLinkText || content.checkboxLabelLink)),
-    }))));
+    })),
+    (validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors[content.checkboxName]) && (h("p", { class: sheet$4.classes.ErrorMessageStyle }, content.errorMessage))));
 }
 
 function ChangeMarktingView(props) {

package/dist/esm/sqm-big-stat_43.entry.js

@@ -20,7 +20,7 @@ import { P as PortalLoginView } from './sqm-portal-login-view-7e49609a.js';
 import { u as usePortalLogin } from './usePortalLogin-ef647a50.js';
 import { A as AsYouType } from './AsYouType-46f67d0d.js';
 import { i as isEmpty } from './utilities-5b0ca040.js';
-import { b as useDemoBigStat, W as useBigStat, B as BigStatView, U as autoColorScaleCss, J as CardFeedView, i as CheckboxFieldView, K as CouponCodeView, D as DropdownFieldView, E as EditProfileView, H as HeroView, I as InputFieldView, Q as LeadDropdownFieldView, O as LeadFormView, X as withShadowView, L as LeaderboardView, N as NameFieldsView, C as ChangeMarktingView, d as PortalChangePasswordView, h as PortalFooterView, P as PortalFrameView, e as PortalRegisterView, R as ReferralIframeView, Y as demoRewardExchange, j as RewardExchangeView, a as useShareButton, S as ShareButtonView, u as useShareLink, c as StatContainerView, T as TaskCardView } from './ShadowViewAddon-64194d20.js';
+import { b as useDemoBigStat, W as useBigStat, B as BigStatView, U as autoColorScaleCss, J as CardFeedView, i as CheckboxFieldView, K as CouponCodeView, D as DropdownFieldView, E as EditProfileView, H as HeroView, I as InputFieldView, Q as LeadDropdownFieldView, O as LeadFormView, X as withShadowView, L as LeaderboardView, N as NameFieldsView, C as ChangeMarktingView, d as PortalChangePasswordView, h as PortalFooterView, P as PortalFrameView, e as PortalRegisterView, R as ReferralIframeView, Y as demoRewardExchange, j as RewardExchangeView, a as useShareButton, S as ShareButtonView, u as useShareLink, c as StatContainerView, T as TaskCardView } from './ShadowViewAddon-f2176779.js';
 import './sqm-portal-container-view-1683ae32.js';
 import { u as usePayoutStatus } from './usePayoutStatus-fed17fc9.js';
 

package/dist/esm/sqm-stencilbook.entry.js

@@ -32,7 +32,7 @@ import { P as PortalResetPasswordView } from './sqm-portal-reset-password-view-5
 import { P as PortalVerifyEmailView } from './sqm-portal-verify-email-view-b12cb894.js';
 import './ErrorView-48e2b969.js';
 import { Q as QrCodeView } from './sqm-qr-code-view-f1d0763b.js';
-import { S as ShareButtonView, L as LeaderboardView, B as BigStatView, P as PortalFrameView, E as EditProfileView, u as useShareLink, a as useShareButton, b as useDemoBigStat, c as StatContainerView, d as PortalChangePasswordView, e as PortalRegisterView, C as ChangeMarktingView, T as TaskCardView, f as ProgressBarView, g as PoweredByImg$1, h as PortalFooterView, H as HeroView, R as ReferralIframeView, N as NameFieldsView, i as CheckboxFieldView, D as DropdownFieldView, I as InputFieldView, j as RewardExchangeView, r as rewardExchangeCustomErrorMsg, k as rewardExchangeLongText, l as rewardExchangeSelected, m as chooseAmountFixed, n as chooseAmountFixedNoDescription, o as chooseAmountVariable, p as chooseAmountVariableNoDescription, q as chooseAmountVariableDisabled, s as chooseAmountVariableUnavailable, t as confirmFixed, v as confirmVariable, w as redemptionError, x as queryError, y as success, z as successVariable, A as loading, F as empty$1, G as rewardExchange, J as CardFeedView, K as CouponCodeView, M as ProgressBar$2, O as LeadFormView, Q as LeadDropdownFieldView, U as autoColorScaleCss, V as ShadowViewAddon } from './ShadowViewAddon-64194d20.js';
+import { S as ShareButtonView, L as LeaderboardView, B as BigStatView, P as PortalFrameView, E as EditProfileView, u as useShareLink, a as useShareButton, b as useDemoBigStat, c as StatContainerView, d as PortalChangePasswordView, e as PortalRegisterView, C as ChangeMarktingView, T as TaskCardView, f as ProgressBarView, g as PoweredByImg$1, h as PortalFooterView, H as HeroView, R as ReferralIframeView, N as NameFieldsView, i as CheckboxFieldView, D as DropdownFieldView, I as InputFieldView, j as RewardExchangeView, r as rewardExchangeCustomErrorMsg, k as rewardExchangeLongText, l as rewardExchangeSelected, m as chooseAmountFixed, n as chooseAmountFixedNoDescription, o as chooseAmountVariable, p as chooseAmountVariableNoDescription, q as chooseAmountVariableDisabled, s as chooseAmountVariableUnavailable, t as confirmFixed, v as confirmVariable, w as redemptionError, x as queryError, y as success, z as successVariable, A as loading, F as empty$1, G as rewardExchange, J as CardFeedView, K as CouponCodeView, M as ProgressBar$2, O as LeadFormView, Q as LeadDropdownFieldView, U as autoColorScaleCss, V as ShadowViewAddon } from './ShadowViewAddon-f2176779.js';
 import { P as PortalContainerView, a as PortalSectionView } from './sqm-portal-container-view-1683ae32.js';
 import { O as OtherRegionSlotView, I as InvoiceTableView, T as TaxForm } from './sqm-invoice-table-view-7f376a75.js';
 import { L as LeadInputFieldView } from './sqm-lead-input-field-view-4ede5d7f.js';