Merge branch 'frontend-btcdirect-disclaimertext' into staging-btcdirect

BitBoxSwiss · Feb 13, 2025 · c3f14ef · c3f14ef
2 parents be00431 + 4b57e3b
commit c3f14ef
Show file tree

Hide file tree

Showing 8 changed files with 101 additions and 101 deletions.
diff --git a/frontends/web/src/components/terms/btcdirect-otc-terms.tsx b/frontends/web/src/components/terms/btcdirect-otc-terms.tsx
@@ -26,26 +26,27 @@ type TProps = {
   onContinue: () => void;
 }
 
+export const getBTCDirectPrivacyLink = () => {
+  switch (i18n.resolvedLanguage) {
+  case 'de':
+    return 'https://btcdirect.eu/de-at/datenschutzenklaerung?BitBox';
+  case 'nl':
+    return 'https://btcdirect.eu/nl-nl/privacy-policy?BitBox';
+  case 'es':
+    return 'https://btcdirect.eu/es-es/privacy-policy?BitBox';
+  case 'fr':
+    return 'https://btcdirect.eu/fr-fr/privacy-policy?BitBox';
+  default:
+    return 'https://btcdirect.eu/en-eu/privacy-policy?BitBox';
+  }
+};
+
+const handleSkipDisclaimer = (e: ChangeEvent<HTMLInputElement>) => {
+  setConfig({ frontend: { skipBTCDirectOTCDisclaimer: e.target.checked } });
+};
+
 export const BTCDirectOTCTerms = ({ onContinue }: TProps) => {
   const { t } = useTranslation();
-  const handleSkipDisclaimer = (e: ChangeEvent<HTMLInputElement>) => {
-    setConfig({ frontend: { skipBTCDirectOTCDisclaimer: e.target.checked } });
-  };
-
-  const getPrivacyLink = () => {
-    switch (i18n.resolvedLanguage) {
-    case 'de':
-      return 'https://btcdirect.eu/de-at/datenschutzenklaerung?BitBox';
-    case 'nl':
-      return 'https://btcdirect.eu/nl-nl/privacy-policy?BitBox';
-    case 'es':
-      return 'https://btcdirect.eu/es-es/privacy-policy?BitBox';
-    case 'fr':
-      return 'https://btcdirect.eu/fr-fr/privacy-policy?BitBox';
-    default:
-      return 'https://btcdirect.eu/en-eu/privacy-policy?BitBox';
-    }
-  };
 
   return (
     <div className={style.disclaimerContainer}>
@@ -84,7 +85,7 @@ export const BTCDirectOTCTerms = ({ onContinue }: TProps) => {
         <h2 className={style.title}>{t('buy.exchange.infoContent.btcdirect.disclaimer.dataProtection.title')}</h2>
         <p>{t('buy.exchange.infoContent.btcdirect.disclaimer.dataProtection.text')}</p>
         <p>
-          <A href={getPrivacyLink()}>
+          <A href={getBTCDirectPrivacyLink()}>
             {t('buy.exchange.infoContent.btcdirect.disclaimer.dataProtection.link')}
           </A>
         </p>

diff --git a/frontends/web/src/components/terms/btcdirect-terms.tsx b/frontends/web/src/components/terms/btcdirect-terms.tsx
@@ -21,92 +21,61 @@ import { Button, Checkbox } from '@/components/forms';
 import { setConfig } from '@/utils/config';
 import { IAccount } from '@/api/account';
 import { A } from '@/components/anchor/anchor';
+import { getBTCDirectAboutUsLink } from '@/routes/exchange/components/infocontent';
+import { getBTCDirectPrivacyLink } from './btcdirect-otc-terms';
 import style from './terms.module.css';
 
 type TProps = {
   account: IAccount;
   onAgreedTerms: () => void;
 }
 
+const handleSkipDisclaimer = (e: ChangeEvent<HTMLInputElement>) => {
+  setConfig({ frontend: { skipBTCDirectWidgetDisclaimer: e.target.checked } });
+};
+
 export const BTCDirectTerms = ({ account, onAgreedTerms }: TProps) => {
   const { t } = useTranslation();
 
-  const handleSkipDisclaimer = (e: ChangeEvent<HTMLInputElement>) => {
-    setConfig({ frontend: { skipBTCDirectDisclaimer: e.target.checked } });
-  };
-
-  const coinCode = account.coinCode.toUpperCase();
   const isBitcoin = isBitcoinOnly(account.coinCode);
 
-  // TODO: change the copy of MoonPay terms to BTCDirect
   return (
     <div className={style.disclaimerContainer}>
       <div className={style.disclaimer}>
-        BTC Direct
         <h2 className={style.title}>
-          {t('buy.info.disclaimer.title', {
+          {t('buy.exchange.infoContent.btcdirectWidget.disclaimer.title', {
             context: isBitcoin ? 'bitcoin' : 'crypto'
           })}
         </h2>
-        <p>{t('buy.info.disclaimer.intro.0', { coinCode })}</p>
-        <p>{t('buy.info.disclaimer.intro.1', { coinCode })}</p>
+        <p>{t('buy.exchange.infoContent.btcdirectWidget.disclaimer.description')}</p>
         <h2 className={style.title}>
-          {t('buy.info.disclaimer.payment.title')}
+          {t('buy.exchange.infoContent.btcdirectWidget.disclaimer.paymentMethods.title')}
         </h2>
-        <p>{t('buy.info.disclaimer.payment.details', { coinCode })}</p>
-        <div className={style.table}>
-          <table>
-            <colgroup>
-              <col width="*" />
-              <col width="50px" />
-              <col width="*" />
-            </colgroup>
-            <thead>
-              <tr>
-                <th>{t('buy.info.disclaimer.payment.table.method')}</th>
-                <th>{t('buy.info.disclaimer.payment.table.fee')}</th>
-                <th>{t('buy.info.disclaimer.payment.table.description')}</th>
-              </tr>
-            </thead>
-            <tbody>
-              <tr>
-                <td>{t('buy.info.disclaimer.payment.table.1_method')}</td>
-                <td className={style.nowrap}>1.9 %</td>
-                <td>{t('buy.info.disclaimer.payment.table.1_description')}</td>
-              </tr>
-              <tr>
-                <td>{t('buy.info.disclaimer.payment.table.2_method')}</td>
-                <td className={style.nowrap}>4.9 %</td>
-                <td>{t('buy.info.disclaimer.payment.table.2_description')}</td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-        <p>{t('buy.info.disclaimer.payment.footnote')}</p>
-        <h2 className={style.title}>
-          {t('buy.info.disclaimer.security.title')}
-        </h2>
-        <p>
-          {t('buy.info.disclaimer.security.descriptionGeneric', {
-            context: isBitcoin ? 'bitcoin' : 'crypto'
-          })}
-        </p>
+        <ul>
+          <li>
+            <p>{t('buy.exchange.infoContent.btcdirectWidget.disclaimer.paymentMethods.buy')}</p>
+          </li>
+        </ul>
+        <p>{t('buy.exchange.infoContent.btcdirectWidget.disclaimer.paymentMethods.note')}</p>
         <p>
-          <A href="https://bitbox.swiss/bitbox02/threat-model/">
-            {t('buy.info.disclaimer.security.link')}
+          <A href={getBTCDirectAboutUsLink()}>
+            {t('buy.exchange.infoContent.btcdirectWidget.learnmore')}
           </A>
         </p>
         <h2 className={style.title}>
-          {t('buy.info.disclaimer.protection.title')}
+          {t('buy.exchange.infoContent.btcdirectWidget.disclaimer.security.title')}
         </h2>
+        <p>{t('buy.exchange.infoContent.btcdirectWidget.disclaimer.security.description')}</p>
         <p>
-          {t('buy.info.disclaimer.protection.descriptionGeneric', {
-            context: isBitcoin ? 'bitcoin' : 'crypto'
-          })}
+          <A href="https://bitbox.swiss/bitbox02/threat-model/">
+            {t('buy.exchange.infoContent.btcdirectWidget.disclaimer.security.link')}
+          </A>
         </p>
+        <h2 className={style.title}>{t('buy.exchange.infoContent.btcdirect.disclaimer.dataProtection.title')}</h2>
+        <p>{t('buy.exchange.infoContent.btcdirect.disclaimer.dataProtection.text')}</p>
         <p>
-          <A href="https://www.moonpay.com/privacy_policy">
-            {t('buy.info.disclaimer.privacyPolicy')}
+          <A href={getBTCDirectPrivacyLink()}>
+            {t('buy.exchange.infoContent.btcdirect.disclaimer.dataProtection.link')}
           </A>
         </p>
       </div>

diff --git a/frontends/web/src/locales/en/app.json b/frontends/web/src/locales/en/app.json
@@ -453,6 +453,25 @@
           "title": "Buying or selling over €50,000?"
         },
         "btcdirectWidget": {
+          "disclaimer": {
+            "description": "We work with BTC Direct, a trusted European broker, to make buying cryptocurrencies easy within the BitBoxApp. This service is available across Europe using bank transfers, credit cards and many local payment methods.",
+            "kyc": {
+              "description": "Customer identity verification is required for all trades. You’ll need to take a selfie and take a picture of an official document.",
+              "title": "Identity verification"
+            },
+            "paymentMethods": {
+              "buy": "Buying: Pay in EUR to get the coins delivered directly to your BitBox. You can choose between one-time and recurring buys. For bank transfers, the exchange rate is fixed when BTC Direct receives the money. Instant methods use a fixed conversion rate for a limited time.",
+              "note": "Note: BTC Direct exchange rates may differ slightly from the BitBoxApp rates.",
+              "title": "Payment Methods and Fees"
+            },
+            "security": {
+              "description": "BTC Direct is an external service not covered by the BitBox02 security threat model. We closely work with BTC Direct to enhance overall security.",
+              "link": "BitBox02 security threat model",
+              "title": "Security"
+            },
+            "title_bitcoin": "Buy bitcoin with BTC Direct",
+            "title_crypto": "Buy crypto with BTC Direct"
+          },
           "infobox": {
             "feesBuying": {
               "bancontact": "Bancontact: {{fee}}%",
@@ -462,15 +481,15 @@
               "title": "Fees for Buying"
             },
             "intro": "European buying of cryptocurrencies with EUR.",
-            "learnmore": "Learn more about BTC Direct",
             "payment": {
               "bancontact": "Bancontact",
               "bankTransfer": "Bank transfer, SEPA Instant, iDEAL",
               "creditDebitCard": "Credit cards (Mastercard, Visa), ApplePay, Google Pay, Cartes Bancaires",
               "sofort": "Sofort",
               "title": "Payment methods"
             }
-          }
+          },
+          "learnmore": "Learn more about BTC Direct"
         },
         "moonpay": {
           "fees": {

diff --git a/frontends/web/src/routes/exchange/btcdirect-otc.tsx b/frontends/web/src/routes/exchange/btcdirect-otc.tsx
@@ -17,7 +17,7 @@
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
 import { BTCDirectOTCTerms } from '@/components/terms/btcdirect-otc-terms';
-import { getBTCDirectLink } from './components/infocontent';
+import { getBTCDirectAboutUsLink } from './components/infocontent';
 import { Header } from '@/components/layout';
 import { open } from '@/api/system';
 import style from './iframe.module.css';
@@ -27,7 +27,7 @@ export const BTCDirectOTC = () => {
   const navigate = useNavigate();
 
   const openBTCDirect = () => {
-    open(getBTCDirectLink());
+    open(getBTCDirectAboutUsLink());
     navigate(-1);
   };
 

diff --git a/frontends/web/src/routes/exchange/btcdirect.tsx b/frontends/web/src/routes/exchange/btcdirect.tsx
@@ -72,7 +72,7 @@ export const BTCDirect = ({ accounts, code }: TProps) => {
 
   useEffect(() => {
     if (config) {
-      setAgreedTerms(config.frontend.skipBTCDirectDisclaimer);
+      setAgreedTerms(config.frontend.skipBTCDirectWidgetDisclaimer);
     }
   }, [config]);
 

diff --git a/frontends/web/src/routes/exchange/components/buysell.tsx b/frontends/web/src/routes/exchange/components/buysell.tsx
@@ -21,7 +21,7 @@ import { useLoad } from '@/hooks/api';
 import * as exchangesAPI from '@/api/exchanges';
 import { Button } from '@/components/forms/button';
 import { AppContext } from '@/contexts/AppContext';
-import { getBTCDirectLink, TInfoContentProps } from './infocontent';
+import { getBTCDirectAboutUsLink, TInfoContentProps } from './infocontent';
 import { Skeleton } from '@/components/skeleton/skeleton';
 import { hasPaymentRequest } from '@/api/account';
 import { Message } from '@/components/message/message';
@@ -158,7 +158,7 @@ export const BuySell = ({
                     {t('buy.exchange.infoContent.btcdirect.link')}
                   </Link>
                 ) : (
-                  <A href={getBTCDirectLink()} className={style.link}>
+                  <A href={getBTCDirectAboutUsLink()} className={style.link}>
                     {t('buy.exchange.infoContent.btcdirect.link')}
                   </A>
                 )}

diff --git a/frontends/web/src/routes/exchange/components/infocontent.tsx b/frontends/web/src/routes/exchange/components/infocontent.tsx
@@ -37,7 +37,7 @@ export const getBTCDirectOTCLink = () => {
   }
 };
 
-export const getBTCDirectLink = () => {
+export const getBTCDirectAboutUsLink = () => {
   switch (i18n.resolvedLanguage) {
   case 'de':
     return 'https://btcdirect.eu/de-at/uber-uns?BitBox';
@@ -228,8 +228,8 @@ const BTCDirectInfo = ({
       </ul>
       <br />
       <p>
-        <A href={getBTCDirectLink()}>
-          {t('buy.exchange.infoContent.btcdirectWidget.infobox.learnmore')}
+        <A href={getBTCDirectAboutUsLink()}>
+          {t('buy.exchange.infoContent.btcdirectWidget.learnmore')}
         </A>
       </p>
     </div>

diff --git a/frontends/web/src/routes/exchange/guide.tsx b/frontends/web/src/routes/exchange/guide.tsx
@@ -1,5 +1,5 @@
 /**
- * Copyright 2022-2024 Shift Crypto AG
+ * Copyright 2022-2025 Shift Crypto AG
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -18,31 +18,42 @@ import { useTranslation } from 'react-i18next';
 import type { TExchangeName } from '@/api/exchanges';
 import { Entry } from '@/components/guide/entry';
 import { Guide } from '@/components/guide/guide';
+import { getBTCDirectPrivacyLink } from '@/components/terms/btcdirect-otc-terms';
 
-interface BuyGuideProps {
+type BuyGuideProps = {
   exchange?: TExchangeName;
   translationContext: 'bitcoin' | 'crypto';
 }
 
-export const ExchangeGuide = ({ exchange, translationContext }: BuyGuideProps) => {
+const usePrivacyLink = (exchange?: TExchangeName) => {
   const { t } = useTranslation();
+  switch (exchange) {
+  case 'btcdirect':
+    return ({
+      text: t('buy.exchange.infoContent.btcdirect.disclaimer.dataProtection.link'),
+      url: getBTCDirectPrivacyLink(),
+    });
+  case 'moonpay':
+    return ({
+      text: t('buy.info.disclaimer.privacyPolicy'),
+      url: 'https://www.moonpay.com/privacy_policy',
+    });
+  case 'pocket':
+    return ({
+      text: t('exchange.pocket.terms.dataprotection.link'),
+      url: 'https://pocketbitcoin.com/policy/privacy',
+    });
+  }
+};
 
-  const pocketLink = {
-    text: t('exchange.pocket.terms.dataprotection.link'),
-    url: 'https://pocketbitcoin.com/policy/privacy',
-  };
-
-  const moonpayLink = {
-    text: t('buy.info.disclaimer.privacyPolicy'),
-    url: 'https://www.moonpay.com/privacy_policy',
-  };
-
-  const privacyLink = exchange === 'pocket' ? pocketLink : moonpayLink;
+export const ExchangeGuide = ({ exchange, translationContext }: BuyGuideProps) => {
+  const { t } = useTranslation();
+  const link = usePrivacyLink(exchange);
 
   return (
     <Guide title={t('guide.guideTitle.buySell')}>
       <Entry key="guide.buy.protection" entry={{
-        link: exchange ? privacyLink : undefined,
+        link,
         text: t('buy.info.disclaimer.protection.descriptionGeneric', { context: translationContext }),
         title: t('buy.info.disclaimer.protection.title'),
       }} />