feat: add redemption widgets params for callbacks URL

public/example.html

@@ -109,13 +109,23 @@ <h2>Redemption Widget</h2>
               <button onclick="clearRedeemInputs(); setValue('input-redeem-exchange-id', '80'); setValue('select-redeem-widget-action', 'CANCEL_FORM')" >Example</button>
             </td>
           </tr>
+          <tr>
+            <td>DeliveryInfo</td>
+            <td>
+              <textarea id="input-delivery-info" onchange="updateRedeemButton('data-delivery-info', encodeURI(this.value))" rows="10" cols="30">
+              </textarea>
+            </td>
+            <td>
+              <button onclick="clearRedeemInputs(); setValue('input-redeem-show-overview', false, 'checked'); setValue('input-post-delivery-info-url', 'http://localhost:3666/deliveryInfo'); setValue('input-redeem-exchange-id', '133'); setValue('select-redeem-widget-action', 'CONFIRM_REDEEM'); setValue('input-delivery-info', fullDecodeUri('%7B%22name%22:%20%22TOTO%22,%20%22streetNameAndNumber%22:%20%221%20grand%20place%22,%20%22city%22:%20%22LILLE%22,%20%22state%22:%20%22NORD%22,%20%22zip%22:%20%2259000%22,%20%22country%22:%20%22FR%22,%20%22email%22:%20%[email protected]%22,%20%22phone%22:%20%22%2B33123456789%22%7D'))" >Example</button>
+            </td>
+          </tr>
           <tr>
             <td>PostDeliveryInfoURL</td>
             <td>
               <input type="url" id="input-post-delivery-info-url" onchange="updateRedeemButton('data-post-delivery-info-url', encodeURI(this.value))" size="30">
             </td>
             <td>
-              <button onclick="clearRedeemInputs(); setValue('input-post-delivery-info-url', 'http://localhost:3666')" >Example</button>
+              <button onclick="setValue('input-post-delivery-info-url', 'http://localhost:3666/deliveryInfo')" >Example</button>
             </td>
           </tr>
           <tr>
@@ -125,7 +135,45 @@ <h2>Redemption Widget</h2>
               </textarea>
             </td>
             <td>
-              <button onclick="clearRedeemInputs(); setValue('input-post-delivery-info-url', 'http://localhost:3666'); setValue('input-post-delivery-info-header', decodeURI('%7B%0A%20%20%22authorization%22:%20%22Bearer%20eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9%22,%0A%20%20%22another-header%22:%20%22*****%22%0A%7D'))" >Example</button>
+              <button onclick="setValue('input-post-delivery-info-url', 'http://localhost:3666/deliveryInfo'); setValue('input-post-delivery-info-header', fullDecodeUri('%7B%0A%20%20%22authorization%22:%20%22Bearer%20eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9%22,%0A%20%20%22another-header%22:%20%22*****%22%0A%7D'))" >Example</button>
+            </td>
+          </tr>
+          <tr>
+            <td>PostRedemptionSubmittedURL</td>
+            <td>
+              <input type="url" id="input-post-redemption-submitted-url" onchange="updateRedeemButton('data-post-redemption-submitted-url', encodeURI(this.value))" size="30">
+            </td>
+            <td>
+              <button onclick="setValue('input-post-redemption-submitted-url', 'http://localhost:3666/submitted')" >Example</button>
+            </td>
+          </tr>
+          <tr>
+            <td>PostRedemptionSubmittedHeader</td>
+            <td>
+              <textarea id="input-post-redemption-submitted-header" onchange="updateRedeemButton('data-post-redemption-submitted-headers', encodeURI(this.value))" rows="10" cols="30">
+              </textarea>
+            </td>
+            <td>
+              <button onclick="setValue('input-post-redemption-submitted-url', 'http://localhost:3666/submitted'); setValue('input-post-redemption-submitted-header', fullDecodeUri('%7B%0A%20%20%22authorization%22:%20%22Bearer%20eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9%22,%0A%20%20%22another-header%22:%20%22*****%22%0A%7D'))" >Example</button>
+            </td>
+          </tr>
+          <tr>
+            <td>PostRedemptionConfirmedURL</td>
+            <td>
+              <input type="url" id="input-post-redemption-confirmed-url" onchange="updateRedeemButton('data-post-redemption-confirmed-url', encodeURI(this.value))" size="30">
+            </td>
+            <td>
+              <button onclick="setValue('input-post-redemption-confirmed-url', 'http://localhost:3666/confirmed')" >Example</button>
+            </td>
+          </tr>
+          <tr>
+            <td>PostRedemptionConfirmedHeader</td>
+            <td>
+              <textarea id="input-post-redemption-confirmed-header" onchange="updateRedeemButton('data-post-redemption-confirmed-headers', encodeURI(this.value))" rows="10" cols="30">
+              </textarea>
+            </td>
+            <td>
+              <button onclick="setValue('input-post-redemption-confirmed-url', 'http://localhost:3666/confirmed'); setValue('input-post-redemption-confirmed-header', fullDecodeUri('%7B%0A%20%20%22authorization%22:%20%22Bearer%20eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9%22,%0A%20%20%22another-header%22:%20%22*****%22%0A%7D'))" >Example</button>
             </td>
           </tr>
         </tbody>
@@ -162,11 +210,23 @@ <h2>Redemption Widget</h2>
         setValue('select-redeem-exchange-state', 'Committed')
         setValue('input-post-delivery-info-url', '')
         setValue('input-post-delivery-info-header', '')
+        setValue('input-post-redemption-submitted-url', '')
+        setValue('input-post-redemption-submitted-header', '')
+        setValue('input-post-redemption-confirmed-url', '')
+        setValue('input-post-redemption-confirmed-header', '')
+        setValue('input-delivery-info', '')
       }
       function clearFinanceInputs() {
         setValue('input-finance-seller-id', '')
         updateFinanceButton('disabled', true)
       }
+      function fullDecodeUri(s) {
+        const s2 = decodeURI(s);
+        if (s2 !== s) {
+          return fullDecodeUri(s2)
+        }
+        return s2
+      }
     </script>
   </body>
 </html>

public/scripts/boson-widgets.js

@@ -13,8 +13,13 @@ const constants = {
   exchangeStateTag: "data-exchange-state",
   showRedemptionOverviewTag: "data-show-redemption-overview",
   widgetActionTag: "data-widget-action",
+  deliveryInfoTag: "data-delivery-info",
   postDeliveryInfoUrlTag: "data-post-delivery-info-url",
   postDeliveryInfoHeadersTag: "data-post-delivery-info-headers",
+  postRedemptionSubmittedUrlTag: "data-post-redemption-submitted-url",
+  postRedemptionSubmittedHeadersTag: "data-post-redemption-submitted-headers",
+  postRedemptionConfirmedUrlTag: "data-post-redemption-confirmed-url",
+  postRedemptionConfirmedHeadersTag: "data-post-redemption-confirmed-headers",
   sellerIdTag: "data-seller-id",
   configIdTag: "data-config-id",
   accountTag: "data-account",
@@ -127,10 +132,22 @@ function bosonWidgetReload() {
         showRedeemId.attributes[constants.showRedemptionOverviewTag]?.value;
       const widgetAction =
         showRedeemId.attributes[constants.widgetActionTag]?.value;
+      const deliveryInfo =
+        showRedeemId.attributes[constants.deliveryInfoTag]?.value;
       const postDeliveryInfoUrl =
         showRedeemId.attributes[constants.postDeliveryInfoUrlTag]?.value;
       const postDeliveryInfoHeaders =
         showRedeemId.attributes[constants.postDeliveryInfoHeadersTag]?.value;
+      const postRedemptionSubmittedUrl =
+        showRedeemId.attributes[constants.postRedemptionSubmittedUrlTag]?.value;
+      const postRedemptionSubmittedHeaders =
+        showRedeemId.attributes[constants.postRedemptionSubmittedHeadersTag]
+          ?.value;
+      const postRedemptionConfirmedUrl =
+        showRedeemId.attributes[constants.postRedemptionConfirmedUrlTag]?.value;
+      const postRedemptionConfirmedHeaders =
+        showRedeemId.attributes[constants.postRedemptionConfirmedHeadersTag]
+          ?.value;
       const configId = showRedeemId.attributes[constants.configIdTag]?.value;
       const account = showRedeemId.attributes[constants.accountTag]?.value;
       bosonWidgetShowRedeem({
@@ -139,8 +156,13 @@ function bosonWidgetReload() {
         exchangeState,
         showRedemptionOverview,
         widgetAction,
+        deliveryInfo,
         postDeliveryInfoUrl,
         postDeliveryInfoHeaders,
+        postRedemptionSubmittedUrl,
+        postRedemptionSubmittedHeaders,
+        postRedemptionConfirmedUrl,
+        postRedemptionConfirmedHeaders,
         configId,
         account
       });
@@ -165,8 +187,25 @@ function bosonWidgetShowRedeem(args) {
       value: args.showRedemptionOverview?.toString() // to allow passing either a real boolean or a string
     },
     { tag: "widgetAction", value: args.widgetAction },
+    { tag: "deliveryInfo", value: args.deliveryInfo },
     { tag: "postDeliveryInfoUrl", value: args.postDeliveryInfoUrl },
     { tag: "postDeliveryInfoHeaders", value: args.postDeliveryInfoHeaders },
+    {
+      tag: "postRedemptionSubmittedUrl",
+      value: args.postRedemptionSubmittedUrl
+    },
+    {
+      tag: "postRedemptionSubmittedHeaders",
+      value: args.postRedemptionSubmittedHeaders
+    },
+    {
+      tag: "postRedemptionConfirmedUrl",
+      value: args.postRedemptionConfirmedUrl
+    },
+    {
+      tag: "postRedemptionConfirmedHeaders",
+      value: args.postRedemptionConfirmedHeaders
+    },
     { tag: "configId", value: args.configId },
     { tag: "account", value: args.account }
   ]);

src/components/widgets/redeem/Redeem.tsx

@@ -22,6 +22,22 @@ export function Redeem() {
   const exchangeState: subgraph.ExchangeState = checkExchangeState(
     searchParams.get("exchangeState") || undefined
   );
+  const deliveryInfo = searchParams.get("deliveryInfo") || undefined;
+  let deliveryInfoDecoded = undefined;
+  if (deliveryInfo) {
+    try {
+      deliveryInfoDecoded = JSON.parse(deliveryInfo);
+      for (const key of Object.keys(deliveryInfoDecoded)) {
+        deliveryInfoDecoded[key] = decodeURIComponent(deliveryInfoDecoded[key]);
+      }
+      console.log("deliveryInfoDecoded", deliveryInfoDecoded);
+    } catch (e) {
+      console.error(
+        `Unable to parse JSON from deliveryInfo='${deliveryInfo}': ${e}`
+      );
+    }
+  }
+
   const postDeliveryInfoUrl =
     searchParams.get("postDeliveryInfoUrl") || undefined;
   const postDeliveryInfoHeaders =
@@ -40,6 +56,46 @@ export function Redeem() {
       );
     }
   }
+  const postRedemptionSubmittedUrl =
+    searchParams.get("postRedemptionSubmittedUrl") || undefined;
+  const postRedemptionSubmittedHeaders =
+    searchParams.get("postRedemptionSubmittedHeaders") || undefined;
+  let postRedemptionSubmittedHeadersDecoded = undefined;
+  if (postRedemptionSubmittedHeaders) {
+    try {
+      postRedemptionSubmittedHeadersDecoded = JSON.parse(
+        postRedemptionSubmittedHeaders
+      );
+      console.log(
+        "postRedemptionSubmittedHeadersDecoded",
+        postRedemptionSubmittedHeadersDecoded
+      );
+    } catch (e) {
+      console.error(
+        `Unable to parse JSON from postRedemptionSubmittedHeaders='${postRedemptionSubmittedHeaders}': ${e}`
+      );
+    }
+  }
+  const postRedemptionConfirmedUrl =
+    searchParams.get("postRedemptionConfirmedUrl") || undefined;
+  const postRedemptionConfirmedHeaders =
+    searchParams.get("postRedemptionConfirmedHeaders") || undefined;
+  let postRedemptionConfirmedHeadersDecoded = undefined;
+  if (postRedemptionConfirmedHeaders) {
+    try {
+      postRedemptionConfirmedHeadersDecoded = JSON.parse(
+        postRedemptionConfirmedHeaders
+      );
+      console.log(
+        "postRedemptionConfirmedHeadersDecoded",
+        postRedemptionConfirmedHeadersDecoded
+      );
+    } catch (e) {
+      console.error(
+        `Unable to parse JSON from postRedemptionConfirmedHeaders='${postRedemptionConfirmedHeaders}': ${e}`
+      );
+    }
+  }
   const configId = searchParams.get("configId") as ConfigId;
   if (!configId) {
     return <p>Missing 'configId' query param</p>;
@@ -92,8 +148,13 @@ export function Redeem() {
       }}
       modalMargin="2%"
       widgetAction={widgetAction}
+      deliveryInfo={deliveryInfoDecoded}
       postDeliveryInfoUrl={postDeliveryInfoUrl}
       postDeliveryInfoHeaders={postDeliveryInfoHeadersDecoded}
+      postRedemptionSubmittedUrl={postRedemptionSubmittedUrl}
+      postRedemptionSubmittedHeaders={postRedemptionSubmittedHeadersDecoded}
+      postRedemptionConfirmedUrl={postRedemptionConfirmedUrl}
+      postRedemptionConfirmedHeaders={postRedemptionConfirmedHeadersDecoded}
     ></RedemptionWidget>
   );
 }

tests/redemptionBackend/src/router.ts

@@ -37,6 +37,37 @@ router.post("/fail2", (req, res, next) => {
   }, 2000);
 });
 
+router.post("/fail3", (req, res, next) => {
+  console.log(
+    "Receive POST request",
+    req.url,
+    req.query,
+    req.params,
+    req.body,
+    req.headers
+  );
+  setTimeout(() => {
+    res.status(409).json({
+      accepted: false,
+      reason: `Something has gone wrong`
+    });
+  }, 2000);
+});
+
+router.post("/fail4", (req, res, next) => {
+  console.log(
+    "Receive POST request",
+    req.url,
+    req.query,
+    req.params,
+    req.body,
+    req.headers
+  );
+  setTimeout(() => {
+    res.status(409).send(`Help me please....`);
+  }, 2000);
+});
+
 router.post("/deliveryInfo", (req, res, next) => {
   console.log(
     "Receive POST request",