From cdc73997d77f2b62344d966e33919eeee42507fb Mon Sep 17 00:00:00 2001
From: Julien Genestoux <julien.genestoux@gmail.com>
Date: Fri, 16 Feb 2024 09:56:25 -0500
Subject: [PATCH] fix(unlock-app, lockmsith): adding computation of credit card
 discounts (#13355)

adding computation of credit card discounts
---
 locksmith/src/operations/pricingOperations.ts |  2 +-
 packages/ui/lib/components/Detail/Detail.tsx  |  6 +--
 .../components/interface/checkout/Lock.tsx    | 20 ++++----
 .../checkout/main/Confirm/ConfirmCard.tsx     | 50 ++++++++-----------
 .../checkout/main/Confirm/PricingData.tsx     | 12 +++--
 5 files changed, 42 insertions(+), 48 deletions(-)

diff --git a/locksmith/src/operations/pricingOperations.ts b/locksmith/src/operations/pricingOperations.ts
index 2ad9c058a06..344bb6a89d4 100644
--- a/locksmith/src/operations/pricingOperations.ts
+++ b/locksmith/src/operations/pricingOperations.ts
@@ -374,7 +374,7 @@ export const getUsdPricingForRecipient = async ({
     userAddress,
     data,
     network,
-    referrer,
+    referrer: referrer || networks[network]?.multisig || userAddress,
   })
 
   const amount = fromDecimal(purchasePrice, decimals)
diff --git a/packages/ui/lib/components/Detail/Detail.tsx b/packages/ui/lib/components/Detail/Detail.tsx
index a5f421c230e..370b632766d 100644
--- a/packages/ui/lib/components/Detail/Detail.tsx
+++ b/packages/ui/lib/components/Detail/Detail.tsx
@@ -36,7 +36,7 @@ const Wrapper = classed.div('flex gap-1', {
 const Label = classed.span('relative text-gray-700', {
   variants: {
     size: {
-      tiny: 'text-sm',
+      tiny: 'text-xs',
       small: 'text-base',
       medium: 'text-lg',
       large: 'text-2xl',
@@ -50,7 +50,7 @@ const Label = classed.span('relative text-gray-700', {
 const Value = classed.span(`relative font-bold text-black`, {
   variants: {
     size: {
-      tiny: 'text-sm',
+      tiny: 'text-xs',
       small: 'text-base',
       medium: 'text-lg',
       large: 'text-2xl md:text-4xl',
@@ -77,7 +77,7 @@ export const Detail = ({
   className,
 }: DetailProps) => {
   const SizeMapping: SizeStyleProp = {
-    tiny: 'sm',
+    tiny: 'xs',
     small: 'sm',
     medium: 'md',
     large: 'lg',
diff --git a/unlock-app/src/components/interface/checkout/Lock.tsx b/unlock-app/src/components/interface/checkout/Lock.tsx
index 79894742c31..2d38a9c7f79 100644
--- a/unlock-app/src/components/interface/checkout/Lock.tsx
+++ b/unlock-app/src/components/interface/checkout/Lock.tsx
@@ -3,6 +3,7 @@ interface PricingProps {
   usdPrice?: string
   keyPrice?: string
   loading?: boolean
+  extra?: React.ReactNode
 }
 
 export function Pricing({
@@ -10,6 +11,7 @@ export function Pricing({
   keyPrice,
   isCardEnabled,
   loading = false,
+  extra = null,
 }: PricingProps) {
   if (loading) {
     return (
@@ -19,19 +21,15 @@ export function Pricing({
       </div>
     )
   }
-  if (isCardEnabled && !usdPrice) {
-    return (
-      <div className="grid text-right whitespace-nowrap">
-        <span className="font-semibold">{keyPrice}</span>
-      </div>
-    )
-  }
+
   if (isCardEnabled) {
     return (
-      <div className="grid text-right whitespace-nowrap">
-        <span className="font-semibold">{usdPrice}</span>
-        <span className="text-sm text-gray-500">{keyPrice} </span>
-      </div>
+      <>
+        {extra}
+        <div className="grid text-right whitespace-nowrap">
+          <span className="font-semibold">{usdPrice}</span>
+        </div>
+      </>
     )
   }
   return (
diff --git a/unlock-app/src/components/interface/checkout/main/Confirm/ConfirmCard.tsx b/unlock-app/src/components/interface/checkout/main/Confirm/ConfirmCard.tsx
index d147665c62f..1f32ab6161a 100644
--- a/unlock-app/src/components/interface/checkout/main/Confirm/ConfirmCard.tsx
+++ b/unlock-app/src/components/interface/checkout/main/Confirm/ConfirmCard.tsx
@@ -44,7 +44,6 @@ interface CreditCardPricingBreakdownProps {
 
 export function CreditCardPricingBreakdown({
   unlockServiceFee,
-  total,
   creditCardProcessingFee,
   gasCosts,
   loading,
@@ -52,14 +51,14 @@ export function CreditCardPricingBreakdown({
   unlockFeeChargedToUser = true,
 }: CreditCardPricingBreakdownProps) {
   return (
-    <div className="flex flex-col gap-2 pt-4 text-sm">
+    <div className="flex flex-col gap-2 pt-4 text-xs">
       <h3 className="font-medium">
         Credit Card Fees{' '}
         <a
           href="https://unlock-protocol.com/guides/enabling-credit-cards/#faq"
           target="_blank"
           rel="noopener noreferrer"
-          className="px-2 py-0.5 rounded-lg gap-2 text-xs hover:bg-gray-100 bg-gray-50 text-gray-500 hover:text-black"
+          className="px-2 py-0.5 rounded-lg gap-2 hover:bg-gray-100 bg-gray-50 text-gray-500 hover:text-black"
         >
           <span>Learn more</span> <ExternalLinkIcon className="inline" />
         </a>
@@ -68,7 +67,7 @@ export function CreditCardPricingBreakdown({
         {unlockFeeChargedToUser && !loading && (
           <Detail
             loading={loading}
-            className="flex justify-between w-full py-2 text-sm border-t border-gray-300"
+            className="flex justify-between w-full py-2 text-xs border-t border-gray-300"
             label="Service Fee"
             labelSize="tiny"
             valueSize="tiny"
@@ -107,18 +106,6 @@ export function CreditCardPricingBreakdown({
             </div>
           </Detail>
         )}
-        <Detail
-          loading={loading}
-          className="flex justify-between w-full py-2 text-sm border-t border-gray-300"
-          label="Total"
-          labelSize="tiny"
-          valueSize="tiny"
-          inline
-        >
-          <div className="font-normal">
-            {formatFiatPriceFromCents(total, symbol)}
-          </div>
-        </Detail>
       </div>
     </div>
   )
@@ -355,23 +342,30 @@ export function ConfirmCard({
             }
             usdPrice={
               usdTotalPricing
-                ? `~${formatNumber(
+                ? `${formatNumber(
                     usdTotalPricing
                   ).toLocaleString()} ${creditCardCurrencySymbol}`
                 : ''
             }
             isCardEnabled={!!creditCardEnabled}
-          />
-        )}
-        {!isError && pricingData && (
-          <CreditCardPricingBreakdown
-            loading={isTotalPricingDataLoading || !isTotalPricingDataFetched}
-            total={totalPricing?.total ?? 0}
-            creditCardProcessingFee={totalPricing?.creditCardProcessingFee}
-            unlockServiceFee={totalPricing?.unlockServiceFee ?? 0}
-            gasCosts={gasCosts}
-            symbol={creditCardCurrencySymbol}
-            unlockFeeChargedToUser={unlockFeeChargedToUser}
+            extra={
+              !isError &&
+              pricingData && (
+                <CreditCardPricingBreakdown
+                  loading={
+                    isTotalPricingDataLoading || !isTotalPricingDataFetched
+                  }
+                  total={totalPricing?.total ?? 0}
+                  creditCardProcessingFee={
+                    totalPricing?.creditCardProcessingFee
+                  }
+                  unlockServiceFee={totalPricing?.unlockServiceFee ?? 0}
+                  gasCosts={gasCosts}
+                  symbol={creditCardCurrencySymbol}
+                  unlockFeeChargedToUser={unlockFeeChargedToUser}
+                />
+              )
+            }
           />
         )}
       </main>
diff --git a/unlock-app/src/components/interface/checkout/main/Confirm/PricingData.tsx b/unlock-app/src/components/interface/checkout/main/Confirm/PricingData.tsx
index ed6de87bf97..7cf6a933aed 100644
--- a/unlock-app/src/components/interface/checkout/main/Confirm/PricingData.tsx
+++ b/unlock-app/src/components/interface/checkout/main/Confirm/PricingData.tsx
@@ -32,9 +32,11 @@ export function PricingData({ pricingData, lock, payment }: PricingDataProps) {
                 Number(lock!.keyPrice)
               : 0
 
-          const symbol = payment?.route?.trade
-            ? payment.route.trade.inputAmount.currency.symbol
-            : item.symbol
+          const symbol = (
+            payment?.route?.trade
+              ? payment.route.trade.inputAmount.currency.symbol
+              : item.symbol
+          ).toUpperCase()
 
           return (
             <div
@@ -57,7 +59,7 @@ export function PricingData({ pricingData, lock, payment }: PricingDataProps) {
 
               {/* We hide the unit prices since we don't have them when using swap and pay */}
               {!payment.route && (
-                <div className="font-bold">
+                <span className="font-bold whitespace-nowrap">
                   {item.amount <= 0
                     ? 'FREE'
                     : payment?.route
@@ -67,7 +69,7 @@ export function PricingData({ pricingData, lock, payment }: PricingDataProps) {
                           .toFixed()
                       ).toLocaleString()} ${symbol}`
                     : `${formatNumber(item.amount).toLocaleString()} ${symbol}`}
-                </div>
+                </span>
               )}
             </div>
           )