From a160f3151440106f5dcee11e2c3af2a4d8ed036e Mon Sep 17 00:00:00 2001
From: Sebastian <sebasjm@gmail.com>
Date: Tue, 20 Dec 2022 15:23:33 -0300
Subject: fix #7291

---
 .../src/wallet/ExchangeSelection/views.tsx         | 195 +++++++++++++++++----
 1 file changed, 157 insertions(+), 38 deletions(-)

(limited to 'packages/taler-wallet-webextension/src/wallet/ExchangeSelection/views.tsx')

diff --git a/packages/taler-wallet-webextension/src/wallet/ExchangeSelection/views.tsx b/packages/taler-wallet-webextension/src/wallet/ExchangeSelection/views.tsx
index 95ab55261..26ff2c0d3 100644
--- a/packages/taler-wallet-webextension/src/wallet/ExchangeSelection/views.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/ExchangeSelection/views.tsx
@@ -178,7 +178,11 @@ export function ComparingView({
   selected,
   onReset,
   onSelect,
-  pairTimeline,
+  coinOperationTimeline,
+  globalFeeTimeline,
+  wireFeeTimeline,
+  missingWireTYpe,
+  newWireType,
   onShowPrivacy,
   onShowTerms,
 }: State.Comparing): VNode {
@@ -249,8 +253,15 @@ export function ComparingView({
       </section>
       <section>
         <h2>
-          <i18n.Translate>Operations</i18n.Translate>
+          <i18n.Translate>Coin operations</i18n.Translate>
         </h2>
+        <p>
+          <i18n.Translate>
+            Every operation in this section may be different by denomination
+            value and is valid for a period of time. The exchange will charge
+            the indicated amount every time a coin is used in such operation.
+          </i18n.Translate>
+        </p>
         <p>
           <i18n.Translate>Deposits</i18n.Translate>
         </p>
@@ -274,7 +285,7 @@ export function ComparingView({
           </thead>
           <tbody>
             <RenderFeePairByValue
-              list={pairTimeline.deposit}
+              list={coinOperationTimeline.deposit}
               sorting={(a, b) => Number(a) - Number(b)}
             />
           </tbody>
@@ -290,7 +301,10 @@ export function ComparingView({
                 <i18n.Translate>Denomination</i18n.Translate>
               </th>
               <th class="fee">
-                <i18n.Translate>Fee</i18n.Translate>
+                <i18n.Translate>Current</i18n.Translate>
+              </th>
+              <th class="fee">
+                <i18n.Translate>Selected</i18n.Translate>
               </th>
               <th>
                 <i18n.Translate>Until</i18n.Translate>
@@ -299,7 +313,7 @@ export function ComparingView({
           </thead>
           <tbody>
             <RenderFeePairByValue
-              list={pairTimeline.withdraw}
+              list={coinOperationTimeline.withdraw}
               sorting={(a, b) => Number(a) - Number(b)}
             />
           </tbody>
@@ -315,7 +329,10 @@ export function ComparingView({
                 <i18n.Translate>Denomination</i18n.Translate>
               </th>
               <th class="fee">
-                <i18n.Translate>Fee</i18n.Translate>
+                <i18n.Translate>Current</i18n.Translate>
+              </th>
+              <th class="fee">
+                <i18n.Translate>Selected</i18n.Translate>
               </th>
               <th>
                 <i18n.Translate>Until</i18n.Translate>
@@ -324,7 +341,7 @@ export function ComparingView({
           </thead>
           <tbody>
             <RenderFeePairByValue
-              list={pairTimeline.refund}
+              list={coinOperationTimeline.refund}
               sorting={(a, b) => Number(a) - Number(b)}
             />
           </tbody>
@@ -340,7 +357,10 @@ export function ComparingView({
                 <i18n.Translate>Denomination</i18n.Translate>
               </th>
               <th class="fee">
-                <i18n.Translate>Fee</i18n.Translate>
+                <i18n.Translate>Current</i18n.Translate>
+              </th>
+              <th class="fee">
+                <i18n.Translate>Selected</i18n.Translate>
               </th>
               <th>
                 <i18n.Translate>Until</i18n.Translate>
@@ -349,12 +369,140 @@ export function ComparingView({
           </thead>
           <tbody>
             <RenderFeePairByValue
-              list={pairTimeline.refresh}
+              list={coinOperationTimeline.refresh}
               sorting={(a, b) => Number(a) - Number(b)}
             />
           </tbody>
         </FeeDescriptionTable>{" "}
       </section>
+      <section>
+        <h2>
+          <i18n.Translate>Transfer operations</i18n.Translate>
+        </h2>
+        <p>
+          <i18n.Translate>
+            Every operation in this section may be different by transfer type
+            and is valid for a period of time. The exchange will charge the
+            indicated amount every time a transfer is made.
+          </i18n.Translate>
+        </p>
+        {missingWireTYpe.map((type) => {
+          return (
+            <p key={type}>
+              Wire <b>{type}</b> is not supported for this exchange.
+            </p>
+          );
+        })}
+        {newWireType.map((type) => {
+          return (
+            <Fragment key={type}>
+              <p>
+                Wire <b>{type}</b> is not supported for the previous exchange.
+              </p>
+              <FeeDescriptionTable>
+                <thead>
+                  <tr>
+                    <th>&nbsp;</th>
+                    <th>
+                      <i18n.Translate>Operation</i18n.Translate>
+                    </th>
+                    <th class="fee">
+                      <i18n.Translate>Fee</i18n.Translate>
+                    </th>
+                    <th>
+                      <i18n.Translate>Until</i18n.Translate>
+                    </th>
+                  </tr>
+                </thead>
+                <tbody>
+                  <RenderFeeDescriptionByValue
+                    list={selected.transferFees[type]}
+                  />
+                </tbody>
+              </FeeDescriptionTable>
+            </Fragment>
+          );
+        })}
+        {Object.entries(wireFeeTimeline).map(([type, fees], idx) => {
+          return (
+            <Fragment key={idx}>
+              <p>{type}</p>
+              <FeeDescriptionTable>
+                <thead>
+                  <tr>
+                    <th>&nbsp;</th>
+                    <th>
+                      <i18n.Translate>Operation</i18n.Translate>
+                    </th>
+                    <th class="fee">
+                      <i18n.Translate>Current</i18n.Translate>
+                    </th>
+                    <th class="fee">
+                      <i18n.Translate>Selected</i18n.Translate>
+                    </th>
+                    <th>
+                      <i18n.Translate>Until</i18n.Translate>
+                    </th>
+                  </tr>
+                </thead>
+                <tbody>
+                  <RenderFeePairByValue
+                    list={fees}
+                    sorting={(a, b) => a.localeCompare(b)}
+                  />
+                </tbody>
+              </FeeDescriptionTable>
+            </Fragment>
+          );
+        })}
+      </section>
+      <section>
+        <h2>
+          <i18n.Translate>Wallet operations</i18n.Translate>
+        </h2>
+        <p>
+          <i18n.Translate>
+            Every operation in this section may be different by transfer type
+            and is valid for a period of time. The exchange will charge the
+            indicated amount every time a transfer is made.
+          </i18n.Translate>
+        </p>
+        <FeeDescriptionTable>
+          <thead>
+            <tr>
+              <th>&nbsp;</th>
+              <th>
+                <i18n.Translate>Feature</i18n.Translate>
+              </th>
+              <th class="fee">
+                <i18n.Translate>Current</i18n.Translate>
+              </th>
+              <th class="fee">
+                <i18n.Translate>Selected</i18n.Translate>
+              </th>
+              <th>
+                <i18n.Translate>Until</i18n.Translate>
+              </th>
+            </tr>
+          </thead>
+          <tbody>
+            <RenderFeePairByValue
+              list={globalFeeTimeline}
+              sorting={(a, b) => a.localeCompare(b)}
+            />
+          </tbody>
+        </FeeDescriptionTable>
+      </section>
+      <section>
+        <ButtonGroupFooter>
+          <Button onClick={onShowPrivacy.onClick} variant="outlined">
+            Privacy policy
+          </Button>
+          <Button onClick={onShowTerms.onClick} variant="outlined">
+            Terms of service
+          </Button>
+        </ButtonGroupFooter>
+      </section>
       <section>
         <ButtonGroupFooter>
           <Button onClick={onShowPrivacy.onClick} variant="outlined">
@@ -755,35 +903,6 @@ function RenderFeePairByValue({
     .sort(sorting)
     .map((i, idx) => <FeePairRowsGroup key={idx} infos={grouped[i]} />);
   return <Fragment>{p}</Fragment>;
-
-  // return (
-  //   <Fragment>
-  //     {
-  //       list.reduce(
-  //         (prev, info, idx) => {
-  //           const next = idx >= list.length - 1 ? undefined : list[idx + 1];
-
-  //           const nextIsMoreInfo =
-  //             next !== undefined && next.group === info.group;
-
-  //           prev.rows.push(info);
-
-  //           if (nextIsMoreInfo) {
-  //             return prev;
-  //           }
-
-  //           // prev.rows = [];
-  //           prev.views.push(<FeePairRowsGroup infos={prev.rows} />);
-  //           return prev;
-  //         },
-  //         { rows: [], views: [] } as {
-  //           rows: FeeDescriptionPair[];
-  //           views: h.JSX.Element[];
-  //         },
-  //       ).views
-  //     }
-  //   </Fragment>
-  // );
 }
 /**
  *
-- 
cgit v1.2.3