frontend: update pocket info content

Added info about which currencies, transfer methods, reccuring
payments and identity verification.

Author: thisconnect

frontends/web/src/locales/en/app.json

@@ -333,9 +333,27 @@
           "supportedCurrencies": "Supports all major fiat currencies: USD, EUR, CHF, and more."
         },
         "pocket": {
-          "fee": "Fee: {{fee}}%",
+          "fees": {
+            "info": "Bank transfer: {{fee}}%",
+            "title": "Fees"
+          },
           "learnMore": "Learn more about Pocket",
-          "supportedBankTransfers": "Supports CHF SEPA and EUR instant SEPA bank transfers"
+          "payment": {
+            "bankTransfer": "Bank transfer",
+            "bankTransferDetails": {
+              "sepa": "SEPA and SEPA Instant (EUR transactions in SEPA countries only)",
+              "sic": "Swiss Interbank Clearing (CHF transactions in CH/LI only)",
+              "uk": "UK Faster Payments (GBP transactions in the UK only)"
+            },
+            "bankTransferReccuring": "How to set up recurring purchases with a standing order?",
+            "title": "Payment methods"
+          },
+          "supportedCurrencies": "Supports European currencies: EUR, GBP, and CHF.",
+          "verification": {
+            "info": "Only requires identity verification above daily and annual thresholds.",
+            "link": "Find current thresholds here",
+            "title": "Identity verification"
+          }
         },
         "region": {
           "title": "Select the region your bank account is registered in to see which options are available to you."

frontends/web/src/routes/buy/components/infocontent.tsx

@@ -63,13 +63,46 @@ export const MoonPayInfo = ({ cardFee, bankTransferFee }: TMoonPayInfo) => {
 
 export const PocketInfo = ({ bankTransferFee }: TPocketInfo) => {
   const { t } = useTranslation();
-  const formattedBankTransferFee = bankTransferFee && bankTransferFee * 100;
+  const fee = bankTransferFee && bankTransferFee * 100;
   return (
     <div className={style.container}>
-      <p>{t('buy.exchange.infoContent.pocket.supportedBankTransfers')}</p>
-      <p>{t('buy.exchange.infoContent.pocket.fee', { fee: formattedBankTransferFee })}</p>
+      <p>{t('buy.exchange.infoContent.pocket.supportedCurrencies')}</p>
+      <br />
+      <p><b>{t('buy.exchange.infoContent.pocket.payment.title')}</b></p>
+      <br />
+      <p>{t('buy.exchange.infoContent.pocket.payment.bankTransfer')}</p>
+      <ul>
+        <li>{t('buy.exchange.infoContent.pocket.payment.bankTransferDetails.sepa')}</li>
+        <li>{t('buy.exchange.infoContent.pocket.payment.bankTransferDetails.uk')}</li>
+        <li>{t('buy.exchange.infoContent.pocket.payment.bankTransferDetails.sic')}</li>
+      </ul>
       <br/>
-      <p><A href="https://pocketbitcoin.com/">{t('buy.exchange.infoContent.pocket.learnMore')}</A></p>
+      <p>
+        <A href="https://pocketbitcoin.com/faq/how-do-I-set-up-my-standing-order">
+          {t('buy.exchange.infoContent.pocket.payment.bankTransferReccuring')}
+        </A>
+      </p>
+      <br />
+      <p><b>{t('buy.exchange.infoContent.pocket.verification.title')}</b></p>
+      <br />
+      <p>{t('buy.exchange.infoContent.pocket.verification.info')}</p>
+      <br />
+      <p>
+        <A href="https://pocketbitcoin.com/faq/are-there-any-limits-with-pocket">
+          {t('buy.exchange.infoContent.pocket.verification.link')}
+        </A>
+      </p>
+      <br />
+      <p><b>{t('buy.exchange.infoContent.pocket.fees.title')}</b></p>
+      <ul>
+        <li>{t('buy.exchange.infoContent.pocket.fees.info', { fee })}</li>
+      </ul>
+      <br />
+      <p>
+        <A href="https://pocketbitcoin.com/">
+          {t('buy.exchange.infoContent.pocket.learnMore')}
+        </A>
+      </p>
     </div>
   );
 };