@saasquatch/mint-components 1.3.2-18 → 1.3.2-19

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

@@ -1,16 +1,16 @@
-const baseResponse = (data, selected = null) => ({
+const baseResponse = (data, stage = "chooseReward", selectedItem = null, selectedStep = null, error = false, loading = false) => ({
   states: {
     content: {
       text: {
         notAvailableError: "{unavailableReason, select, US_TAX {US Tax limit} INSUFFICIENT_REDEEMABLE_CREDIT {Not enough points} other {Not available} }",
       },
     },
-    redeemStage: "chooseReward",
+    redeemStage: stage,
     amount: 0,
-    exchangeError: false,
-    loading: false,
-    selectedItem: selected,
-    selectedStep: null,
+    exchangeError: error,
+    loading: loading,
+    selectedItem: selectedItem,
+    selectedStep: selectedStep,
   },
   data: {
     exchangeList: data,
@@ -27,7 +27,7 @@ const baseResponse = (data, selected = null) => ({
 const baseReward = {
   key: "",
   name: "",
-  description: "",
+  description: "Description of reward. Lorem ipsum dolor sit amet, consectetur adipiscing. Id nec semper sapien dignissim rhoncus nunc.",
   imageUrl: "",
   available: true,
   unavailableReason: null,
@@ -62,6 +62,9 @@ const selected = {
 const imageUrl = (props) => ({
   imageUrl: props,
 });
+const name = (props) => ({
+  name: props,
+});
 const description = (props) => ({
   description: props,
 });
@@ -78,54 +81,54 @@ const variableValue = (min, max, text) => ({
 const data = [
   {
     ...baseReward,
-    ...description("Free swag with a promo code"),
-    ...imageUrl("https://i.imgur.com/Ds7M19I.png"),
+    ...name("Free swag with a promo code"),
+    ...imageUrl("https://i.imgur.com/n7vC4BR.png"),
     ...fixedValue("40 SaaSquatch Points"),
   },
   {
     ...baseReward,
     ...selected,
-    ...description("Visa® Prepaid Card USD"),
-    ...imageUrl("https://i.imgur.com/4s3q2zz.png"),
+    ...name("Visa® Prepaid Card USD"),
+    ...imageUrl("https://i.imgur.com/veHErQX.png"),
     ...variableValue(20, 80, "SaaSquatch Points"),
   },
   {
     ...baseReward,
-    ...description("A very exclusive gift box"),
-    ...imageUrl("https://i.imgur.com/XuiJi4l.png"),
+    ...name("A very exclusive gift box"),
+    ...imageUrl("https://i.imgur.com/93BvEgH.png"),
     ...fixedValue("30 SaaSquatch Points"),
   },
   {
     ...baseReward,
-    ...description("$50 Store credit"),
+    ...name("$50 Store credit"),
     ...imageUrl("https://i.imgur.com/WkCMVSE.png"),
     ...fixedValue("100 SaaSquatch Points"),
   },
   {
     ...baseReward,
-    ...description("Variable amount of store credit"),
+    ...name("Variable amount of store credit"),
     ...imageUrl("https://i.imgur.com/Jn2fE0s.png"),
     ...variableValue(20, 100, "SaaSquatch Points"),
   },
   {
     ...baseReward,
     ...notEnoughPoints,
-    ...description("A very rare cactus"),
-    ...imageUrl("https://i.imgur.com/CvCdpXc.png"),
+    ...name("A very rare cactus"),
+    ...imageUrl("https://i.imgur.com/hhlF2Ey.png"),
     ...fixedValue("2000 SaaSquatch Points"),
   },
   {
     ...baseReward,
     ...usTax,
-    ...description("$1000 Store credit"),
-    ...imageUrl("https://i.imgur.com/I9FCh9Z.png"),
+    ...name("$1000 Store credit"),
+    ...imageUrl("https://i.imgur.com/y9HSls1.png"),
     ...fixedValue("2000 SaaSquatch Points"),
   },
   {
     ...baseReward,
     ...notEnoughPoints,
-    ...description("A holiday gift box"),
-    ...imageUrl("https://i.imgur.com/HBJS1WH.png"),
+    ...name("A holiday gift box"),
+    ...imageUrl("https://i.imgur.com/dWEdB3p.png"),
     ...fixedValue("100 SaaSquatch Points"),
   },
 ];
@@ -133,109 +136,93 @@ export const rewardExchange = {
   ...baseResponse(data),
 };
 export const rewardExchangeSelected = {
-  ...baseResponse(data, {
+  ...baseResponse(data, "chooseReward", {
     ...baseReward,
     ...selected,
-    ...description("Visa® Prepaid Card USD"),
-    ...imageUrl("https://i.imgur.com/4s3q2zz.png"),
+    ...name("Visa® Prepaid Card USD"),
+    ...imageUrl("https://i.imgur.com/veHErQX.png"),
     ...variableValue(20, 80, "SaaSquatch Points"),
   }),
 };
-export const test2 = {
-  states: {
-    content: {
-      text: {
-        buttonText: "Exchange Rewards",
-        ignored: true,
-      },
-    },
-    redeemStage: "chooseAmount",
-    amount: 0,
-    exchangeError: false,
-    loading: false,
-    selectedItem: {
-      key: "r4",
-      name: "Salmon Coins",
-      description: "Points for Salmon Coins",
-      imageUrl: "data:image/jpeg;base64,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",
+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,
-      unavailableReason: null,
       unavailableReasonCode: null,
-      ruleType: "VARIABLE_CREDIT_REWARD",
-      sourceUnit: "POINT",
-      sourceValue: null,
-      prettySourceValue: null,
-      sourceMinValue: 1,
-      prettySourceMinValue: "1 Point",
-      sourceMaxValue: 100,
-      prettySourceMaxValue: "100 Points",
-      destinationMinValue: 1,
-      prettyDestinationMinValue: "1 Salmon Coin",
-      destinationMaxValue: 100,
-      prettyDestinationMaxValue: "100 Salmons",
-      globalRewardKey: null,
-      destinationUnit: "TESTUNIT",
-      steps: [
-        {
-          sourceValue: 1,
-          prettySourceValue: "1 Point",
-          destinationValue: 1,
-          prettyDestinationValue: "1 Salmon Coin",
-          available: true,
-          unavailableReasonCode: null,
-          unavailableReason: "",
-        },
-        {
-          sourceValue: 2,
-          prettySourceValue: "2 Points",
-          destinationValue: 2,
-          prettyDestinationValue: "2 Salmons",
-          available: true,
-          unavailableReasonCode: null,
-          unavailableReason: "",
-        },
-        {
-          sourceValue: 3,
-          prettySourceValue: "3 Points",
-          destinationValue: 3,
-          prettyDestinationValue: "3 Salmons",
-          available: true,
-          unavailableReasonCode: null,
-          unavailableReason: "",
-        },
-        {
-          sourceValue: 4,
-          prettySourceValue: "4 Points",
-          destinationValue: 4,
-          prettyDestinationValue: "4 Salmons",
-          available: true,
-          unavailableReasonCode: null,
-          unavailableReason: "",
-        },
-        {
-          sourceValue: 5,
-          prettySourceValue: "5 Points",
-          destinationValue: 5,
-          prettyDestinationValue: "5 Salmons",
-          available: true,
-          unavailableReasonCode: null,
-          unavailableReason: "",
-        },
-      ],
-    },
-    selectedStep: null,
-  },
-  data: {
-    exchangeList: null,
-  },
-  callbacks: {
-    exchangeReward: null,
-    resetState: null,
-    setStage: null,
-    setExchangeState: null,
-    refs: {
-      drawerRef: {},
-    },
-  },
-  refs: 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, "SaaSquatch 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"),
+    ],
+  }),
+};
+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, "SaaSquatch Points"),
+  }, baseStep(20, "$", 40, "SaaSquatch 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),
+};
+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 loading = {
+  ...baseResponse(null, "chooseReward", null, null, false, true),
 };

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

@@ -1,8 +1,24 @@
 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: "30", height: "30", viewBox: "0 0 30 30", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
-  h("circle", { cx: "15", cy: "15", r: "15", fill: "white" }),
-  h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M10.6255 21.783C10.5129 21.8963 10.3597 21.96 10.2 21.96C10.0402 21.96 9.88705 21.8963 9.77442 21.783L5.87442 17.8597C5.64081 17.6247 5.64194 17.2448 5.87695 17.0112C6.11197 16.7775 6.49186 16.7787 6.72548 17.0137L9.59995 19.9054V8.52001C9.59995 8.18864 9.86858 7.92001 10.2 7.92001C10.5313 7.92001 10.8 8.18864 10.8 8.52001V19.9054L13.6744 17.0137C13.908 16.7787 14.2879 16.7775 14.5229 17.0112C14.758 17.2448 14.7591 17.6247 14.5255 17.8597L10.6255 21.783ZM20.2255 8.09707C20.1129 7.98378 19.9597 7.92007 19.8 7.92007C19.6402 7.92007 19.487 7.98378 19.3744 8.09707L15.4744 12.0204C15.2408 12.2554 15.2419 12.6353 15.477 12.8689C15.712 13.1025 16.0919 13.1014 16.3255 12.8664L19.2 9.97473V21.3601C19.2 21.6914 19.4686 21.9601 19.8 21.9601C20.1313 21.9601 20.4 21.6914 20.4 21.3601V9.97473L23.2744 12.8664C23.508 13.1014 23.8879 13.1025 24.1229 12.8689C24.358 12.6353 24.3591 12.2554 24.1255 12.0204L20.2255 8.09707Z", fill: "#333333" })));
-export const CheckMark = () => (h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "10", height: "7", viewBox: "0 0 10 7", fill: "none" },
-  h("path", { d: "M2.12828 2.71485C1.72536 2.33712 1.09253 2.35754 0.714799 2.76045C0.337068 3.16336 0.357483 3.7962 0.760395 4.17393L2.12828 2.71485ZM3.81471 5.66661L3.13076 6.39615C3.51542 6.75677 4.11399 6.75677 4.49865 6.39615L3.81471 5.66661ZM9.23939 1.95171C9.6423 1.57397 9.66271 0.941139 9.28498 0.538227C8.90725 0.135315 8.27442 0.114901 7.87151 0.492631L9.23939 1.95171ZM0.760395 4.17393L3.13076 6.39615L4.49865 4.93708L2.12828 2.71485L0.760395 4.17393ZM4.49865 6.39615L9.23939 1.95171L7.87151 0.492631L3.13076 4.93708L4.49865 6.39615Z", fill: "white" })));
+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 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/progressBar.js

@@ -1,44 +1,46 @@
 import { h } from "@stencil/core";
 import { CheckMark } from "./SVGs";
-function Dot({ active, completed, incomplete, }) {
+function Dot({ active, completed, incomplete, stage, }) {
   return (h("div", { style: {
-      flex: "0 0 0",
-      content: "''",
-      height: "4px",
-      borderRadius: "4px",
-      background: incomplete ? "#E5E5E5" : "#9E9E9E",
-      position: "relative",
-      bottom: "0",
-      left: "0",
       display: "flex",
-      justifyContent: "center",
-      columnGap: "50px",
-      marginRight: "-2px",
-      boxSizing: "content-box",
     } },
     h("div", { style: {
-        backgroundColor: completed ? "#9E9E9E" : "#FFF",
+        backgroundColor: completed
+          ? "var(--sl-color-success-500)"
+          : incomplete
+            ? "var(--sl-color-neutral-200)"
+            : "var(--sl-color-neutral-0)",
         border: active
-          ? "3px solid #9E9E9E"
+          ? "1px solid var(--sl-color-success-500)"
           : incomplete
-            ? "3px solid #E5E5E5"
-            : "3px solid #9E9E9E",
+            ? "1px solid var(--sl-color-neutral-200)"
+            : "1px solid var(--sl-color-success-500)",
         borderRadius: "50%",
-        width: "10px",
-        height: "10px",
-        margin: "-6px auto 0px",
+        width: "23px",
+        height: "23px",
+        margin: "-11px",
         zIndex: "1",
         boxSizing: "content-box",
-      } }, completed && (h("div", { style: { top: "-6px", position: "relative" } },
-      h(CheckMark, null))))));
+      } }, 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 }) {
+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 ? "#E5E5E5" : "#9E9E9E",
+      background: incomplete || active
+        ? "var(--sl-color-neutral-200)"
+        : "var(--sl-color-success-500)",
       position: "relative",
       bottom: "0",
       left: "0",
@@ -47,15 +49,16 @@ function ProgressLine({ incomplete = false, active = false }) {
       columnGap: "50px",
       marginRight: "-2px",
       boxSizing: "content-box",
+      opacity: invisible ? "0" : "1",
     } }));
 }
-function Progress({ active, completed, incomplete }) {
+function Progress({ active, completed, incomplete, stage }) {
   return [
-    h(ProgressLine, { incomplete: incomplete }),
-    h(Dot, { active: active, completed: completed, incomplete: incomplete }),
-    h(ProgressLine, { incomplete: incomplete, active: active }),
+    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 })))));
+  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 })))));
 }