@saasquatch/mint-components 1.5.2-0 → 1.5.3-1

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

@@ -1,27 +1,27 @@
-import { h } from "@stencil/core";
-export 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" } },
-  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" })));
-export const ExchangeArrows = () => (h("svg", { width: 19, height: 15, fill: "none", xmlns: "http://www.w3.org/2000/svg" },
-  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" })));
-export const CheckMark = () => (h("svg", { width: 12, height: 10, fill: "none", xmlns: "http://www.w3.org/2000/svg" },
-  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" })));
-export const CheckmarkFilled = () => (h("svg", { width: "18", height: "18", viewBox: "0 0 18 18", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
-  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" }),
-  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" })));
-export const Gift = () => (h("svg", { width: 156, height: 157, fill: "none", xmlns: "http://www.w3.org/2000/svg" },
-  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" }),
-  h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M37.18 73.862v7.966h89.663v-7.966H37.18Z", fill: "#E9BB30" }),
-  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" }),
-  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" }),
-  h("path", { d: "M75.086 74.224h13.85v7.604h-13.85v-7.604Z", fill: "#DD4747" }),
-  h("g", { filter: "url(#a)" },
-    h("ellipse", { cx: 82.008, cy: 141.207, rx: 36.813, ry: 5.793, fill: "#E0DDDD", "fill-opacity": 0.8 })),
-  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" }),
-  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" }),
-  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" }),
-  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" }),
-  h("defs", null,
-    h("filter", { id: "a", x: 35.195, y: 125.414, width: 93.625, height: 31.586, filterUnits: "userSpaceOnUse", "color-interpolation-filters": "s-rGB" },
-      h("feFlood", { "flood-opacity": 0, result: "BackgroundImageFix" }),
-      h("feBlend", { in: "SourceGraphic", in2: "BackgroundImageFix", result: "shape" }),
-      h("feGaussianBlur", { stdDeviation: 5, result: "effect1_foregroundBlur_653_17907" })))));
+import { h } from "@stencil/core";
+export 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" } },
+  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" })));
+export const ExchangeArrows = () => (h("svg", { width: 19, height: 15, fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+  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" })));
+export const CheckMark = () => (h("svg", { width: 12, height: 10, fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+  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" })));
+export const CheckmarkFilled = () => (h("svg", { width: "18", height: "18", viewBox: "0 0 18 18", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+  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" }),
+  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" })));
+export const Gift = () => (h("svg", { width: 156, height: 157, fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+  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" }),
+  h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M37.18 73.862v7.966h89.663v-7.966H37.18Z", fill: "#E9BB30" }),
+  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" }),
+  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" }),
+  h("path", { d: "M75.086 74.224h13.85v7.604h-13.85v-7.604Z", fill: "#DD4747" }),
+  h("g", { filter: "url(#a)" },
+    h("ellipse", { cx: 82.008, cy: 141.207, rx: 36.813, ry: 5.793, fill: "#E0DDDD", "fill-opacity": 0.8 })),
+  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" }),
+  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" }),
+  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" }),
+  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" }),
+  h("defs", null,
+    h("filter", { id: "a", x: 35.195, y: 125.414, width: 93.625, height: 31.586, filterUnits: "userSpaceOnUse", "color-interpolation-filters": "s-rGB" },
+      h("feFlood", { "flood-opacity": 0, result: "BackgroundImageFix" }),
+      h("feBlend", { in: "SourceGraphic", in2: "BackgroundImageFix", result: "shape" }),
+      h("feGaussianBlur", { stdDeviation: 5, result: "effect1_foregroundBlur_653_17907" })))));

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

@@ -1,143 +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),
-        },
-      },
-    } }));
-});
+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

@@ -1,64 +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 })))));
-}
+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 })))));
+}