dd53: showing price/total without fees is a bit excessive, could be simplified in absence of fees

1 files changed, 220 insertions, 322 deletions

diff --git a/packages/taler-wallet-webextension/src/wallet/Transaction.tsx b/packages/taler-wallet-webextension/src/wallet/Transaction.tsx
index 70a6e5491..ff3b44be2 100644
--- a/packages/taler-wallet-webextension/src/wallet/Transaction.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/Transaction.tsx
@@ -1185,127 +1185,6 @@ export function MerchantDetails({
   );
 }
 
-// function DeliveryDetails({
-//   date,
-//   location,
-// }: {
-//   date: TalerProtocolTimestamp | undefined;
-//   location: Location | undefined;
-// }): VNode {
-//   const { i18n } = useTranslationContext();
-//   return (
-//     <PurchaseDetailsTable>
-//       {location && (
-//         <Fragment>
-//           {location.country && (
-//             <tr>
-//               <td>
-//                 <i18n.Translate>Country</i18n.Translate>
-//               </td>
-//               <td>{location.country}</td>
-//             </tr>
-//           )}
-//           {location.address_lines && (
-//             <tr>
-//               <td>
-//                 <i18n.Translate>Address lines</i18n.Translate>
-//               </td>
-//               <td>{location.address_lines}</td>
-//             </tr>
-//           )}
-//           {location.building_number && (
-//             <tr>
-//               <td>
-//                 <i18n.Translate>Building number</i18n.Translate>
-//               </td>
-//               <td>{location.building_number}</td>
-//             </tr>
-//           )}
-//           {location.building_name && (
-//             <tr>
-//               <td>
-//                 <i18n.Translate>Building name</i18n.Translate>
-//               </td>
-//               <td>{location.building_name}</td>
-//             </tr>
-//           )}
-//           {location.street && (
-//             <tr>
-//               <td>
-//                 <i18n.Translate>Street</i18n.Translate>
-//               </td>
-//               <td>{location.street}</td>
-//             </tr>
-//           )}
-//           {location.post_code && (
-//             <tr>
-//               <td>
-//                 <i18n.Translate>Post code</i18n.Translate>
-//               </td>
-//               <td>{location.post_code}</td>
-//             </tr>
-//           )}
-//           {location.town_location && (
-//             <tr>
-//               <td>
-//                 <i18n.Translate>Town location</i18n.Translate>
-//               </td>
-//               <td>{location.town_location}</td>
-//             </tr>
-//           )}
-//           {location.town && (
-//             <tr>
-//               <td>
-//                 <i18n.Translate>Town</i18n.Translate>
-//               </td>
-//               <td>{location.town}</td>
-//             </tr>
-//           )}
-//           {location.district && (
-//             <tr>
-//               <td>
-//                 <i18n.Translate>District</i18n.Translate>
-//               </td>
-//               <td>{location.district}</td>
-//             </tr>
-//           )}
-//           {location.country_subdivision && (
-//             <tr>
-//               <td>
-//                 <i18n.Translate>Country subdivision</i18n.Translate>
-//               </td>
-//               <td>{location.country_subdivision}</td>
-//             </tr>
-//           )}
-//         </Fragment>
-//       )}
-
-//       {!location || !date ? undefined : (
-//         <tr>
-//           <td colSpan={2}>
-//             <hr />
-//           </td>
-//         </tr>
-//       )}
-//       {date && (
-//         <Fragment>
-//           <tr>
-//             <td>
-//               <i18n.Translate>Date</i18n.Translate>
-//             </td>
-//             <td>
-//               <Time
-//                 timestamp={AbsoluteTime.fromProtocolTimestamp(date)}
-//                 format="dd MMMM yyyy, HH:mm"
-//               />
-//             </td>
-//           </tr>
-//         </Fragment>
-//       )}
-//     </PurchaseDetailsTable>
-//   );
-// }
-
 export function ExchangeDetails({ exchange }: { exchange: string }): VNode {
   return (
     <div>
@@ -1365,28 +1244,30 @@ export function InvoiceCreationDetails({
       </tr>
 
       {Amounts.isNonZero(amount.fee) && (
-        <tr>
-          <td>
-            <i18n.Translate>Fees</i18n.Translate>
-          </td>
-          <td>
-            <Amount value={amount.fee} maxFracSize={amount.maxFrac} />
-          </td>
-        </tr>
+        <Fragment>
+          <tr>
+            <td>
+              <i18n.Translate>Fees</i18n.Translate>
+            </td>
+            <td>
+              <Amount value={amount.fee} maxFracSize={amount.maxFrac} />
+            </td>
+          </tr>
+          <tr>
+            <td colSpan={2}>
+              <hr />
+            </td>
+          </tr>
+          <tr>
+            <td>
+              <i18n.Translate>Total</i18n.Translate>
+            </td>
+            <td>
+              <Amount value={amount.total} maxFracSize={amount.maxFrac} />
+            </td>
+          </tr>
+        </Fragment>
       )}
-      <tr>
-        <td colSpan={2}>
-          <hr />
-        </td>
-      </tr>
-      <tr>
-        <td>
-          <i18n.Translate>Total</i18n.Translate>
-        </td>
-        <td>
-          <Amount value={amount.total} maxFracSize={amount.maxFrac} />
-        </td>
-      </tr>
     </PurchaseDetailsTable>
   );
 }
@@ -1410,28 +1291,30 @@ export function InvoicePaymentDetails({
       </tr>
 
       {Amounts.isNonZero(amount.fee) && (
-        <tr>
-          <td>
-            <i18n.Translate>Fees</i18n.Translate>
-          </td>
-          <td>
-            <Amount value={amount.fee} maxFracSize={amount.maxFrac} />
-          </td>
-        </tr>
+        <Fragment>
+          <tr>
+            <td>
+              <i18n.Translate>Fees</i18n.Translate>
+            </td>
+            <td>
+              <Amount value={amount.fee} maxFracSize={amount.maxFrac} />
+            </td>
+          </tr>
+          <tr>
+            <td colSpan={2}>
+              <hr />
+            </td>
+          </tr>
+          <tr>
+            <td>
+              <i18n.Translate>Total</i18n.Translate>
+            </td>
+            <td>
+              <Amount value={amount.value} maxFracSize={amount.maxFrac} />
+            </td>
+          </tr>
+        </Fragment>
       )}
-      <tr>
-        <td colSpan={2}>
-          <hr />
-        </td>
-      </tr>
-      <tr>
-        <td>
-          <i18n.Translate>Total</i18n.Translate>
-        </td>
-        <td>
-          <Amount value={amount.value} maxFracSize={amount.maxFrac} />
-        </td>
-      </tr>
     </PurchaseDetailsTable>
   );
 }
@@ -1455,28 +1338,30 @@ export function TransferCreationDetails({
       </tr>
 
       {Amounts.isNonZero(amount.fee) && (
-        <tr>
-          <td>
-            <i18n.Translate>Fees</i18n.Translate>
-          </td>
-          <td>
-            <Amount value={amount.fee} maxFracSize={amount.maxFrac} />
-          </td>
-        </tr>
+        <Fragment>
+          <tr>
+            <td>
+              <i18n.Translate>Fees</i18n.Translate>
+            </td>
+            <td>
+              <Amount value={amount.fee} maxFracSize={amount.maxFrac} />
+            </td>
+          </tr>
+          <tr>
+            <td colSpan={2}>
+              <hr />
+            </td>
+          </tr>
+          <tr>
+            <td>
+              <i18n.Translate>Transfer</i18n.Translate>
+            </td>
+            <td>
+              <Amount value={amount.total} maxFracSize={amount.maxFrac} />
+            </td>
+          </tr>
+        </Fragment>
       )}
-      <tr>
-        <td colSpan={2}>
-          <hr />
-        </td>
-      </tr>
-      <tr>
-        <td>
-          <i18n.Translate>Transfer</i18n.Translate>
-        </td>
-        <td>
-          <Amount value={amount.total} maxFracSize={amount.maxFrac} />
-        </td>
-      </tr>
     </PurchaseDetailsTable>
   );
 }
@@ -1500,31 +1385,34 @@ export function TransferPickupDetails({
       </tr>
 
       {Amounts.isNonZero(amount.fee) && (
-        <tr>
-          <td>
-            <i18n.Translate>Fees</i18n.Translate>
-          </td>
-          <td>
-            <Amount value={amount.fee} maxFracSize={amount.maxFrac} />
-          </td>
-        </tr>
+        <Fragment>
+          <tr>
+            <td>
+              <i18n.Translate>Fees</i18n.Translate>
+            </td>
+            <td>
+              <Amount value={amount.fee} maxFracSize={amount.maxFrac} />
+            </td>
+          </tr>
+          <tr>
+            <td colSpan={2}>
+              <hr />
+            </td>
+          </tr>
+          <tr>
+            <td>
+              <i18n.Translate>Total</i18n.Translate>
+            </td>
+            <td>
+              <Amount value={amount.total} maxFracSize={amount.maxFrac} />
+            </td>
+          </tr>
+        </Fragment>
       )}
-      <tr>
-        <td colSpan={2}>
-          <hr />
-        </td>
-      </tr>
-      <tr>
-        <td>
-          <i18n.Translate>Total</i18n.Translate>
-        </td>
-        <td>
-          <Amount value={amount.total} maxFracSize={amount.maxFrac} />
-        </td>
-      </tr>
     </PurchaseDetailsTable>
   );
 }
+
 export function WithdrawDetails({
   conversion,
   amount,
@@ -1569,28 +1457,30 @@ export function WithdrawDetails({
         </tr>
       )}
       {Amounts.isNonZero(amount.fee) && (
-        <tr>
-          <td>
-            <i18n.Translate>Fees</i18n.Translate>
-          </td>
-          <td>
-            <Amount value={amount.fee} maxFracSize={amount.maxFrac} />
-          </td>
-        </tr>
+        <Fragment>
+          <tr>
+            <td>
+              <i18n.Translate>Fees</i18n.Translate>
+            </td>
+            <td>
+              <Amount value={amount.fee} maxFracSize={amount.maxFrac} />
+            </td>
+          </tr>
+          <tr>
+            <td colSpan={2}>
+              <hr />
+            </td>
+          </tr>
+          <tr>
+            <td>
+              <i18n.Translate>Total</i18n.Translate>
+            </td>
+            <td>
+              <Amount value={amount.total} maxFracSize={amount.maxFrac} />
+            </td>
+          </tr>
+        </Fragment>
       )}
-      <tr>
-        <td colSpan={2}>
-          <hr />
-        </td>
-      </tr>
-      <tr>
-        <td>
-          <i18n.Translate>Total</i18n.Translate>
-        </td>
-        <td>
-          <Amount value={amount.total} maxFracSize={amount.maxFrac} />
-        </td>
-      </tr>
     </PurchaseDetailsTable>
   );
 }
@@ -1621,69 +1511,72 @@ export function PurchaseDetails({
         </td>
       </tr>
       {Amounts.isNonZero(price.fee) && (
-        <tr>
-          <td>
-            <i18n.Translate>Fees</i18n.Translate>
-          </td>
-          <td>
-            <Amount value={price.fee} />
-          </td>
-        </tr>
-      )}
-      {effectiveRefund && Amounts.isNonZero(effectiveRefund) ? (
-        <Fragment>
-          <tr>
-            <td colSpan={2}>
-              <hr />
-            </td>
-          </tr>
-          <tr>
-            <td>
-              <i18n.Translate>Subtotal</i18n.Translate>
-            </td>
-            <td>
-              <Amount value={price.total} />
-            </td>
-          </tr>
-          <tr>
-            <td>
-              <i18n.Translate>Refunded</i18n.Translate>
-            </td>
-            <td>
-              <Amount value={effectiveRefund} negative />
-            </td>
-          </tr>
-          <tr>
-            <td colSpan={2}>
-              <hr />
-            </td>
-          </tr>
-          <tr>
-            <td>
-              <i18n.Translate>Total</i18n.Translate>
-            </td>
-            <td>
-              <Amount value={Amounts.sub(total, effectiveRefund).amount} />
-            </td>
-          </tr>
-        </Fragment>
-      ) : (
         <Fragment>
           <tr>
-            <td colSpan={2}>
-              <hr />
-            </td>
-          </tr>
-          <tr>
             <td>
-              <i18n.Translate>Total</i18n.Translate>
+              <i18n.Translate>Fees</i18n.Translate>
             </td>
             <td>
-              <Amount value={price.value} />
+              <Amount value={price.fee} />
             </td>
           </tr>
+          {effectiveRefund && Amounts.isNonZero(effectiveRefund) ? (
+            <Fragment>
+              <tr>
+                <td colSpan={2}>
+                  <hr />
+                </td>
+              </tr>
+              <tr>
+                <td>
+                  <i18n.Translate>Subtotal</i18n.Translate>
+                </td>
+                <td>
+                  <Amount value={price.total} />
+                </td>
+              </tr>
+              <tr>
+                <td>
+                  <i18n.Translate>Refunded</i18n.Translate>
+                </td>
+                <td>
+                  <Amount value={effectiveRefund} negative />
+                </td>
+              </tr>
+              <tr>
+                <td colSpan={2}>
+                  <hr />
+                </td>
+              </tr>
+              <tr>
+                <td>
+                  <i18n.Translate>Total</i18n.Translate>
+                </td>
+                <td>
+                  <Amount value={Amounts.sub(total, effectiveRefund).amount} />
+                </td>
+              </tr>
+            </Fragment>
+          ) : (
+            <Fragment>
+              <tr>
+                <td colSpan={2}>
+                  <hr />
+                </td>
+              </tr>
+              <tr>
+                <td>
+                  <i18n.Translate>Total</i18n.Translate>
+                </td>
+                <td>
+                  <Amount value={price.value} />
+                </td>
+              </tr>
+            </Fragment>
+          )}
         </Fragment>
       )}
+
       {/* {hasProducts && (
         <tr>
           <td colSpan={2}>
@@ -1753,28 +1646,30 @@ function RefundDetails({ amount }: { amount: AmountWithFee }): VNode {
       </tr>
 
       {Amounts.isNonZero(amount.fee) && (
-        <tr>
-          <td>
-            <i18n.Translate>Fees</i18n.Translate>
-          </td>
-          <td>
-            <Amount value={amount.fee} maxFracSize={amount.maxFrac} />
-          </td>
-        </tr>
+        <Fragment>
+          <tr>
+            <td>
+              <i18n.Translate>Fees</i18n.Translate>
+            </td>
+            <td>
+              <Amount value={amount.fee} maxFracSize={amount.maxFrac} />
+            </td>
+          </tr>
+          <tr>
+            <td colSpan={2}>
+              <hr />
+            </td>
+          </tr>
+          <tr>
+            <td>
+              <i18n.Translate>Total</i18n.Translate>
+            </td>
+            <td>
+              <Amount value={amount.total} maxFracSize={amount.maxFrac} />
+            </td>
+          </tr>
+        </Fragment>
       )}
-      <tr>
-        <td colSpan={2}>
-          <hr />
-        </td>
-      </tr>
-      <tr>
-        <td>
-          <i18n.Translate>Total</i18n.Translate>
-        </td>
-        <td>
-          <Amount value={amount.total} maxFracSize={amount.maxFrac} />
-        </td>
-      </tr>
     </PurchaseDetailsTable>
   );
 }
@@ -1845,6 +1740,7 @@ function TrackingDepositDetails({
     </PurchaseDetailsTable>
   );
 }
+
 function DepositDetails({ amount }: { amount: AmountWithFee }): VNode {
   const { i18n } = useTranslationContext();
 
@@ -1860,28 +1756,30 @@ function DepositDetails({ amount }: { amount: AmountWithFee }): VNode {
       </tr>
 
       {Amounts.isNonZero(amount.fee) && (
-        <tr>
-          <td>
-            <i18n.Translate>Fees</i18n.Translate>
-          </td>
-          <td>
-            <Amount value={amount.fee} maxFracSize={amount.maxFrac} />
-          </td>
-        </tr>
+        <Fragment>
+          <tr>
+            <td>
+              <i18n.Translate>Fees</i18n.Translate>
+            </td>
+            <td>
+              <Amount value={amount.fee} maxFracSize={amount.maxFrac} />
+            </td>
+          </tr>
+          <tr>
+            <td colSpan={2}>
+              <hr />
+            </td>
+          </tr>
+          <tr>
+            <td>
+              <i18n.Translate>Total</i18n.Translate>
+            </td>
+            <td>
+              <Amount value={amount.total} maxFracSize={amount.maxFrac} />
+            </td>
+          </tr>
+        </Fragment>
       )}
-      <tr>
-        <td colSpan={2}>
-          <hr />
-        </td>
-      </tr>
-      <tr>
-        <td>
-          <i18n.Translate>Total</i18n.Translate>
-        </td>
-        <td>
-          <Amount value={amount.total} maxFracSize={amount.maxFrac} />
-        </td>
-      </tr>
     </PurchaseDetailsTable>
   );
 }