@saasquatch/mint-components 1.4.0-0 → 1.5.0-10

package/dist/collection/components/sqm-referral-table/columns/sqm-referral-table-status-column.js

@@ -1,6 +1,6 @@
 import { withHooks } from "@saasquatch/stencil-hooks";
 import { Component, h, Host, Method, Prop } from "@stencil/core";
-import { useRequestRerender } from "../re-render";
+import { useRequestRerender } from "../../../tables/re-render";
 /**
  * @uiName Referral Table Status Column
  */

package/dist/collection/components/sqm-referral-table/columns/sqm-referral-table-user-column.js

@@ -1,6 +1,6 @@
 import { withHooks } from "@saasquatch/stencil-hooks";
 import { Component, h, Host, Method, Prop } from "@stencil/core";
-import { useRequestRerender } from "../re-render";
+import { useRequestRerender } from "../../../tables/re-render";
 /**
  * @uiName Referral Table User Column
  */

package/dist/collection/components/sqm-referral-table/useReferralTable.js

@@ -2,8 +2,8 @@ import { usePaginatedQuery, useProgramId, useQuery, useUserIdentity, } from "@sa
 import { useEffect, useReducer } from "@saasquatch/universal-hooks";
 import { h } from "@stencil/core";
 import gql from "graphql-tag";
-import { useRerenderListener } from "./re-render";
-import { useChildElements } from "./useChildElements";
+import { useRerenderListener } from "../../tables/re-render";
+import { useChildElements } from "../../tables/useChildElements";
 const GET_REFERRER_DATA = gql `
   query getReferrals($programId: ID, $rewardFilter: RewardFilterInput) {
     viewer {

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

@@ -0,0 +1,22 @@
+import { h } from "@stencil/core";
+import { RewardExchangeView, } from "./sqm-reward-exchange-list-view";
+import * as Data from "./RewardExchangeListData";
+import { Resizer } from "../sqm-stencilbook/Resizer";
+export default {
+  title: "Components/Reward Exchange List",
+};
+const StoryBase = (props) => () => {
+  return (h(Resizer, null,
+    h(RewardExchangeView, Object.assign({}, props))));
+};
+export const ChooseReward = StoryBase(Data.rewardExchange);
+export const ChooseRewardSelected = StoryBase(Data.rewardExchangeSelected);
+export const ChooseAmount = StoryBase(Data.chooseAmountFixed);
+export const ChooseAmountVariable = StoryBase(Data.chooseAmountVariable);
+export const Confirm = StoryBase(Data.confirmFixed);
+export const ConfirmVariable = StoryBase(Data.confirmVariable);
+export const Error = StoryBase(Data.error);
+export const Success = StoryBase(Data.success);
+export const SuccessVariable = StoryBase(Data.success2);
+export const SuccessPromo = StoryBase(Data.success3);
+export const Loading = StoryBase(Data.loading);

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

@@ -0,0 +1,259 @@
+const baseResponse = (data, stage = "chooseReward", selectedItem = null, selectedStep = null, error = false, loading = false, fueltank = null) => ({
+  states: {
+    content: {
+      text: {
+        continueText: "Continue",
+        cancelText: "Cancel",
+        continueToConfirmationText: "Continue to confirmation",
+        backText: "Back",
+        redeemText: "Redeem",
+        doneText: "Done",
+        chooseRewardTitle: "Choose reward",
+        chooseAmountTitle: "Amount",
+        confirmationTitle: "Confirm",
+        redeemTitle: "Confirm and redeem",
+        rewardRedeemedText: "Reward redeemed",
+        queryError: "An error occured trying to redeem this reward. Please try again.",
+        notAvailableError: "{unavailableReason, select, US_TAX {US Tax limit} INSUFFICIENT_REDEEMABLE_CREDIT {Not enough points} other {Not available} }",
+      },
+    },
+    redeemStage: stage,
+    amount: 0,
+    exchangeError: error,
+    loading: loading,
+    selectedItem: selectedItem,
+    selectedStep: selectedStep,
+    open: false,
+  },
+  data: {
+    exchangeList: data,
+    fuelTankCode: fueltank,
+  },
+  callbacks: {
+    exchangeReward: null,
+    resetState: null,
+    setStage: null,
+    setExchangeState: null,
+    copyFuelTankCode: null,
+    refs: null,
+  },
+  refs: null,
+});
+const baseReward = {
+  key: "",
+  name: "",
+  description: "Description of reward. Lorem ipsum dolor sit amet, consectetur adipiscing. Id nec semper sapien dignissim rhoncus nunc.",
+  imageUrl: "",
+  available: true,
+  unavailableReason: null,
+  unavailableReasonCode: null,
+  ruleType: "FIXED_GLOBAL_REWARD",
+  sourceUnit: "POINT",
+  sourceValue: 10,
+  prettySourceValue: "10 SaaSquatch Points",
+  sourceMinValue: null,
+  prettySourceMinValue: null,
+  sourceMaxValue: null,
+  prettySourceMaxValue: null,
+  destinationMinValue: null,
+  prettyDestinationMinValue: null,
+  destinationMaxValue: null,
+  prettyDestinationMaxValue: null,
+  globalRewardKey: "",
+  destinationUnit: null,
+  steps: [],
+};
+const notEnoughPoints = {
+  available: false,
+  unavailableReasonCode: "INSUFFICIENT_REDEEMABLE_CREDIT",
+};
+const usTax = {
+  available: false,
+  unavailableReasonCode: "US_TAX",
+};
+const selected = {
+  key: "r1",
+};
+const imageUrl = (props) => ({
+  imageUrl: props,
+});
+const name = (props) => ({
+  name: props,
+});
+const description = (props) => ({
+  description: props,
+});
+const fixedValue = (props) => ({
+  prettySourceValue: props,
+});
+const variableValue = (min, max, unit) => ({
+  ruleType: "VARIABLE_CREDIT_REWARD",
+  sourceMinValue: min,
+  prettySourceMinValue: min + " " + unit,
+  sourceMaxValue: max,
+  prettySourceMaxValue: max + " " + unit,
+});
+const data = [
+  {
+    ...baseReward,
+    ...name("Free swag with a promo code"),
+    ...imageUrl("https://i.imgur.com/n7vC4BR.png"),
+    ...fixedValue("40 SaaSquatch Points"),
+  },
+  {
+    ...baseReward,
+    ...selected,
+    ...name("Visa® Prepaid Card USD"),
+    ...imageUrl("https://i.imgur.com/veHErQX.png"),
+    ...variableValue(20, 80, "Points"),
+  },
+  {
+    ...baseReward,
+    ...name("A very exclusive gift box"),
+    ...imageUrl("https://i.imgur.com/93BvEgH.png"),
+    ...fixedValue("30 SaaSquatch Points"),
+  },
+  {
+    ...baseReward,
+    ...name("$50 Store credit"),
+    ...imageUrl("https://i.imgur.com/WkCMVSE.png"),
+    ...fixedValue("100 SaaSquatch Points"),
+  },
+  {
+    ...baseReward,
+    ...name("Variable amount of store credit"),
+    ...imageUrl("https://i.imgur.com/Jn2fE0s.png"),
+    ...variableValue(20, 100, "Points"),
+  },
+  {
+    ...baseReward,
+    ...notEnoughPoints,
+    ...name("A very rare cactus"),
+    ...imageUrl("https://i.imgur.com/hhlF2Ey.png"),
+    ...fixedValue("2000 SaaSquatch Points"),
+  },
+  {
+    ...baseReward,
+    ...usTax,
+    ...name("$1000 Store credit with a really super long name in the front page"),
+    ...imageUrl("https://i.imgur.com/y9HSls1.png"),
+    ...fixedValue("2000 SaaSquatch Long Points"),
+  },
+  {
+    ...baseReward,
+    ...notEnoughPoints,
+    ...name("A holiday gift box"),
+    ...imageUrl("https://i.imgur.com/dWEdB3p.png"),
+    ...fixedValue("100 SaaSquatch Points"),
+  },
+];
+export const rewardExchange = {
+  ...baseResponse(data),
+};
+export const rewardExchangeSelected = {
+  ...baseResponse(data, "chooseReward", {
+    ...baseReward,
+    ...selected,
+    ...name("Visa® Prepaid Card USD"),
+    ...imageUrl("https://i.imgur.com/veHErQX.png"),
+    ...variableValue(20, 80, "Points"),
+  }),
+};
+const stepsData = (start, end, inc) => {
+  const steps = [];
+  for (let i = start; i <= end; i += inc) {
+    steps.push({
+      sourceValue: i,
+      prettySourceValue: i + " SaaSquatch Points",
+      destinationValue: i,
+      prettyDestinationValue: "$" + i,
+      available: true,
+      unavailableReasonCode: null,
+      unavailableReason: "",
+    });
+  }
+  return steps;
+};
+const baseStep = (dst, dstUnit, src, srcUnit, available = true) => ({
+  destinationValue: dst,
+  prettyDestinationValue: dstUnit + dst,
+  sourceValue: src,
+  prettySourceValue: src + " " + srcUnit,
+  available: available,
+  unavailableReasonCode: null,
+  unavailableReason: "",
+});
+export const chooseAmountVariable = {
+  ...baseResponse(data, "chooseAmount", {
+    ...baseReward,
+    ...name("Visa® Prepaid Card USD"),
+    ...imageUrl("https://i.imgur.com/veHErQX.png"),
+    ...variableValue(20, 80, "Points"),
+    steps: [
+      baseStep(20, "$", 40, "Points"),
+      baseStep(30, "$", 60, "Points"),
+      baseStep(40, "$", 80, "Points"),
+      baseStep(50, "$", 100, "Points"),
+      baseStep(60, "$", 120, "Points"),
+    ],
+  }),
+};
+export const chooseAmountFixed = {
+  ...baseResponse(data, "chooseAmount", {
+    ...baseReward,
+    ...name("Free swag with a promo code"),
+    ...imageUrl("https://i.imgur.com/n7vC4BR.png"),
+    ...fixedValue("40 SaaSquatch Points"),
+  }),
+};
+export const confirmFixed = {
+  ...baseResponse(data, "confirmation", {
+    ...baseReward,
+    ...name("A very exclusive gift box"),
+    ...imageUrl("https://i.imgur.com/93BvEgH.png"),
+    ...fixedValue("30 SaaSquatch Points"),
+  }),
+};
+export const confirmVariable = {
+  ...baseResponse(data, "confirmation", {
+    ...baseReward,
+    ...name("Visa® Prepaid Card USD"),
+    ...imageUrl("https://i.imgur.com/veHErQX.png"),
+    ...variableValue(20, 80, "Points"),
+  }, baseStep(20, "$", 40, "Points")),
+};
+export const error = {
+  ...baseResponse(data, "confirmation", {
+    ...baseReward,
+    ...name("Visa® Prepaid Card USD"),
+    ...imageUrl("https://i.imgur.com/veHErQX.png"),
+    ...variableValue(20, 80, "Points"),
+  }, baseStep(20, "$", 40, "Points"), true),
+};
+export const success = {
+  ...baseResponse(data, "success", {
+    ...baseReward,
+    ...name("A very exclusive gift box"),
+    ...imageUrl("https://i.imgur.com/93BvEgH.png"),
+    ...fixedValue("30 SaaSquatch Points"),
+  }),
+};
+export const success2 = {
+  ...baseResponse(data, "success", {
+    ...baseReward,
+    ...name("Visa® Prepaid Card USD"),
+    ...imageUrl("https://i.imgur.com/93BvEgH.png"),
+    ...variableValue(20, 80, "Points"),
+  }, baseStep(20, "$", 40, "Points")),
+};
+export const success3 = {
+  ...baseResponse(data, "success", {
+    ...baseReward,
+    ...name("A very exclusive gift box"),
+    ...imageUrl("https://i.imgur.com/93BvEgH.png"),
+    ...fixedValue("30 SaaSquatch Points"),
+  }, undefined, undefined, undefined, "4ah2-hh46-gk7r"),
+};
+export const loading = {
+  ...baseResponse(null, "chooseReward", null, null, false, true),
+};

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

@@ -0,0 +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" })))));

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 })))));
+}