@saasquatch/mint-components 1.15.0-16 → 1.15.0-160

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

@@ -19,21 +19,28 @@ const style = {
     margin: "0 auto",
   },
   Select: {
+    "&::part(base)": {
+      borderRadius: "var(--sqm-input-border-radius)",
+    },
     "&::part(label)": {
-    //   color: "var(--sl-color-primary-500)",
+      color: "var(--sqm-input-label-color)",
     },
     "&::part(menu)": {
       maxHeight: "450px",
     },
     "& sl-menu-item::part(checked-icon)": {
       top: "8px",
+      color: "var(--sqm-text)",
     },
     "& sl-menu-item::part(base)": {
       flexDirection: "column",
+      color: "var(--sqm-input-color)"
+    },
+    "& sl-menu-item::part(base):hover": {
+      backgroundColor: "var(--sqm-input-border-color-hover)",
     },
     "& sl-menu-item::part(base):focus": {
-      background: "transparent",
-      color: "var(--sl-color-gray-700)",
+      background: "var(--sqm-accent-color-background)",
     },
   },
   ProgressBar: {
@@ -53,7 +60,7 @@ const style = {
         flex: "1 1 0",
       },
       "& .text.subdued": {
-        color: "var(--sl-color-neutral-200)",
+        color: "var(--sqm-text-subdued)",
       },
     },
   },
@@ -68,6 +75,9 @@ const style = {
     userSelect: "none",
     height: "120px",
     "&::part(base)": {
+      background: "var(--sqm-portal-background)",
+      border: "var(--sqm-border-thickness) solid var(--sqm-border-color)",
+      borderRadius: "var(--sqm-border-radius-normal)",
       boxShadow: "none",
       width: "100%",
     },
@@ -76,10 +86,11 @@ const style = {
       padding: 0,
     },
     "& .selected": {
+      borderRadius: "var(--sqm-border-radius-normal)",
       position: "relative",
       top: "-2%",
       left: "100%",
-      color: "var(--sl-color-primary-500)",
+      color: "var(--sqm-primary-color)",
       margin: "-9px",
     },
   },
@@ -111,7 +122,7 @@ const style = {
       fontSize: "var(--sl-font-size-medium)",
       lineHeight: "var(--sl-line-height-dense)",
       fontWeight: "600",
-      color: "var(--sl-color-neutral-1000)",
+      color: "var(--sqm-text)",
       display: "-webkit-box",
       "-webkit-line-clamp": "1",
       "-webkit-box-orient": "vertical",
@@ -121,7 +132,7 @@ const style = {
       fontSize: "var(--sl-font-size-small)",
       lineHeight: "var(--sl-line-height-dense)",
       marginTop: "var(--sl-spacing-x-small)",
-      color: "var(--sl-color-neutral-500)",
+      color: "var(--sqm-text-subdued)",
       display: "-webkit-box",
       "-webkit-line-clamp": "1",
       "-webkit-box-orient": "vertical",
@@ -132,7 +143,7 @@ const style = {
       lineHeight: "var(--sl-line-height-dense)",
       marginTop: "var(--sl-spacing-x-small)",
       fontWeight: "600",
-      color: "var(--sl-color-warning-600)",
+      color: "var(--sqm-warning-color-icon)",
       display: "-webkit-box",
       "-webkit-line-clamp": "1",
       "-webkit-box-orient": "vertical",
@@ -167,7 +178,6 @@ const style = {
     "& .text": {
       width: "50%",
       maxWidth: "400px",
-      //   minWidth: "330px",
       "@media (max-width: 799px)": {
         width: "auto",
         margin: "auto",
@@ -176,17 +186,17 @@ const style = {
     "& .title": {
       fontSize: "var(--sl-font-size-large)",
       fontWeight: "var(--sl-font-weight-semibold)",
-      color: "var(--sl-color-neutral-1000)",
+      color: "var(--sqm-text)",
     },
     "& .points": {
       fontSize: "var(--sl-font-size-large)",
       fontWeight: "var(--sl-font-weight-semibold)",
-      color: "var(--sl-color-primary-500)",
+      color: "var(--sqm-accent-color-text)",
     },
     "& .description": {
       fontSize: "var(--sl-font-size-medium)",
       fontWeight: "var(--sl-font-weight-normal)",
-      color: "var(--sl-color-neutral-500)",
+      color: "var(--sqm-text-subdued)",
       margin: "var(--sl-spacing-medium) 0",
       lineHeight: "var(--sl-line-height-dense)",
       marginTop: "var(--sl-spacing-xx-small)",
@@ -195,14 +205,14 @@ const style = {
       marginBottom: "var(--sl-spacing-xxx-large)",
     },
     "& sl-menu-item[disabled]::part(label)": {
-      color: "var(--sl-color-neutral-300)",
+      color: "var(sqm-text-subdued)",
     },
     "& sl-menu-item[disabled]": {
       "& .step-cost": {
-        color: "var(--sl-color-neutral-300)",
+        color: "var(sqm-text-subdued)",
       },
       "& .step-value": {
-        color: "var(--sl-color-neutral-300)",
+        color: "var(sqm-text-subdued)",
       },
     },
   },
@@ -210,16 +220,16 @@ const style = {
     display: "flex",
     flexDirection: "column",
     "&::part(label)": {
-      color: "var(--sl-color-neutral-900)",
+      color: "var(--sqm-text)",
       margin: "0",
     },
     "& .step-cost": {
-      color: "var(--sl-color-neutral-500)",
+      color: "var(--sqm-text-subdued)",
       marginBottom: "var(--sl-spacing-x-small)",
     },
     "& .step-unavailable": {
       fontSize: "var(--sl-font-size-small)",
-      color: "var(--sl-color-warning-500)",
+      color: "var(--sqm-warning-color-text)",
       margin: "0",
     },
   },
@@ -228,10 +238,10 @@ const style = {
     "& .title": {
       fontSize: "var(--sl-font-size-large)",
       fontWeight: "var(--sl-font-weight-semibold)",
-      color: "var(--sl-color-neutral-1000)",
+      color: "var(--sqm-text)",
     },
     "& .description": {
-      color: "var(--sl-color-neutral-400)",
+      color: "var(--sqm-text-subued)",
       maxWidth: "350px",
       margin: "0 auto",
       lineHeight: "var(--sl-line-height-dense)",
@@ -242,7 +252,7 @@ const style = {
       maxWidth: "350px",
       margin: "-30px auto var(--sl-spacing-xxx-large) auto",
       textAlign: "left",
-      color: "var(--sl-color-neutral-700)",
+      color: "var(--sqm-text-subdued)",
     },
   },
   Grid: {
@@ -284,10 +294,9 @@ const style = {
     },
     "& .field": {
       width: "30%",
-      textTransform: "uppercase",
       fontSize: "var(--sl-font-size-medium)",
       fontWeight: "var(--sl-font-weight-normal)",
-      color: "var(--sl-color-neutral-400)",
+      color: "var(--sqm-text-subdued)",
       textAlign: "left",
       paddingRight: "var(--sl-spacing-xxx-large)",
       "@media (max-width: 499px)": {
@@ -301,7 +310,7 @@ const style = {
       fontWeight: "var(--sl-font-weight-semibold)",
     },
     "& .top-border": {
-      borderTop: "1px solid var(--sl-color-neutral-200)",
+      borderTop: "var(--sqm-border-thickness) solid var(--sqm-border-color)",
     },
     "& .image": {
       width: "200px",
@@ -317,10 +326,6 @@ const style = {
     "& .cancel": {
       marginLeft: "auto",
       marginRight: "var(--sl-spacing-medium)",
-      "&::part(base)": {
-        fontWeight: "var(--sl-font-weight-normal)",
-        color: "var(--sl-color-neutral-1000)",
-      },
       "@media (max-width: 499px)": {
         width: "100%",
         marginRight: "0",
@@ -328,12 +333,6 @@ const style = {
       },
     },
     "& .continue": {
-      "&::part(base)": {
-        background: "var(--sl-color-primary-500)",
-        borderColor: "var(--sl-color-primary-500)",
-        fontWeight: "var(--sl-font-weight-normal)",
-        color: "var(--sl-color-neutral-0)",
-      },
       "@media (max-width: 499px)": {
         width: "100%",
       },
@@ -412,9 +411,10 @@ export function RewardExchangeView(props) {
           var _a, _b, _c, _d, _e;
           const style = {
             boxShadow: item.key === (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.key)
-              ? "0 0 0 2px var(--sl-color-primary-500)"
+              ? "0 0 0 2px var(--sqm-primary-color)"
               : "none",
-            borderRadius: "4px",
+            borderRadius: "var(--sqm-border-radius-normal)",
+            borderColor: "none",
           };
           return (h("div", { key: item.key, style: style },
             h("sl-card", { exportparts: "base: exchange-card-container", class: sheet.classes.Card, style: {
@@ -475,7 +475,7 @@ export function RewardExchangeView(props) {
                     }))))))));
         }))),
         h("div", { class: sheet.classes.Button },
-          h("sl-button", { exportparts: "base: primarybutton-base", class: "continue right", size: "large", onClick: () => callbacks.setStage("chooseAmount"), loading: states.loading, disabled: !states.selectedItem }, states.content.text.continueText))),
+          h("sl-button", { exportparts: "base: primarybutton-base", type: "primary", class: "continue right", size: "large", onClick: () => callbacks.setStage("chooseAmount"), loading: states.loading, disabled: !states.selectedItem }, states.content.text.continueText))),
     ];
   }
   function chooseAmount() {
@@ -495,11 +495,11 @@ export function RewardExchangeView(props) {
             ((_d = states.selectedItem) === null || _d === void 0 ? void 0 : _d.ruleType) === "FIXED_GLOBAL_REWARD" ? (h("div", { class: "description" }, selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.description)) : (h("div", null, input)),
             h("div", { class: "space" }))),
         h("div", { class: sheet.classes.Button },
-          h("sl-button", { exportparts: "base: secondarybutton-base", class: "cancel", size: "large", type: "text", onClick: () => callbacks.resetState() }, states.content.text.cancelText),
-          h("sl-button", { exportparts: "base: primarybutton-base", class: "continue", size: "large", onClick: () => callbacks.setStage("confirmation"), disabled: isDisabled }, states.content.text.continueToConfirmationText)))));
+          h("sl-button", { exportparts: "base: secondarybutton-base", class: "cancel", size: "large", type: "secondary", onClick: () => callbacks.resetState() }, states.content.text.cancelText),
+          h("sl-button", { exportparts: "base: primarybutton-base", class: "continue", size: "large", type: "primary", onClick: () => callbacks.setStage("confirmation"), disabled: isDisabled }, states.content.text.continueToConfirmationText)))));
   }
   function confirmation() {
-    const cost = (selectedStep === null || selectedStep === void 0 ? void 0 : selectedStep.prettySourceValue) || selectedItem.prettySourceValue;
+    const cost = (selectedStep === null || selectedStep === void 0 ? void 0 : selectedStep.prettySourceValue) || (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.prettySourceValue);
     const amount = selectedStep === null || selectedStep === void 0 ? void 0 : selectedStep.prettyDestinationValue;
     return (h("div", null,
       h("div", { class: sheet.classes.Confirmation, part: "confirmation-container" },
@@ -507,7 +507,7 @@ export function RewardExchangeView(props) {
         h("div", { class: "wrapper" },
           h("div", { class: "field" }, states.content.text.rewardNameTitle),
           h("div", { class: "reward-item-container" },
-            h("div", { class: "reward-title" }, selectedItem.name),
+            h("div", { class: "reward-title" }, selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.name),
             h("img", { class: "image", src: (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.imageUrl) ||
                 getAssetPath("./assets/Reward-image.png") }))),
         h("div", { class: "wrapper padding" },
@@ -519,11 +519,11 @@ export function RewardExchangeView(props) {
           h("div", { class: "field" }, states.content.text.costTitle),
           h("div", { class: "value" }, cost)),
         h("div", { class: sheet.classes.Button },
-          h("sl-button", { class: "cancel", type: "text", size: "large", onClick: () => callbacks.setStage("chooseAmount") }, states.content.text.backText),
-          h("sl-button", { class: "continue", size: "large", loading: states.loading, onClick: callbacks.exchangeReward }, states.content.text.redeemText)))));
+          h("sl-button", { class: "cancel", type: "secondary", size: "large", onClick: () => callbacks.setStage("chooseAmount") }, states.content.text.backText),
+          h("sl-button", { class: "continue", size: "large", type: "primary", loading: states.loading, onClick: callbacks.exchangeReward }, states.content.text.redeemText)))));
   }
   function success() {
-    var _a, _b, _c, _d, _e, _f;
+    var _a, _b, _c, _d, _e, _f, _g, _h;
     return (h("div", { class: sheet.classes.Success, part: "success-container" },
       h(Gift, null),
       h(Confetti, null),
@@ -532,13 +532,12 @@ export function RewardExchangeView(props) {
         id: "successMessage",
         defaultMessage: states.content.text.redemptionSuccessText,
       }, {
-        sourceValue: (_b = states.selectedItem.prettySourceValue) !== null && _b !== void 0 ? _b : (_c = states.selectedStep) === null || _c === void 0 ? void 0 : _c.prettySourceValue,
-        destinationValue: ((_d = states.selectedStep) === null || _d === void 0 ? void 0 : _d.prettyDestinationValue) || ((_e = states.selectedItem) === null || _e === void 0 ? void 0 : _e.name) ||
-          states.selectedItem.globalRewardKey,
+        sourceValue: (_c = (_b = states.selectedItem) === null || _b === void 0 ? void 0 : _b.prettySourceValue) !== null && _c !== void 0 ? _c : (_d = states.selectedStep) === null || _d === void 0 ? void 0 : _d.prettySourceValue,
+        destinationValue: ((_e = states.selectedStep) === null || _e === void 0 ? void 0 : _e.prettyDestinationValue) || ((_f = states.selectedItem) === null || _f === void 0 ? void 0 : _f.name) || ((_g = states.selectedItem) === null || _g === void 0 ? void 0 : _g.globalRewardKey),
       })),
       (data === null || data === void 0 ? void 0 : data.fuelTankCode) && (h("div", { class: "promo" },
         states.content.text.promoCode,
-        h(CopyTextView, { copyString: data.fuelTankCode, tooltiptext: (_f = states === null || states === void 0 ? void 0 : states.content) === null || _f === void 0 ? void 0 : _f.text.tooltipText, open: states.open, onClick: callbacks.copyFuelTankCode }))),
+        h(CopyTextView, { copyString: data.fuelTankCode, tooltiptext: (_h = states === null || states === void 0 ? void 0 : states.content) === null || _h === void 0 ? void 0 : _h.text.tooltipText, open: states.open, onClick: callbacks.copyFuelTankCode }))),
       h("div", { class: sheet.classes.Button },
         h("sl-button", { class: "continue center", type: "primary", size: "large", onClick: () => callbacks.resetState(true) }, states.content.text.doneText))));
   }
@@ -572,7 +571,7 @@ export function RewardExchangeView(props) {
                   width: "100px",
                   height: "100px",
                   margin: "9px",
-                  "--border-radius": "4px",
+                  "--border-radius": "var(--sqm-border-radius-normal)",
                 } })),
             h("div", { style: {
                 margin: "var(--sl-spacing-small) var(--sl-spacing-small) 0 0",

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

@@ -1,11 +1,12 @@
-import { Component, h, Host, Prop, State } from "@stencil/core";
-import { withHooks } from "@saasquatch/stencil-hooks";
-import { useRewardExchangeList, } from "./useRewardExchangeList";
-import { RewardExchangeView, } from "./sqm-reward-exchange-list-view";
 import { isDemo } from "@saasquatch/component-boilerplate";
+import { withHooks } from "@saasquatch/stencil-hooks";
+import { Component, h, Host, Prop, State } from "@stencil/core";
 import deepmerge from "deepmerge";
+import { parseStates } from "../../utils/parseStates";
 import { getProps } from "../../utils/utils";
 import { demoRewardExchange } from "./RewardExchangeListData";
+import { RewardExchangeView, } from "./sqm-reward-exchange-list-view";
+import { useRewardExchangeList, } from "./useRewardExchangeList";
 /**
  * @uiName Reward Exchange
  * @validParents ["sqm-portal-container","div","sqm-divided-layout","sqm-brand","template","sqm-hero","sqm-tab","sqb-program-section","sqb-conditional-section"]
@@ -147,6 +148,13 @@ export class SqmRewardExchangeList {
      * @uiName Cost row title
      */
     this.costTitle = "Cost to Redeem";
+    /**
+     * @componentState { "title": "Choose reward", "props": { "states": { "redeemStage": "chooseReward" } }, "dependencies": ["sqm-reward-exchange-list"] }
+     * @componentState { "title": "Reward details", "props": { "states": { "redeemStage": "chooseAmount" } }, "dependencies": ["sqm-reward-exchange-list"] }
+     * @componentState { "title": "Confirm exchange", "props": { "states": { "redeemStage": "confirmation" } }, "dependencies": ["sqm-reward-exchange-list"] }
+     * @componentState { "title": "Exchange successful", "props": { "states": { "redeemStage": "success" } }, "dependencies": ["sqm-reward-exchange-list"] }
+     */
+    this.stateController = "{}";
     withHooks(this);
   }
   disconnectedCallback() { }
@@ -711,6 +719,36 @@ export class SqmRewardExchangeList {
       "reflect": false,
       "defaultValue": "\"Cost to Redeem\""
     },
+    "stateController": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "{ \"title\": \"Choose reward\", \"props\": { \"states\": { \"redeemStage\": \"chooseReward\" } }, \"dependencies\": [\"sqm-reward-exchange-list\"] }",
+            "name": "componentState"
+          }, {
+            "text": "{ \"title\": \"Reward details\", \"props\": { \"states\": { \"redeemStage\": \"chooseAmount\" } }, \"dependencies\": [\"sqm-reward-exchange-list\"] }",
+            "name": "componentState"
+          }, {
+            "text": "{ \"title\": \"Confirm exchange\", \"props\": { \"states\": { \"redeemStage\": \"confirmation\" } }, \"dependencies\": [\"sqm-reward-exchange-list\"] }",
+            "name": "componentState"
+          }, {
+            "text": "{ \"title\": \"Exchange successful\", \"props\": { \"states\": { \"redeemStage\": \"success\" } }, \"dependencies\": [\"sqm-reward-exchange-list\"] }",
+            "name": "componentState"
+          }],
+        "text": ""
+      },
+      "attribute": "state-controller",
+      "reflect": false,
+      "defaultValue": "\"{}\""
+    },
     "demoData": {
       "type": "unknown",
       "mutable": false,
@@ -751,35 +789,43 @@ function EmptySlot() {
     h("sqm-empty", { emptyStateImage: "https://res.cloudinary.com/saasquatch/image/upload/v1644360953/squatch-assets/empty_exchange2.png", emptyStateHeader: "Redeem rewards", emptyStateText: "Use your points to redeem rewards once they become available" })));
 }
 function useRewardExchangeListDemo(props) {
-  return deepmerge({
-    states: {
-      content: {
-        text: props,
-      },
-      redeemStage: "chooseReward",
-      amount: 0,
-      selectedStep: undefined,
-      selectedItem: undefined,
-      open: false,
-      exchangeError: false,
-      queryError: false,
-      loading: false,
-      noExchangeOptions: false,
-      empty: EmptySlot(),
-    },
-    data: {
-      shareCode: "SHARECODE123",
-      exchangeList: demoRewardExchange.data.exchangeList,
-    },
-    callbacks: {
-      exchangeReward: () => { },
-      setExchangeState: (_) => { },
-      setStage: (_) => { },
-      resetState: () => { },
-      copyFuelTankCode: () => { },
-    },
-    refs: {
-      canvasRef: {},
-    },
-  }, props.demoData || {}, { arrayMerge: (_, a) => a });
+  const states = parseStates(props.stateController);
+  const formatted = Object.keys(states).reduce((prev, key) => key === "sqm-reward-exchange-list"
+    ? { ...prev, ...states[key] }
+    : { ...prev, [`${key}_stateController`]: states[key] }, {});
+  const finalProps = deepmerge({ ...demoRewardExchange, content: { text: props } }, 
+  // {
+  //   states: {
+  //     content: {
+  //       text: props,
+  //     },
+  //     redeemStage: "chooseReward",
+  //     amount: 0,
+  //     selectedStep: undefined,
+  //     selectedItem: undefined,
+  //     open: false,
+  //     exchangeError: false,
+  //     queryError: false,
+  //     loading: false,
+  //     noExchangeOptions: false,
+  //     // empty: EmptySlot(),
+  //   },
+  //   data: {
+  //     // shareCode: "SHARECODE123",
+  //     exchangeList: demoRewardExchange.data.exchangeList,
+  //   },
+  //   callbacks: {
+  //     exchangeReward: () => {},
+  //     setExchangeState: (_: ExchangeState) => {},
+  //     setStage: (_: Stages) => {},
+  //     resetState: () => {},
+  //     copyFuelTankCode: () => {},
+  //   },
+  //   refs: {
+  //     canvasRef: {},
+  //   },
+  // },
+  props.demoData || formatted || {}, { arrayMerge: (_, a) => a });
+  console.log({ finalProps });
+  return finalProps;
 }

package/dist/collection/components/sqm-rewards-table/RewardsTableCell.stories.js

@@ -1,8 +1,8 @@
 import { h } from "@stencil/core";
 import scenario1 from "./columns/sqm-rewards-table-date-column.feature";
 import scenario2 from "./columns/sqm-rewards-table-reward-column.feature";
-import scenario3 from "./columns/sqm-rewards-table-status-column.feature";
 import scenario4 from "./columns/sqm-rewards-table-source-column.feature";
+import scenario3 from "./columns/sqm-rewards-table-status-column.feature";
 const scenario = scenario1 + scenario2 + scenario3 + scenario4;
 export default {
   title: "Components/Rewards Table Cell",
@@ -30,7 +30,7 @@ const rewardsData = {
   prettyAvailableNumber: "19",
   prettyRedeemedNumber: "0",
   statuses: ["AVAILABLE", "PENDING"],
-  pendingReasons: ["US_TAX", "PAYOUT_CONFIGURATION_MISSING"],
+  pendingReasons: ["US_TAX", "MISSING_PAYOUT_CONFIGURATION"],
   globalRewardKey: null,
   rewardSource: "MANUAL",
   prettyRedeemedCredit: "0 Points",
@@ -323,7 +323,7 @@ export const StatusCellPendingTaxSubmission = () => {
 export const StatusCellPendingPartnerCreation = () => {
   return (h("sqm-rewards-table-status-cell", { statusText: "Pending", reward: {
       ...rewardsData,
-      pendingReasons: ["PAYOUT_CONFIGURATION_MISSING"],
+      pendingReasons: ["MISSING_PAYOUT_CONFIGURATION"],
     } }));
 };
 export const StatusCellPayoutSent = () => {

package/dist/collection/components/sqm-rewards-table/cells/sqm-rewards-table-reward-cell.js

@@ -115,11 +115,11 @@ export class RewardTableRewardsCell {
             height: "3px",
             width: "100%",
             margin: "var(--sl-spacing-xx-small) 0",
-            background: "var(--sl-color-neutral-200)",
+            background: "var(--sqm-border-color)",
             "&:after": {
               content: '""',
               display: "block",
-              background: "var(--sl-color-primary-300)",
+              background: "var(--sqm-accent-color-icon)",
               borderRadius: "100px",
               width: `${progress}%`,
               height: "100%",
@@ -170,7 +170,8 @@ export class RewardTableRewardsCell {
         "resolved": "Reward",
         "references": {
           "Reward": {
-            "location": "global"
+            "location": "import",
+            "path": "../../../saasquatch"
           }
         }
       },

package/dist/collection/components/sqm-rewards-table/cells/sqm-rewards-table-source-cell.js

@@ -22,7 +22,7 @@ export class RewardTableSourceCell {
       const rewardExchange = (h("div", null,
         h("span", { style: {
             fontSize: "var(--sl-font-size-small)",
-            color: "var(--sl-color-neutral-500)",
+            color: "var(--sqm-text-subdued)",
           } }, this.rewardExchangeText),
         h("br", null), (_a = reward.exchangedRewardRedemptionTransaction) === null || _a === void 0 ? void 0 :
         _a.prettyRedeemedCredit,
@@ -49,11 +49,11 @@ export class RewardTableSourceCell {
     };
     const Source = () => this.reward.rewardSource === "FRIEND_SIGNUP" ||
       this.reward.rewardSource === "REFERRED" ? (this.reward.referral === null ? (h("p", { style: {
-        color: "var(--sl-color-gray-400)",
+        color: "var(--sqm-text-subdued)",
       } }, this.deletedReferralText)) : (h("div", null,
       h("div", { style: {
           fontSize: "var(--sl-font-size-small)",
-          color: "var(--sl-color-neutral-500)",
+          color: "var(--sqm-text-subdued)",
         } }, intl.formatMessage({
         id: "referralText",
         defaultMessage: this.referralText,
@@ -76,7 +76,8 @@ export class RewardTableSourceCell {
         "resolved": "Reward",
         "references": {
           "Reward": {
-            "location": "global"
+            "location": "import",
+            "path": "../../../saasquatch"
           }
         }
       },

package/dist/collection/components/sqm-rewards-table/cells/sqm-rewards-table-status-cell.js

@@ -14,14 +14,47 @@ const style = {
   },
   RedeemBadge: {
     "&::part(base)": {
+      padding: "4px 8px",
+      fontSize: "var(--sl-font-size-small)",
+      textAlign: "center",
+      whiteSpace: "pre-line",
+      background: "var(--sqm-informative-color-icon)",
+      color: "var(--sl-color-white)",
+    },
+  },
+  DangerBadge: {
+    "&::part(base)": {
+      padding: "4px 8px",
+      fontSize: "var(--sl-font-size-small)",
+      textAlign: "center",
+      whiteSpace: "pre-line",
+      background: "var(--sqm-danger-color-icon)",
+      color: "var(--sl-color-white)",
+    },
+  },
+  WarningBadge: {
+    "&::part(base)": {
+      padding: "4px 8px",
       fontSize: "var(--sl-font-size-small)",
+      textAlign: "center",
+      whiteSpace: "pre-line",
+      background: "var(--sqm-warning-color-icon)",
+      color: "var(--sl-color-white)",
+    },
+  },
+  SuccessBadge: {
+    "&::part(base)": {
       padding: "4px 8px",
-      background: "var(--sl-color-blue-600)",
+      fontSize: "var(--sl-font-size-small)",
+      textAlign: "center",
+      whiteSpace: "pre-line",
+      background: "var(--sqm-success-color-icon)",
+      color: "var(--sl-color-white)",
     },
   },
   Date: {
     fontSize: "var(--sl-font-size-small)",
-    color: "var(--sl-color-neutral-500)",
+    color: "var(--sqm-text-subdued)",
     margin: "0",
   },
 };
@@ -104,7 +137,7 @@ export class RewardTableStatusCell {
       if (!((_d = taxConnection === null || taxConnection === void 0 ? void 0 : taxConnection.publisher) === null || _d === void 0 ? void 0 : _d.withdrawalSettings))
         return this.pendingPartnerCreation;
     }
-    if ((_e = reward === null || reward === void 0 ? void 0 : reward.pendingReasons) === null || _e === void 0 ? void 0 : _e.includes("PAYOUT_CONFIGURATION_MISSING")) {
+    if ((_e = reward === null || reward === void 0 ? void 0 : reward.pendingReasons) === null || _e === void 0 ? void 0 : _e.includes("MISSING_PAYOUT_CONFIGURATION")) {
       return this.pendingPartnerCreation;
     }
     return "";
@@ -168,11 +201,25 @@ export class RewardTableStatusCell {
       : rewardStatus === "DENIED"
         ? this.deniedText
         : null;
+    // @ts-ignore
+    const getBadgeCSSClass = (badgeType) => {
+      switch (rewardStatus) {
+        case "AVAILABLE":
+          return sheet.classes.SuccessBadge;
+        case "REDEEMED":
+        case "PAYOUT_APPROVED":
+          return sheet.classes.RedeemBadge;
+        case "PENDING":
+        case "PENDING_REVIEW":
+          return sheet.classes.WarningBadge;
+        default:
+          return sheet.classes.DangerBadge;
+      }
+    };
+    const badgeCSSClass = getBadgeCSSClass(badgeType);
     return (h("div", { style: { display: "contents" } },
       h("style", { type: "text/css" }, styleString),
-      h("sl-badge", { type: badgeType, pill: true, class: rewardStatus === "REDEEMED" || rewardStatus === "PAYOUT_APPROVED"
-          ? sheet.classes.RedeemBadge
-          : sheet.classes.Badge }, statusText),
+      h("sl-badge", { type: badgeType, pill: true, class: badgeCSSClass }, statusText),
       h("p", { class: sheet.classes.Date }, fraudStatusText ||
         pendingReasons ||
         this.getPayoutStatusText(rewardStatus) ||
@@ -224,7 +271,8 @@ export class RewardTableStatusCell {
         "resolved": "Reward",
         "references": {
           "Reward": {
-            "location": "global"
+            "location": "import",
+            "path": "../../../saasquatch"
           }
         }
       },
@@ -243,7 +291,8 @@ export class RewardTableStatusCell {
         "resolved": "ImpactConnection",
         "references": {
           "ImpactConnection": {
-            "location": "global"
+            "location": "import",
+            "path": "../../../saasquatch"
           }
         }
       },