@saasquatch/mint-components 1.5.0-0 → 1.5.0-101

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

@@ -1,8 +1,31 @@
-const baseResponse = (data, stage = "chooseReward", selectedItem = null, selectedStep = null, error = false, loading = false) => ({
+const baseResponse = (data, stage = "chooseReward", selectedItem = null, selectedStep = null, error = false, loading = false, fueltank = null) => ({
   states: {
     content: {
       text: {
-        notAvailableError: "{unavailableReason, select, US_TAX {US Tax limit} INSUFFICIENT_REDEEMABLE_CREDIT {Not enough points} other {Not available} }",
+        buttonText: "Exchange Rewards",
+        notAvailableError: "{unavailableReasonCode, select, NOT_CHAMPION {CUSTOM ERROR MESSAGE } US_TAX {Exceeds tax limit for this year} INSUFFICIENT_REDEEMABLE_CREDIT {{sourceValue} required} AVAILABILITY_PREDICATE {Not available} other {unavailableReasonCode} }",
+        chooseRewardTitle: "Rewards",
+        chooseAmountTitle: "Select",
+        confirmationTitle: "Confirm",
+        rewardTitle: "Choose a reward",
+        cancelText: "Cancel",
+        backText: "Back",
+        continueText: "Continue",
+        continueToConfirmationText: "Continue to confirmation",
+        redeemText: "Redeem",
+        redeemTitle: "Confirm and redeem",
+        redemptionSuccessText: "Redeemed {sourceValue} for {destinationValue}",
+        doneText: "Done",
+        toolTipText: "Copied!",
+        selectText: "Select amount to receive",
+        sourceAmountMessage: "{ruleType, select, FIXED_GLOBAL_REWARD {{sourceValue}} other {{sourceMinValue} to {sourceMaxValue}}}",
+        rewardRedeemedText: "Reward redeemed",
+        redemptionError: "An error occured trying to redeem this reward. Please try again",
+        promoCode: "Promo code",
+        skeletonCardNum: 8,
+        rewardNameTitle: "Reward Name",
+        rewardAmountTitle: "Reward Amount",
+        costTitle: "Cost",
       },
     },
     redeemStage: stage,
@@ -11,15 +34,18 @@ const baseResponse = (data, stage = "chooseReward", selectedItem = null, selecte
     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,
@@ -30,7 +56,6 @@ const baseReward = {
   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",
@@ -56,6 +81,10 @@ const usTax = {
   available: false,
   unavailableReasonCode: "US_TAX",
 };
+const customError = {
+  available: false,
+  unavailableReasonCode: "NOT_CHAMPION",
+};
 const selected = {
   key: "r1",
 };
@@ -71,77 +100,143 @@ const description = (props) => ({
 const fixedValue = (props) => ({
   prettySourceValue: props,
 });
-const variableValue = (min, max, text) => ({
+const variableValue = (min, max, unit) => ({
   ruleType: "VARIABLE_CREDIT_REWARD",
   sourceMinValue: min,
-  prettySourceMinValue: min + " " + text,
+  prettySourceMinValue: min + " " + unit,
   sourceMaxValue: max,
-  prettySourceMaxValue: max + " " + text,
+  prettySourceMaxValue: max + " " + unit,
 });
+const demoData = [
+  {
+    ...baseReward,
+    ...name("Free swag with a promo code"),
+    ...imageUrl("https://res.cloudinary.com/saasquatch/image/upload/v1643653103/squatch-assets/default_rewards_1.png"),
+    ...fixedValue("40 Points"),
+  },
+  {
+    ...baseReward,
+    ...selected,
+    ...name("Visa® Prepaid Card USD"),
+    ...imageUrl("https://res.cloudinary.com/saasquatch/image/upload/v1644000268/squatch-assets/veHErQX.png"),
+    ...variableValue(20, 80, "Points"),
+  },
+  {
+    ...baseReward,
+    ...name("$50 Store credit"),
+    ...imageUrl("https://res.cloudinary.com/saasquatch/image/upload/v1644000270/squatch-assets/WkCMVSE.png"),
+    ...fixedValue("100 Points"),
+  },
+  {
+    ...baseReward,
+    ...name("Variable amount of store credit"),
+    ...imageUrl("https://res.cloudinary.com/saasquatch/image/upload/v1644000240/squatch-assets/Jn2fE0s.png"),
+    ...variableValue(20, 100, "Points"),
+  },
+];
 const data = [
   {
     ...baseReward,
     ...name("Free swag with a promo code"),
-    ...imageUrl("https://i.imgur.com/n7vC4BR.png"),
+    ...imageUrl("https://res.cloudinary.com/saasquatch/image/upload/v1643653103/squatch-assets/default_rewards_1.png"),
     ...fixedValue("40 SaaSquatch Points"),
   },
   {
     ...baseReward,
     ...selected,
     ...name("Visa® Prepaid Card USD"),
-    ...imageUrl("https://i.imgur.com/veHErQX.png"),
-    ...variableValue(20, 80, "SaaSquatch Points"),
+    ...imageUrl("https://res.cloudinary.com/saasquatch/image/upload/v1644000268/squatch-assets/veHErQX.png"),
+    ...variableValue(20, 80, "Points"),
   },
   {
     ...baseReward,
     ...name("A very exclusive gift box"),
-    ...imageUrl("https://i.imgur.com/93BvEgH.png"),
+    ...imageUrl("https://res.cloudinary.com/saasquatch/image/upload/v1644000223/squatch-assets/93BvEgH.png"),
     ...fixedValue("30 SaaSquatch Points"),
   },
   {
     ...baseReward,
     ...name("$50 Store credit"),
-    ...imageUrl("https://i.imgur.com/WkCMVSE.png"),
+    ...imageUrl("https://res.cloudinary.com/saasquatch/image/upload/v1644000270/squatch-assets/WkCMVSE.png"),
     ...fixedValue("100 SaaSquatch Points"),
   },
   {
     ...baseReward,
     ...name("Variable amount of store credit"),
-    ...imageUrl("https://i.imgur.com/Jn2fE0s.png"),
-    ...variableValue(20, 100, "SaaSquatch Points"),
+    ...imageUrl("https://res.cloudinary.com/saasquatch/image/upload/v1644000240/squatch-assets/Jn2fE0s.png"),
+    ...variableValue(20, 100, "Points"),
   },
   {
     ...baseReward,
     ...notEnoughPoints,
     ...name("A very rare cactus"),
-    ...imageUrl("https://i.imgur.com/hhlF2Ey.png"),
+    ...imageUrl("https://res.cloudinary.com/saasquatch/image/upload/v1644000224/squatch-assets/hhlF2Ey.png"),
     ...fixedValue("2000 SaaSquatch Points"),
   },
   {
     ...baseReward,
     ...usTax,
-    ...name("$1000 Store credit"),
-    ...imageUrl("https://i.imgur.com/y9HSls1.png"),
-    ...fixedValue("2000 SaaSquatch Points"),
+    ...name("$1000 Store credit with a really super long name in the front page"),
+    ...imageUrl("https://res.cloudinary.com/saasquatch/image/upload/v1644000273/squatch-assets/y9HSls1.png"),
+    ...fixedValue("2000 SaaSquatch Long Points"),
   },
   {
     ...baseReward,
     ...notEnoughPoints,
     ...name("A holiday gift box"),
-    ...imageUrl("https://i.imgur.com/dWEdB3p.png"),
+    ...imageUrl("https://res.cloudinary.com/saasquatch/image/upload/v1644000223/squatch-assets/dWEdB3p.png"),
     ...fixedValue("100 SaaSquatch Points"),
   },
 ];
 export const rewardExchange = {
   ...baseResponse(data),
 };
+export const demoRewardExchange = {
+  ...baseResponse(demoData),
+};
+export const rewardExchangeLongText = {
+  ...baseResponse([
+    {
+      ...baseReward,
+      ...notEnoughPoints,
+      ...name("Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt ratione a itaque non obcaecati iste, amet repudiandae at consequatur adipisci culpa nam, incidunt exercitationem aliquid."),
+      ...imageUrl("https://res.cloudinary.com/saasquatch/image/upload/v1644000223/squatch-assets/dWEdB3p.png"),
+      ...fixedValue("Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt ratione a itaque non obcaecati iste, amet repudiandae at consequatur adipisci culpa nam, incidunt exercitationem aliquid."),
+    },
+    {
+      ...baseReward,
+      ...name("Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt ratione a itaque non obcaecati iste, amet repudiandae at consequatur adipisci culpa nam, incidunt exercitationem aliquid."),
+      ...imageUrl("https://res.cloudinary.com/saasquatch/image/upload/v1644000273/squatch-assets/y9HSls1.png"),
+      ...fixedValue("Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt ratione a itaque non obcaecati iste, amet repudiandae at consequatur adipisci culpa nam, incidunt exercitationem aliquid."),
+    },
+    {
+      ...baseReward,
+      ...name("Suuuuuuuuper aweeeeesssssoooommme reward!!!!!!"),
+      ...imageUrl("https://res.cloudinary.com/saasquatch/image/upload/v1644000270/squatch-assets/WkCMVSE.png"),
+      ...fixedValue("Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt ratione a itaque non obcaecati iste, amet repudiandae at consequatur adipisci culpa nam, incidunt exercitationem aliquid."),
+    },
+    ...data,
+  ]),
+};
+export const rewardExchangeCustomErrorMsg = {
+  ...baseResponse([
+    {
+      ...baseReward,
+      ...customError,
+      ...name("A very rare cactus"),
+      ...imageUrl("https://res.cloudinary.com/saasquatch/image/upload/v1644000224/squatch-assets/hhlF2Ey.png"),
+      ...fixedValue("2000 SaaSquatch Points"),
+    },
+    ...data,
+  ]),
+};
 export const rewardExchangeSelected = {
   ...baseResponse(data, "chooseReward", {
     ...baseReward,
     ...selected,
     ...name("Visa® Prepaid Card USD"),
-    ...imageUrl("https://i.imgur.com/veHErQX.png"),
-    ...variableValue(20, 80, "SaaSquatch Points"),
+    ...imageUrl("https://res.cloudinary.com/saasquatch/image/upload/v1644000268/squatch-assets/veHErQX.png"),
+    ...variableValue(20, 80, "Points"),
   }),
 };
 const stepsData = (start, end, inc) => {
@@ -154,32 +249,76 @@ const stepsData = (start, end, inc) => {
       prettyDestinationValue: "$" + i,
       available: true,
       unavailableReasonCode: null,
-      unavailableReason: "",
     });
   }
   return steps;
 };
-const baseStep = (dst, dstUnit, src, srcUnit, available = true) => ({
+const baseStep = (dst, dstUnit, src, srcUnit, available = true, unavailableReason = null) => ({
   destinationValue: dst,
   prettyDestinationValue: dstUnit + dst,
   sourceValue: src,
   prettySourceValue: src + " " + srcUnit,
   available: available,
-  unavailableReasonCode: null,
-  unavailableReason: "",
+  unavailableReasonCode: unavailableReason,
 });
 export const chooseAmountVariable = {
   ...baseResponse(data, "chooseAmount", {
     ...baseReward,
     ...name("Visa® Prepaid Card USD"),
+    ...imageUrl("https://res.cloudinary.com/saasquatch/image/upload/v1644000268/squatch-assets/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 chooseAmountVariableNoDescription = {
+  ...baseResponse(data, "chooseAmount", {
+    ...baseReward,
+    ...name("Visa® Prepaid Card USD"),
+    ...description(""),
     ...imageUrl("https://i.imgur.com/veHErQX.png"),
-    ...variableValue(20, 80, "SaaSquatch Points"),
+    ...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 chooseAmountVariableDisabled = {
+  ...baseResponse(data, "chooseAmount", {
+    ...baseReward,
+    ...name("Visa® Prepaid Card USD"),
+    ...imageUrl("https://res.cloudinary.com/saasquatch/image/upload/v1644000268/squatch-assets/veHErQX.png"),
+    ...variableValue(20, 80, "Points"),
     steps: [
-      baseStep(20, "$", 40, "SaaSquatch Points"),
-      baseStep(30, "$", 60, "SaaSquatch Points"),
-      baseStep(40, "$", 80, "SaaSquatch Points"),
-      baseStep(50, "$", 100, "SaaSquatch Points"),
-      baseStep(60, "$", 120, "SaaSquatch Points"),
+      baseStep(20, "$", 40, "Points"),
+      baseStep(30, "$", 60, "Points"),
+      baseStep(40, "$", 80, "Points", false, "INSUFFICIENT_REDEEMABLE_CREDIT"),
+      baseStep(50, "$", 100, "Points", false, "INSUFFICIENT_REDEEMABLE_CREDIT"),
+      baseStep(60, "$", 120, "Points", false, "INSUFFICIENT_REDEEMABLE_CREDIT"),
+    ],
+  }),
+};
+export const chooseAmountVariableUnavailable = {
+  ...baseResponse(data, "chooseAmount", {
+    ...baseReward,
+    ...name("Visa® Prepaid Card USD"),
+    ...imageUrl("https://res.cloudinary.com/saasquatch/image/upload/v1644000268/squatch-assets/veHErQX.png"),
+    ...variableValue(20, 80, "Points"),
+    steps: [
+      baseStep(20, "$", 40, "Points"),
+      baseStep(30, "$", 60, "Points"),
+      baseStep(40, "$", 80, "Points", false, "US_TAX"),
+      baseStep(50, "$", 100, "Points", false, "US_TAX"),
+      baseStep(60, "$", 120, "Points", false, "US_TAX"),
     ],
   }),
 };
@@ -187,6 +326,15 @@ export const chooseAmountFixed = {
   ...baseResponse(data, "chooseAmount", {
     ...baseReward,
     ...name("Free swag with a promo code"),
+    ...imageUrl("https://res.cloudinary.com/saasquatch/image/upload/v1644000252/squatch-assets/n7vC4BR.png"),
+    ...fixedValue("40 SaaSquatch Points"),
+  }),
+};
+export const chooseAmountFixedNoDescription = {
+  ...baseResponse(data, "chooseAmount", {
+    ...baseReward,
+    ...description(""),
+    ...name("Free swag with a promo code"),
     ...imageUrl("https://i.imgur.com/n7vC4BR.png"),
     ...fixedValue("40 SaaSquatch Points"),
   }),
@@ -194,34 +342,42 @@ export const chooseAmountFixed = {
 export const confirmFixed = {
   ...baseResponse(data, "confirmation", {
     ...baseReward,
-    ...name("A very exclusive gift box"),
-    ...imageUrl("https://i.imgur.com/93BvEgH.png"),
-    ...fixedValue("30 SaaSquatch Points"),
+    ...name("Free swag with a promo code"),
+    ...imageUrl("https://res.cloudinary.com/saasquatch/image/upload/v1644000252/squatch-assets/n7vC4BR.png"),
+    ...fixedValue("40 SaaSquatch Points"),
   }),
 };
 export const confirmVariable = {
   ...baseResponse(data, "confirmation", {
     ...baseReward,
     ...name("Visa® Prepaid Card USD"),
-    ...imageUrl("https://i.imgur.com/veHErQX.png"),
-    ...variableValue(20, 80, "SaaSquatch Points"),
-  }, baseStep(20, "$", 40, "SaaSquatch Points")),
+    ...imageUrl("https://res.cloudinary.com/saasquatch/image/upload/v1644000268/squatch-assets/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, "SaaSquatch Points"),
-  }, baseStep(20, "$", 40, "SaaSquatch Points"), true),
+    ...imageUrl("https://res.cloudinary.com/saasquatch/image/upload/v1644000268/squatch-assets/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"),
-  }),
+    ...name("Free swag with a promo code"),
+    ...imageUrl("https://res.cloudinary.com/saasquatch/image/upload/v1644000252/squatch-assets/n7vC4BR.png"),
+    ...fixedValue("40 SaaSquatch Points"),
+  }, undefined, undefined, undefined, "4ah2-hh46-gk7r"),
+};
+export const successVariable = {
+  ...baseResponse(data, "success", {
+    ...baseReward,
+    ...name("Visa® Prepaid Card USD"),
+    ...imageUrl("https://res.cloudinary.com/saasquatch/image/upload/v1644000223/squatch-assets/93BvEgH.png"),
+    ...variableValue(20, 80, "Points"),
+  }, baseStep(20, "$", 40, "Points")),
 };
 export const loading = {
   ...baseResponse(null, "chooseReward", null, null, false, true),

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

@@ -5,6 +5,9 @@ export const ExchangeArrows = () => (h("svg", { width: 19, height: 15, fill: "no
   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" }),