@saasquatch/mint-components 1.3.1-4 → 1.3.2-0

package/dist/collection/{stories → components/sqm-big-stat}/UseBigStat.stories.js

@@ -1,9 +1,9 @@
 import { h } from "@stencil/core";
-import { BigStatView } from "../components/sqm-big-stat/sqm-big-stat-view";
-import { useDemoBigStat } from "../components/sqm-big-stat/useDemoBigStat";
-import { useBigStat } from "../components/sqm-big-stat/useBigStat";
+import { BigStatView } from "./sqm-big-stat-view";
+import { useDemoBigStat } from "./useDemoBigStat";
+import { useBigStat } from "./useBigStat";
 import { useState } from "@saasquatch/stencil-hooks";
-import { createHookStory } from "../components/sqm-stencilbook/HookStoryAddon";
+import { createHookStory } from "../sqm-stencilbook/HookStoryAddon";
 import { useEffect } from "@saasquatch/universal-hooks";
 import { setUserIdentity } from "@saasquatch/component-boilerplate";
 export default {

package/dist/collection/components/sqm-big-stat/sqm-big-stat.js

@@ -100,26 +100,6 @@ export class BigStat {
       "attribute": "alignment",
       "reflect": false
     },
-    "programId": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [{
-            "text": "Program ID",
-            "name": "uiName"
-          }],
-        "text": "The ID of the program that is used to scope stats. Defaults to the program ID in context where this widget is loaded."
-      },
-      "attribute": "program-id",
-      "reflect": false
-    },
     "demoData": {
       "type": "unknown",
       "mutable": false,

package/dist/collection/components/sqm-big-stat/useBigStat.js

@@ -473,7 +473,8 @@ export const StatPaths = [
 ];
 export const StatPatterns = StatPaths.map((pattern) => pathToRegexp(pattern.route));
 export function useBigStat(props) {
-  const { statType, flexReverse, alignment, programId = useProgramId(), } = props;
+  const { statType, flexReverse, alignment } = props;
+  const programId = useProgramId();
   const locale = useLocale();
   const userIdent = useUserIdentity();
   const re = useMemo(() => StatPatterns.find((re) => re.exec(statType)), [statType]);

package/dist/collection/{stories → components/sqm-divided-layout}/DividedLayout.stories.js

@@ -1,9 +1,9 @@
 import { h } from "@stencil/core";
-import { NavigationSidebarItemView } from "../components/sqm-navigation-sidebar-item/sqm-navigation-sidebar-item-view";
-import { NavigationSidebarView } from "../components/sqm-navigation-sidebar/sqm-navigation-sidebar-view";
-import { PortalSectionView } from "../components/sqm-titled-section/sqm-portal-section-view";
+import { NavigationSidebarItemView } from "../sqm-navigation-sidebar-item/sqm-navigation-sidebar-item-view";
+import { NavigationSidebarView } from "../sqm-navigation-sidebar/sqm-navigation-sidebar-view";
+import { PortalSectionView } from "../sqm-titled-section/sqm-portal-section-view";
 export default {
-  title: "Divided Layout",
+  title: "Components/Divided Layout",
 };
 const barProps = {
   data: {

package/dist/collection/{stories → components/sqm-edit-profile}/EditProfileForm.stories.js

@@ -1,7 +1,7 @@
 import { h } from "@stencil/core";
-import EditProfileView from "../components/sqm-edit-profile/sqm-edit-profile-view";
+import EditProfileView from "./sqm-edit-profile-view";
 export default {
-  title: "Edit Profile Form",
+  title: "Components/Edit Profile Form",
 };
 const defaultProps = {
   states: {

package/dist/collection/{stories → components/sqm-edit-profile}/UseEditProfile.stories.js

@@ -1,7 +1,7 @@
 import { setUserIdentity } from "@saasquatch/component-boilerplate";
 import { useEffect } from "@saasquatch/universal-hooks";
 import { h } from "@stencil/core";
-import { createHookStory } from "../components/sqm-stencilbook/HookStoryAddon";
+import { createHookStory } from "../sqm-stencilbook/HookStoryAddon";
 function setupGraphQL() {
   const id = "worried-camera@uexwltgh.mailosaur.net";
   const accountId = id;

package/dist/collection/{stories → components/sqm-form-message}/FormMessage.stories.js

@@ -1,6 +1,6 @@
 import { h } from "@stencil/core";
 export default {
-  title: "Form Message",
+  title: "Components/Form Message",
 };
 export const SuccessAlert = () => {
   return (h("sqm-form-message", { type: "success" },

package/dist/collection/{stories → components/sqm-hero}/Hero.stories.js

@@ -1,6 +1,6 @@
 import { h } from "@stencil/core";
-import { HeroView } from "../components/sqm-hero/sqm-hero-view";
-import scenario from "../components/sqm-hero/sqm-hero.feature";
+import { HeroView } from "./sqm-hero-view";
+import scenario from "../sqm-hero/sqm-hero.feature";
 export default {
   title: "Hero Layout",
   parameters: {

package/dist/collection/{stories → components/sqm-leaderboard}/Leaderboard.stories.js

@@ -1,7 +1,7 @@
 import { h } from "@stencil/core";
-import { LeaderboardView } from "../components/sqm-leaderboard/sqm-leaderboard-view";
+import { LeaderboardView } from "./sqm-leaderboard-view";
 export default {
-  title: "Leaderboard",
+  title: "Components/Leaderboard",
   parameters: {
     tagname: "sqm-leaderboard",
   },

package/dist/collection/{stories → components/sqm-leaderboard}/UseLeaderboard.stories.js

@@ -1,7 +1,7 @@
 import { h } from "@stencil/core";
-import { createHookStory } from "../components/sqm-stencilbook/HookStoryAddon";
-import { useLeaderboard, } from "../components/sqm-leaderboard/useLeaderboard";
-import { LeaderboardView } from "../components/sqm-leaderboard/sqm-leaderboard-view";
+import { createHookStory } from "../sqm-stencilbook/HookStoryAddon";
+import { useLeaderboard, } from "./useLeaderboard";
+import { LeaderboardView } from "./sqm-leaderboard-view";
 import { useEffect } from "@saasquatch/universal-hooks";
 import { setUserIdentity } from "@saasquatch/component-boilerplate";
 export default {

package/dist/collection/{stories → components/sqm-leaderboard-rank}/LeaderboardRank.stories.js

@@ -1,7 +1,7 @@
 import { h } from "@stencil/core";
-import { LeaderboardRankView } from "../components/sqm-leaderboard-rank/sqm-leaderboard-rank-view";
+import { LeaderboardRankView } from "./sqm-leaderboard-rank-view";
 export default {
-  title: "Leaderboard Rank",
+  title: "Components/Leaderboard Rank",
 };
 export const First = () => {
   const props = { data: { rank: "1st" } };

package/dist/collection/{stories → components/sqm-name-fields}/NameFields.stories.js

@@ -1,6 +1,6 @@
 import { h } from "@stencil/core";
-import { NameFieldsView, } from "../components/sqm-name-fields/sqm-name-fields-view";
-import scenario from "../components/sqm-name-fields/sqm-name-fields.feature";
+import { NameFieldsView, } from "./sqm-name-fields-view";
+import scenario from "../sqm-name-fields/sqm-name-fields.feature";
 export default {
   title: "Name Fields",
   parameters: {

package/dist/collection/{stories → components/sqm-navigation-sidebar}/NavigationSidebar.stories.js

@@ -1,8 +1,8 @@
 import { h } from "@stencil/core";
-import { NavigationSidebarView } from "../components/sqm-navigation-sidebar/sqm-navigation-sidebar-view";
-import { NavigationSidebarItemView } from "../components/sqm-navigation-sidebar-item/sqm-navigation-sidebar-item-view";
+import { NavigationSidebarView } from "./sqm-navigation-sidebar-view";
+import { NavigationSidebarItemView } from "../sqm-navigation-sidebar-item/sqm-navigation-sidebar-item-view";
 export default {
-  title: "Navigation Sidebar",
+  title: "Components/Navigation Sidebar",
 };
 export const DefaultNavigationSidebar = () => {
   const barProps = {

package/dist/collection/{stories → components/sqm-navigation-sidebar-item}/SidebarItem.stories.js

@@ -1,7 +1,7 @@
 import { h } from "@stencil/core";
-import { NavigationSidebarItemView } from "../components/sqm-navigation-sidebar-item/sqm-navigation-sidebar-item-view";
+import { NavigationSidebarItemView } from "./sqm-navigation-sidebar-item-view";
 export default {
-  title: "Sidebar Item",
+  title: "Components/Sidebar Item",
 };
 export const InactiveItem = () => {
   const props = {

package/dist/collection/{stories → components/sqm-password-field}/PasswordField.stories.js

@@ -1,6 +1,6 @@
 import { h } from "@stencil/core";
 export default {
-  title: "Portal Password Field",
+  title: "Components/Portal Password Field",
 };
 export const Start = () => {
   return (h("sqm-password-field", { demoData: {

package/dist/collection/{stories → components/sqm-portal-change-password}/ChangePassword.stories.js

@@ -1,8 +1,8 @@
 import { h } from "@stencil/core";
-import { PortalChangePasswordView } from "../components/sqm-portal-change-password/sqm-portal-change-password-view";
-import scenario from "../components/sqm-portal-change-password/sqm-portal-change-password.feature";
+import { PortalChangePasswordView } from "./sqm-portal-change-password-view";
+import scenario from "./sqm-portal-change-password.feature";
 export default {
-  title: "Change Password",
+  title: "Components/Change Password",
   parameters: {
     scenario,
   },

package/dist/collection/{stories → components/sqm-portal-email-verification}/PortalEmailVerification.stories.js

@@ -1,8 +1,8 @@
 import { h } from "@stencil/core";
-import { PortalEmailVerificationView, } from "../components/sqm-portal-email-verification/sqm-portal-email-verification-view";
-import scenario from "../components/sqm-portal-email-verification/sqm-portal-email-verification.feature";
+import { PortalEmailVerificationView, } from "./sqm-portal-email-verification-view";
+import scenario from "./sqm-portal-email-verification.feature";
 export default {
-  title: "Portal Email Verification",
+  title: "Components/Portal Email Verification",
   parameters: {
     scenario,
   },

package/dist/collection/{stories → components/sqm-portal-footer}/PortalFooter.stories.js

@@ -1,6 +1,6 @@
 import { h } from "@stencil/core";
-import { PortalFooterView } from "../components/sqm-portal-footer/sqm-portal-footer-view";
-import scenario from "../components/sqm-portal-footer/sqm-portal-footer.feature";
+import { PortalFooterView } from "./sqm-portal-footer-view";
+import scenario from "../sqm-portal-footer/sqm-portal-footer.feature";
 export default {
   title: "Portal Footer",
   parameters: {

package/dist/collection/{stories → components/sqm-portal-forgot-password}/PortalForgotPassword.stories.js

@@ -1,8 +1,8 @@
 import { h } from "@stencil/core";
-import { PortalForgotPasswordView, } from "../components/sqm-portal-forgot-password/sqm-portal-forgot-password-view";
-import scenario from "../components/sqm-portal-forgot-password/sqm-portal-forgot-password.feature";
+import { PortalForgotPasswordView, } from "./sqm-portal-forgot-password-view";
+import scenario from "./sqm-portal-forgot-password.feature";
 export default {
-  title: "Portal Forgot Password",
+  title: "Components/Portal Forgot Password",
   parameters: {
     scenario,
   },

package/dist/collection/{stories → components/sqm-portal-frame}/PortalFrame.stories.js

@@ -1,6 +1,6 @@
 import { navigation, useCurrentPage } from "@saasquatch/component-boilerplate";
 import { h } from "@stencil/core";
-import { PortalFrameView } from "../components/sqm-portal-frame/sqm-portal-frame-view";
+import { PortalFrameView } from "./sqm-portal-frame-view";
 function setupGraphQL() {
   const id = "worried-camera@uexwltgh.mailosaur.net";
   const accountId = id;
@@ -32,7 +32,7 @@ function setupLoggedOut() {
   };
 }
 export default {
-  title: "Portal Frame",
+  title: "Components/Portal Frame",
 };
 const defaultProps = {
   data: {

package/dist/collection/{stories → components/sqm-portal-login}/PortalLogin.stories.js

@@ -1,7 +1,7 @@
 import { h } from "@stencil/core";
-import { PortalLoginView, } from "../components/sqm-portal-login/sqm-portal-login-view";
+import { PortalLoginView, } from "./sqm-portal-login-view";
 export default {
-  title: "Portal Login",
+  title: "Components/Portal Login",
 };
 const defaultProps = {
   states: {

package/dist/collection/{stories → components/sqm-portal-profile}/PortalProfile.stories.js

@@ -1,9 +1,9 @@
 import { h } from "@stencil/core";
 import jss from "jss";
 import preset from "jss-preset-default";
-import { PortalProfileView, } from "../components/sqm-portal-profile/sqm-portal-profile-view";
+import { PortalProfileView, } from "./sqm-portal-profile-view";
 export default {
-  title: "Portal Profile",
+  title: "Components/Portal Profile",
 };
 // const style = {};
 jss.setup(preset());

package/dist/collection/{stories → components/sqm-portal-register}/PortalRegister.stories.js

@@ -1,7 +1,7 @@
 import { h } from "@stencil/core";
-import { PortalRegisterView, } from "../components/sqm-portal-register/sqm-portal-register-view";
+import { PortalRegisterView, } from "./sqm-portal-register-view";
 export default {
-  title: "Portal Register",
+  title: "Components/Portal Register",
 };
 const defaultProps = {
   states: {

package/dist/collection/components/sqm-portal-register/sqm-portal-register.js

@@ -287,7 +287,7 @@ export class PortalRegister {
       "mutable": false,
       "complexType": {
         "original": "DemoData<PortalRegisterViewProps>",
-        "resolved": "{ states?: { error: string; loading: boolean; confirmPassword: boolean; hideInputs: boolean; validationState?: FormState; enablePasswordValidation?: boolean; }; content?: { formData?: any; passwordField?: any; secondaryButton?: any; emailLabel?: string; passwordLabel?: string; submitLabel?: string; pageLabel?: string; confirmPasswordLabel: string; }; refs?: { formRef: any; }; }",
+        "resolved": "{ 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; }; }",
         "references": {
           "DemoData": {
             "location": "import",

package/dist/collection/{stories → components/sqm-portal-reset-password}/PortalResetPassword.stories.js

@@ -1,8 +1,8 @@
 import { h } from "@stencil/core";
-import { PortalResetPasswordView, } from "../components/sqm-portal-reset-password/sqm-portal-reset-password-view";
-import scenario from "../components/sqm-portal-reset-password/sqm-portal-reset-password.feature";
+import { PortalResetPasswordView, } from "./sqm-portal-reset-password-view";
+import scenario from "./sqm-portal-reset-password.feature";
 export default {
-  title: "Portal Reset Password",
+  title: "Components/Portal Reset Password",
   parameters: {
     scenario,
   },

package/dist/collection/{stories → components/sqm-portal-verify-email}/PortalVerifyEmail.stories.js

@@ -1,8 +1,8 @@
 import { h } from "@stencil/core";
-import { PortalVerifyEmailView, } from "../components/sqm-portal-verify-email/sqm-portal-verify-email-view";
-import scenario from "../components/sqm-portal-verify-email/sqm-portal-verify-email.feature";
+import { PortalVerifyEmailView, } from "./sqm-portal-verify-email-view";
+import scenario from "./sqm-portal-verify-email.feature";
 export default {
-  title: "Portal Verify Email",
+  title: "Components/Portal Verify Email",
   parameters: {
     scenario,
   },

package/dist/collection/{stories → components/sqm-program-menu}/ProgramMenu.stories.js

@@ -1,6 +1,6 @@
 import { h } from "@stencil/core";
-import { createHookStory } from "../components/sqm-stencilbook/HookStoryAddon";
-import dashboardTemplate from "../templates/Dashboard.html";
+import { createHookStory } from "../sqm-stencilbook/HookStoryAddon";
+import dashboardTemplate from "../../templates/Dashboard.html";
 export default {
   title: "Program Menu",
 };

package/dist/collection/{stories → components/sqm-referral-iframe}/ReferralIframe.stories.js

@@ -1,6 +1,6 @@
 import { h } from "@stencil/core";
-import { ReferralIframeView, } from "../components/sqm-referral-iframe/sqm-referral-iframe-view";
-import scenario from "../components/sqm-referral-iframe/sqm-referral-iframe.feature";
+import { ReferralIframeView, } from "./sqm-referral-iframe-view";
+import scenario from "../sqm-referral-iframe/sqm-referral-iframe.feature";
 export default {
   title: "Referral Iframe",
   parameters: {

package/dist/collection/{stories → components/sqm-referral-table}/ReferralTable.stories.js

@@ -1,8 +1,8 @@
 import { h } from "@stencil/core";
-import { ReferralTableView } from "../components/sqm-referral-table/sqm-referral-table-view";
+import { ReferralTableView } from "./sqm-referral-table-view";
 import { AvailableNoExpiry, Cancelled, PendingNoUnpend, } from "./ReferralTableRewardsCell.stories";
 export default {
-  title: "Referral Table",
+  title: "Components/Referral Table",
 };
 const loadingElement = (h("div", { slot: "loading", style: { display: "contents" } },
   h("sqm-table-row", null,

package/dist/collection/{stories → components/sqm-referral-table}/ReferralTableCell.stories.js

@@ -1,6 +1,6 @@
 import { h } from "@stencil/core";
 export default {
-  title: "Referral Table Cell",
+  title: "Components/Referral Table Cell",
 };
 export const TableCell = () => {
   return (h("sqm-referral-table-cell", { innerTemplate: "Table Cell Text" }));

package/dist/collection/{stories → components/sqm-referral-table}/ReferralTableRewardsCell.stories.js

@@ -1,7 +1,7 @@
 import { h } from "@stencil/core";
 import { DateTime } from "luxon";
 export default {
-  title: "Referral Table Rewards Cell",
+  title: "Components/Referral Table Rewards Cell",
 };
 const baseReward = {
   id: "123",

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

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

package/dist/collection/components/sqm-referral-table/columns/sqm-referral-table-date-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 Date Column
  */

package/dist/collection/components/sqm-referral-table/columns/sqm-referral-table-rewards-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 Rewards Column
  */

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/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/assets/Leftward Arrow.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<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"/>
+</svg>