feat(MED-97): update cart flow for using benefits

app/home/(user)/_components/order/cart-totals.tsx

@@ -8,6 +8,11 @@ import { useTranslation } from 'react-i18next';
 
 import { Trans } from '@kit/ui/trans';
 
+const PaymentProviderIds = {
+  COMPANY_BENEFITS: "pp_company-benefits_company-benefits",
+  MONTONIO: "pp_montonio_montonio",
+};
+
 export default function CartTotals({
   medusaOrder,
 }: {
@@ -20,11 +25,16 @@ export default function CartTotals({
     currency_code,
     total,
     subtotal,
-    tax_total,
     discount_total,
     gift_card_total,
+    payment_collections,
   } = medusaOrder;
 
+  const montonioPayment = payment_collections?.[0]?.payments
+    ?.find(({ provider_id }) => provider_id === PaymentProviderIds.MONTONIO);
+  const companyBenefitsPayment = payment_collections?.[0]?.payments
+    ?.find(({ provider_id }) => provider_id === PaymentProviderIds.COMPANY_BENEFITS);
+
   return (
     <div>
       <div className="txt-medium text-ui-fg-subtle flex flex-col gap-y-2">
@@ -86,8 +96,11 @@ export default function CartTotals({
             </span>
           </div>
         )}
+
       </div>
+
       <div className="my-4 h-px w-full border-b border-gray-200" />
+
       <div className="text-ui-fg-base txt-medium mb-2 flex items-center justify-between">
         <span className="font-bold">
           <Trans i18nKey="cart:order.total" />
@@ -104,7 +117,42 @@ export default function CartTotals({
           })}
         </span>
       </div>
-      <div className="mt-4 h-px w-full border-b border-gray-200" />
+
+      <div className="my-4 h-px w-full border-b border-gray-200" />
+
+      <div className="txt-medium text-ui-fg-subtle flex flex-col gap-y-2">
+        {companyBenefitsPayment && (
+          <div className="flex items-center justify-between">
+            <span className="flex items-center gap-x-1">
+              <Trans i18nKey="cart:order.benefitsTotal" />
+            </span>
+            <span data-testid="cart-subtotal" data-value={companyBenefitsPayment.amount || 0}>
+              -{' '}
+              {formatCurrency({
+                value: companyBenefitsPayment.amount ?? 0,
+                currencyCode: currency_code,
+                locale: language,
+              })}
+            </span>
+          </div>
+        )}
+
+        {montonioPayment && (
+          <div className="flex items-center justify-between">
+            <span className="flex items-center gap-x-1">
+              <Trans i18nKey="cart:order.montonioTotal" />
+            </span>
+            <span data-testid="cart-subtotal" data-value={montonioPayment.amount || 0}>
+              -{' '}
+              {formatCurrency({
+                value: montonioPayment.amount ?? 0,
+                currencyCode: currency_code,
+                locale: language,
+              })}
+            </span>
+          </div>
+        )}
+      </div>
     </div>
   );
 }

app/home/(user)/_components/order/order-details.tsx

@@ -11,7 +11,7 @@ export default function OrderDetails({ order }: { order: AnalysisOrder }) {
         <span className="font-bold">
           <Trans i18nKey="cart:orderConfirmed.orderNumber" />:{' '}
         </span>
-        <span>{order.medusa_order_id}</span>
+        <span className="break-all">{order.medusa_order_id}</span>
       </div>
 
       <div>