Merge pull request #240 from farrah-deriv/FEQ-2543/fix-rate

farrah/FEQ-2543/fix: rate and button issues
deriv-com · Aug 5, 2024 · fc9d71e · fc9d71e
2 parents db4144f + 5738f61
commit fc9d71e
Show file tree

Hide file tree

Showing 5 changed files with 30 additions and 47 deletions.
diff --git a/src/components/AdvertsTableRow/AdvertsTableRow.scss b/src/components/AdvertsTableRow/AdvertsTableRow.scss
@@ -1,7 +1,7 @@
 .adverts-table-row {
     width: 100%;
     display: grid;
-    grid-template-columns: 2fr 1.4fr 1.4fr 2.4fr auto;
+    grid-template-columns: 2fr 1.4fr 1.4fr 2.4fr 1.4fr;
     padding: 1.6rem;
     align-items: center;
 

diff --git a/src/components/BuySellForm/BuySellForm.tsx b/src/components/BuySellForm/BuySellForm.tsx
@@ -74,7 +74,7 @@ const BuySellForm = ({ advertId, isModalOpen, onRequestClose }: TBuySellFormProp
     const [buySellAmount, setBuySellAmount] = useState('0');
 
     const {
-        account_currency: accountCurrency,
+        account_currency: accountCurrency = '',
         advertiser_details: advertiserDetails,
         description,
         effective_rate: adEffectiveRate,

diff --git a/src/pages/buy-sell/screens/BuySellTable/BuySellTable.scss b/src/pages/buy-sell/screens/BuySellTable/BuySellTable.scss
@@ -3,7 +3,7 @@
         &__header {
             padding: 1.6rem;
             border-bottom: 1px solid #f2f3f4;
-            grid-template-columns: 2fr 1.4fr 1.4fr 2.4fr 0.8fr;
+            grid-template-columns: 2fr 1.4fr 1.4fr 2.4fr 1.4fr;
         }
 
         &__content {

diff --git a/...ages/orders/components/OrderDetailsCard/OrderDetailsCardFooter/OrderDetailsCardFooter.tsx b/...ages/orders/components/OrderDetailsCard/OrderDetailsCardFooter/OrderDetailsCardFooter.tsx
@@ -150,7 +150,7 @@ const OrderDetailsCardFooter = ({ sendFile }: { sendFile: (file: File) => void }
     };
 
     return (
-        <div className='order-details-card-footer'>
+        <div className='order-details-card-footer justify-end'>
             {shouldShowCancelAndPaidButton && (
                 <div className='flex gap-3 ml-auto'>
                     <Button
@@ -168,43 +168,22 @@ const OrderDetailsCardFooter = ({ sendFile }: { sendFile: (file: File) => void }
                     </Button>
                 </div>
             )}
-            {shouldShowComplainAndReceivedButton && (
-                <div className='flex gap-[0.8rem] justify-end w-full'>
-                    <Button
-                        className='border-2'
-                        color='primary-light'
-                        onClick={() => showModal('OrderDetailsComplainModal')}
-                        size='lg'
-                        textSize={textSize}
-                        variant='ghost'
-                    >
-                        <Localize i18n_default_text='Complain' />
-                    </Button>
-                    <Button onClick={() => mutate({ id })} size='lg' textSize={textSize}>
-                        <Localize i18n_default_text='I’ve received payment' />
-                    </Button>
-                </div>
-            )}
-            {shouldShowOnlyComplainButton && (
-                <div className='ml-auto'>
-                    <Button
-                        className='border-2'
-                        color='primary-light'
-                        onClick={() => showModal('OrderDetailsComplainModal')}
-                        size='lg'
-                        textSize={textSize}
-                        variant='ghost'
-                    >
-                        <Localize i18n_default_text='Complain' />
-                    </Button>
-                </div>
+            {(shouldShowOnlyComplainButton || shouldShowComplainAndReceivedButton) && (
+                <Button
+                    className='border-2 mr-[0.8rem]'
+                    color='primary-light'
+                    onClick={() => showModal('OrderDetailsComplainModal')}
+                    size='lg'
+                    textSize={textSize}
+                    variant='ghost'
+                >
+                    <Localize i18n_default_text='Complain' />
+                </Button>
             )}
-            {shouldShowOnlyReceivedButton && (
-                <div className='ml-auto'>
-                    <Button onClick={() => mutate({ id })} size='lg' textSize={textSize}>
-                        <Localize i18n_default_text='I’ve received payment' />
-                    </Button>
-                </div>
+            {(shouldShowOnlyReceivedButton || shouldShowComplainAndReceivedButton) && (
+                <Button onClick={() => mutate({ id })} size='lg' textSize={textSize}>
+                    <Localize i18n_default_text='I’ve received payment' />
+                </Button>
             )}
             {!!isModalOpenFor('OrderDetailsComplainModal') && (
                 <OrderDetailsComplainModal

diff --git a/src/utils/format-value.ts b/src/utils/format-value.ts
@@ -66,16 +66,20 @@ export const generateEffectiveRate = ({
 
     if (rateType === RATE_TYPE.FIXED) {
         effectiveRate = price;
-        displayEffectiveRate = FormatUtils.formatMoney(effectiveRate, { currency: localCurrency });
+        displayEffectiveRate = effectiveRate
+            ? FormatUtils.formatMoney(effectiveRate, { currency: localCurrency })
+            : '-';
     } else {
         effectiveRate = exchangeRate > 0 ? percentOf(exchangeRate, rate) : marketRate;
         const decimalPlace = setDecimalPlaces(effectiveRate, 6);
-        displayEffectiveRate = removeTrailingZeros(
-            FormatUtils.formatMoney(Number(roundOffDecimal(effectiveRate, decimalPlace)), {
-                currency: localCurrency,
-                decimalPlaces: decimalPlace,
-            })
-        );
+        displayEffectiveRate = effectiveRate
+            ? removeTrailingZeros(
+                  FormatUtils.formatMoney(Number(roundOffDecimal(effectiveRate, decimalPlace)), {
+                      currency: localCurrency,
+                      decimalPlaces: decimalPlace,
+                  })
+              )
+            : '-';
     }
     return { displayEffectiveRate, effectiveRate: Number(effectiveRate) };
 };