fix: Add tooltip for fluctuation fee (#3067)

decentraland · Mar 28, 2024 · 23b9574 · 23b9574
1 parent f9527a4
commit 23b9574
Show file tree

Hide file tree

Showing 5 changed files with 20 additions and 5 deletions.
diff --git a/...nents/Modals/PublishWizardCollectionModal/PayPublicationFeeStep/PayPublicationFeeStep.css b/...nents/Modals/PublishWizardCollectionModal/PayPublicationFeeStep/PayPublicationFeeStep.css
@@ -91,6 +91,7 @@
 .PayPublicationFeeStep .actions .actions-right {
   display: flex;
   gap: 1rem;
+  align-items: center;
 }
 
 .PayPublicationFeeStep .actions .actions-right button {
@@ -107,6 +108,10 @@
   color: black;
 }
 
+.pay-with-card-info-tooltip {
+  z-index: 3000 !important;
+}
+
 .PayPublicationFeeStep .actions .button {
   max-width: 220px;
 }

diff --git a/...nents/Modals/PublishWizardCollectionModal/PayPublicationFeeStep/PayPublicationFeeStep.tsx b/...nents/Modals/PublishWizardCollectionModal/PayPublicationFeeStep/PayPublicationFeeStep.tsx
@@ -2,7 +2,7 @@ import React, { useCallback } from 'react'
 import { ethers } from 'ethers'
 import { Network } from '@dcl/schemas'
 import { config } from 'config'
-import { Button, Column, Icon, Mana, Modal, Row } from 'decentraland-ui'
+import { Button, Column, Icon, InfoTooltip, Mana, Modal, Row } from 'decentraland-ui'
 import { t } from 'decentraland-dapps/dist/modules/translation/utils'
 import { toFixedMANAValue } from 'decentraland-dapps/dist/lib/mana'
 import { Currency, Rarity } from 'modules/item/types'
@@ -145,10 +145,17 @@ export const PayPublicationFeeStep: React.FC<
           </Button>
           <div className="actions-right">
             {isPublishCollectionsWertEnabled ? (
-              <Button className="pay-with-card" onClick={handleBuyWithFiat} disabled={isLoading} loading={isLoading}>
-                <Icon name="credit card outline" />
-                <span>{t('publish_wizard_collection_modal.pay_publication_fee_step.pay_card')}</span>
-              </Button>
+              <>
+                <InfoTooltip
+                  className="pay-with-card-info-tooltip"
+                  position="bottom center"
+                  content={t('publish_wizard_collection_modal.pay_publication_fee_step.pay_card_info')}
+                />
+                <Button className="pay-with-card" onClick={handleBuyWithFiat} disabled={isLoading} loading={isLoading}>
+                  <Icon name="credit card outline" />
+                  <span>{t('publish_wizard_collection_modal.pay_publication_fee_step.pay_card')}</span>
+                </Button>
+              </>
             ) : null}
             <Button primary onClick={handleBuyWithMana} disabled={hasInsufficientMANA || isLoading} loading={isLoading}>
               <Mana inline size="small" network={Network.MATIC} />

diff --git a/src/modules/translation/languages/en.json b/src/modules/translation/languages/en.json
@@ -1728,6 +1728,7 @@
       "total_in_usd": "Total in {currency}",
       "total_in_mana": "Total in MANA",
       "pay_card": "pay by card",
+      "pay_card_info": "When paying by card, an extra 0.5% of the total amount will be charged to handle price fluctuations.",
       "pay_mana": "pay with mana"
     },
     "congratulations_step": {

diff --git a/src/modules/translation/languages/es.json b/src/modules/translation/languages/es.json
@@ -1739,6 +1739,7 @@
       "total_in_usd": "Total en {currency}",
       "total_in_mana": "Total en MANA",
       "pay_card": "pagar con tarjeta",
+      "pay_card_info": "Al pagar con tarjeta, se cobrará un extra del 0.5% del monto total para manejar las fluctuaciones de precios.",
       "pay_mana": "pagar con mana"
     },
     "congratulations_step": {

diff --git a/src/modules/translation/languages/zh.json b/src/modules/translation/languages/zh.json
@@ -1721,6 +1721,7 @@
       "total_in_usd": "总计 {currency}",
       "total_in_mana": "总计 MANA",
       "pay_card": "用卡支付",
+      "pay_card_info": "使用卡支付时，将额外收取总金额的0.5%以应对价格波动。",
       "pay_mana": "用法力支付"
     },
     "congratulations_step": {