@saasquatch/mint-components 1.4.0 → 1.5.0-11

package/dist/collection/components/sqm-reward-exchange-list/UseRewardExchangeList.stories.js

@@ -0,0 +1,143 @@
+import { setUserIdentity, useLazyQuery, } from "@saasquatch/component-boilerplate";
+import { useEffect, useState } from "@saasquatch/universal-hooks";
+import { h } from "@stencil/core";
+import { gql } from "graphql-request";
+import { createHookStory } from "../sqm-stencilbook/HookStoryAddon";
+const EXCHANGE = gql `
+  mutation exchange($exchangeRewardInput: ExchangeRewardInput!) {
+    exchangeReward(exchangeRewardInput: $exchangeRewardInput) {
+      reward {
+        id
+      }
+    }
+  }
+`;
+export default {
+  title: "Hooks / useRewardExchange",
+};
+function setupGraphQL() {
+  const id = "testestest";
+  const accountId = id;
+  const programId = "sam-partner-test-2";
+  //@ts-ignore
+  window.widgetIdent = {
+    tenantAlias: "test_a8b41jotf8a1v",
+    appDomain: "https://staging.referralsaasquatch.com",
+    programId,
+  };
+  useEffect(() => {
+    setUserIdentity({
+      accountId,
+      id,
+      jwt: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjp7ImFjY291bnRJZCI6InRlc3Rlc3Rlc3QiLCJpZCI6InRlc3Rlc3Rlc3QifX0.qYnU5hNeIj9C_G3NogfG7btgCPGZC7JRXY0MG6a63zs",
+    });
+    return () => {
+      window.widgetIdent = undefined;
+      setUserIdentity(undefined);
+    };
+  }, []);
+  return { id, accountId };
+}
+function useExchangeButton() {
+  const { id, accountId } = setupGraphQL();
+  const [points, setPoints] = useState(10);
+  const [rate, setRate] = useState(100);
+  const [exchange, { data, errors }] = useLazyQuery(EXCHANGE);
+  return {
+    states: {
+      points,
+      rate,
+    },
+    data: {
+      id,
+      accountId,
+      data,
+      errors,
+    },
+    callbacks: {
+      exchange,
+      setPoints,
+      setRate,
+    },
+  };
+}
+const DefaultView = (props) => {
+  const { states, data, callbacks } = props;
+  return (h("div", null,
+    h("div", null,
+      h("label", null, "Rate:"),
+      h("input", { value: states.rate, onInput: (e) => 
+        // @ts-ignore
+        callbacks.setRate(e.target.value) })),
+    h("input", { value: states.points, onInput: (e) => 
+      // @ts-ignore
+      callbacks.setPoints(e.target.value) }),
+    h("button", { onClick: () => callbacks.exchange(props.input) }, "Exchange"),
+    h("details", null,
+      h("summary", null, "response"),
+      h("h4", null, "data"),
+      h("div", { style: { maxWidth: "500px" } },
+        h("pre", { style: { width: "500px", whiteSpace: "pre-wrap" } }, JSON.stringify(data.data))),
+      h("h4", null, "errors"),
+      h("div", { style: { maxWidth: "500px" } },
+        h("pre", { style: { maxWidth: "500px", whiteSpace: "pre-wrap" } }, JSON.stringify(data.errors))))));
+};
+export const RewardList = createHookStory(() => {
+  setupGraphQL();
+  const props = {
+    listType: "",
+    render: () => { },
+    disconnectedCallback: () => { },
+    ignored: true,
+  };
+  return (h("sqm-reward-exchange-list", { "list-type": "something" }));
+});
+export const FixedGlobalReward = createHookStory(() => {
+  const { states, data, callbacks } = useExchangeButton();
+  return (h(DefaultView, { states: states, data: data, callbacks: callbacks, input: {
+      exchangeRewardInput: {
+        userId: data.id,
+        accountId: data.accountId,
+        redeemCreditInput: {
+          amount: states.points,
+          unit: "POINT",
+        },
+        globalRewardKey: "gc1",
+      },
+    } }));
+});
+export const VariableGlobalReward = createHookStory(() => {
+  const { states, data, callbacks } = useExchangeButton();
+  return (h(DefaultView, { states: states, data: data, callbacks: callbacks, input: {
+      exchangeRewardInput: {
+        userId: data.id,
+        accountId: data.accountId,
+        redeemCreditInput: {
+          amount: states.points,
+          unit: "POINT",
+        },
+        globalRewardKey: "gc1",
+        rewardInput: {
+          valueInCents: Math.ceil(states.points * states.rate),
+        },
+      },
+    } }));
+});
+export const VariableCreditReward = createHookStory(() => {
+  const { states, data, callbacks } = useExchangeButton();
+  return (h(DefaultView, { states: states, data: data, callbacks: callbacks, input: {
+      exchangeRewardInput: {
+        userId: data.id,
+        accountId: data.accountId,
+        redeemCreditInput: {
+          amount: states.points,
+          unit: "POINT",
+        },
+        rewardInput: {
+          type: "CREDIT",
+          unit: "foo",
+          assignedCredit: Math.ceil(states.points * states.rate),
+        },
+      },
+    } }));
+});

package/dist/collection/components/sqm-reward-exchange-list/progressBar.js

@@ -0,0 +1,64 @@
+import { h } from "@stencil/core";
+import { CheckMark } from "./SVGs";
+function Dot({ active, completed, incomplete, stage, }) {
+  return (h("div", { style: {
+      display: "flex",
+    } },
+    h("div", { style: {
+        backgroundColor: completed
+          ? "var(--sl-color-success-500)"
+          : incomplete
+            ? "var(--sl-color-neutral-200)"
+            : "var(--sl-color-neutral-0)",
+        border: active
+          ? "1px solid var(--sl-color-success-500)"
+          : incomplete
+            ? "1px solid var(--sl-color-neutral-200)"
+            : "1px solid var(--sl-color-success-500)",
+        borderRadius: "50%",
+        width: "23px",
+        height: "23px",
+        margin: "-11px",
+        zIndex: "1",
+        boxSizing: "content-box",
+      } }, completed ? (h("div", { style: { top: "-10.5%", left: "23.5%", position: "relative" } },
+      h(CheckMark, null))) : (h("div", { style: {
+        color: active
+          ? "var(--sl-color-success-500)"
+          : "var(--sl-color-neutral-50)",
+        width: "23px",
+        lineHeight: "24px",
+        textAlign: "center",
+        position: "relative",
+      } }, stage + 1)))));
+}
+function ProgressLine({ incomplete = false, active = false, invisible = false, }) {
+  return (h("div", { style: {
+      content: "''",
+      flex: "0.5 0.5 0",
+      height: "4px",
+      borderRadius: "4px",
+      background: incomplete || active
+        ? "var(--sl-color-neutral-200)"
+        : "var(--sl-color-success-500)",
+      position: "relative",
+      bottom: "0",
+      left: "0",
+      display: "flex",
+      justifyContent: "center",
+      columnGap: "50px",
+      marginRight: "-2px",
+      boxSizing: "content-box",
+      opacity: invisible ? "0" : "1",
+    } }));
+}
+function Progress({ active, completed, incomplete, stage }) {
+  return [
+    h(ProgressLine, { incomplete: incomplete, invisible: stage === 0 }),
+    h(Dot, { active: active, completed: completed, incomplete: incomplete, stage: stage }),
+    h(ProgressLine, { incomplete: incomplete, active: active, invisible: stage === 2 }),
+  ];
+}
+export function ProgressBar({ stageCount, currentStage, }) {
+  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 })))));
+}