frontend: move btcdirect link to btcdirect-otc

Preparatrion to add btcdirect

frontends/web/src/api/exchanges.ts

@@ -114,7 +114,7 @@ export type TBtcDirectResponse = {
   success: false;
 };
 
-export const getBtcDirectSupported = (code: AccountCode, region: ExchangeRegion['code']) => {
+export const getBtcDirectOTCSupported = (code: AccountCode, region: ExchangeRegion['code']) => {
   return (): Promise<TBtcDirectResponse> => {
     return apiGet(`exchange/btcdirect/supported/${code}?region=${region}`);
   };

frontends/web/src/components/terms/btcdirect-otc-terms.tsx

@@ -0,0 +1,107 @@
+/**
+ * Copyright 2024 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.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { useTranslation } from 'react-i18next';
+import { ChangeEvent } from 'react';
+import { Button, Checkbox } from '@/components/forms';
+import { setConfig } from '@/utils/config';
+import { i18n } from '@/i18n/i18n';
+import { A } from '../anchor/anchor';
+import style from './terms.module.css';
+
+type TProps = {
+  onContinue: () => void;
+}
+
+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}>
+      <div className={style.disclaimer}>
+        <h2 className={style.title}>{t('buy.exchange.infoContent.btcdirect.disclaimer.partnership.title')}</h2>
+        <p>{t('buy.exchange.infoContent.btcdirect.disclaimer.partnership.text')}</p>
+        <h2 className={style.title}>{t('buy.exchange.infoContent.btcdirect.disclaimer.personal.title')}</h2>
+        <p>{t('buy.exchange.infoContent.btcdirect.disclaimer.personal.text')}</p>
+        <h2 className={style.title}>{t('buy.exchange.infoContent.btcdirect.disclaimer.paymentMethods.title')}</h2>
+        <ul>
+          <li>
+            <p>
+              <strong>{t('buy.exchange.infoContent.btcdirect.disclaimer.paymentMethods.buy')}</strong>
+              &nbsp;
+              {t('buy.exchange.infoContent.btcdirect.disclaimer.paymentMethods.buy2')}
+            </p>
+          </li>
+          <li>
+            <p>
+              <strong>{t('buy.exchange.infoContent.btcdirect.disclaimer.paymentMethods.sell')}</strong>
+              &nbsp;
+              {t('buy.exchange.infoContent.btcdirect.disclaimer.paymentMethods.sell2')}
+            </p>
+          </li>
+        </ul>
+        <p>{t('buy.exchange.infoContent.btcdirect.disclaimer.paymentMethods.fee')}</p>
+        <h2 className={style.title}>{t('buy.exchange.infoContent.btcdirect.disclaimer.security.title')}</h2>
+        <p>{t('buy.exchange.infoContent.btcdirect.disclaimer.security.text')}</p>
+        <p>
+          <A href="https://bitbox.swiss/bitbox02/threat-model/">
+            {t('buy.exchange.infoContent.btcdirect.disclaimer.security.link')}
+          </A>
+        </p>
+        <h2 className={style.title}>{t('buy.exchange.infoContent.btcdirect.disclaimer.kyc.title')}</h2>
+        <p>{t('buy.exchange.infoContent.btcdirect.disclaimer.kyc.text')}</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={getPrivacyLink()}>
+            {t('buy.exchange.infoContent.btcdirect.disclaimer.dataProtection.link')}
+          </A>
+        </p>
+      </div>
+      <div className="text-center m-bottom-quarter">
+        <Checkbox
+          id="skip_disclaimer"
+          label={t('buy.info.skip')}
+          onChange={handleSkipDisclaimer} />
+      </div>
+      <div className="buttons text-center m-bottom-xlarge">
+        <Button
+          primary
+          onClick={onContinue}>
+          {t('buy.info.continue')}
+        </Button>
+      </div>
+    </div>
+  );
+};

frontends/web/src/routes/exchange/btcdirect.tsx → frontends/web/src/routes/exchange/btcdirect-otc.tsx

@@ -14,15 +14,15 @@
  * limitations under the License.
  */
 
-import { BTCDirectTerms } from '@/components/terms/btcdirect-terms';
+import { BTCDirectOTCTerms } from '@/components/terms/btcdirect-otc-terms';
 import { getBTCDirectLink } from './components/buysell';
 import { useNavigate } from 'react-router-dom';
-import style from './iframe.module.css';
 import { Header } from '@/components/layout';
 import { useTranslation } from 'react-i18next';
 import { open } from '@/api/system';
+import style from './iframe.module.css';
 
-export const BTCDirect = () => {
+export const BTCDirectOTC = () => {
   const { t } = useTranslation();
   const navigate = useNavigate();
 
@@ -38,7 +38,7 @@ export const BTCDirect = () => {
           <Header title={<h2>{t('buy.exchange.infoContent.btcdirect.disclaimer.title')}</h2>} />
         </div>
         <div className={style.container}>
-          <BTCDirectTerms
+          <BTCDirectOTCTerms
             onContinue={() => openBTCDirect()}
           />
         </div>

frontends/web/src/routes/exchange/components/buysell.tsx

@@ -77,10 +77,10 @@ export const BuySell = ({
   const { isDarkMode } = useDarkmode();
 
   const exchangeDealsResponse = useLoad(() => exchangesAPI.getExchangeDeals(action, accountCode, selectedRegion), [action, selectedRegion]);
-  const btcDirectSupported = useLoad(exchangesAPI.getBtcDirectSupported(accountCode, selectedRegion), [selectedRegion]);
+  const btcDirectOTCSupported = useLoad(exchangesAPI.getBtcDirectOTCSupported(accountCode, selectedRegion), [selectedRegion]);
   const hasPaymentRequestResponse = useLoad(() => hasPaymentRequest(accountCode));
   const [paymentRequestError, setPaymentRequestError] = useState(false);
-  const [agreedTerms, setAgreedTerms] = useState(false);
+  const [agreedBTCDirectOTCTerms, setAgreedBTCDirectOTCTerms] = useState(false);
   const config = useLoad(getConfig);
   const navigate = useNavigate();
 
@@ -101,7 +101,7 @@ export const BuySell = ({
 
   useEffect(() => {
     if (config) {
-      setAgreedTerms(config.frontend.skipBTCDirectDisclaimer);
+      setAgreedBTCDirectOTCTerms(config.frontend.skipBTCDirectOTCDisclaimer);
     }
   }, [config]);
 
@@ -162,16 +162,46 @@ export const BuySell = ({
                 onClickInfoButton={() => setInfo(buildInfo(exchange))}
               />
             ))}
+            {/* TODO: 'BTC Direct' should come from exchangeDealsResponse */}
+            <ExchangeSelectionRadio
+              key={'btcdirect'}
+              id={'BTC Direct'}
+              exchangeName={'btcdirect'}
+              deals={[{
+                fee: 4,
+                payment: 'card',
+                isFast: true,
+                isBest: false,
+              }, {
+                fee: 1.75,
+                payment: 'bank-transfer',
+                isFast: false,
+                isBest: false,
+              }]}
+              checked={selectedExchange === 'btcdirect'}
+              onChange={() => {
+                onSelectExchange('btcdirect');
+              }}
+              onClickInfoButton={() => setInfo(buildInfo({
+                exchangeName: 'btcdirect',
+                deals: [{
+                  fee: 3,
+                  payment: 'card',
+                  isFast: true,
+                  isBest: false,
+                }],
+              }))}
+            />
           </div>
         )}
-        {btcDirectSupported?.success && btcDirectSupported?.supported && (
+        {btcDirectOTCSupported?.success && btcDirectOTCSupported?.supported && (
           <div className={style.infoContainer}>
             <Message type="info" icon={<Businessman/>}>
               {t('buy.exchange.infoContent.btcdirect.title')}
               <p>{t('buy.exchange.infoContent.btcdirect.info')}</p>
               <p>
-                {!agreedTerms ? (
-                  <Link to={'/exchange/btcdirect'} className={style.link}>
+                {!agreedBTCDirectOTCTerms ? (
+                  <Link to={'/exchange/btcdirect-otc'} className={style.link}>
                     {t('buy.exchange.infoContent.btcdirect.link')}
                   </Link>
                 ) : (

frontends/web/src/routes/router.tsx

@@ -23,7 +23,7 @@ import { Moonpay } from './exchange/moonpay';
 import { ExchangeInfo } from './exchange/info';
 import { Exchange } from './exchange/exchange';
 import { Pocket } from './exchange/pocket';
-import { BTCDirect } from './exchange/btcdirect';
+import { BTCDirectOTC } from './exchange/btcdirect-otc';
 import { Info } from './account/info/info';
 import { Receive } from './account/receive';
 import { SendWrapper } from './account/send/send-wrapper';
@@ -239,7 +239,7 @@ export const AppRouter = ({ devices, deviceIDs, devicesKey, accounts, activeAcco
           <Route path="pocket/buy/:code" element={PocketBuyEl} />
           <Route path="pocket/sell/:code" element={PocketSellEl} />
           <Route path="select/:code" element={ExchangeEl} />
-          <Route path="btcdirect" element={<BTCDirect/>} />
+          <Route path="btcdirect-otc" element={<BTCDirectOTC/>} />
         </Route>
         <Route path="manage-backups/:deviceID" element={ManageBackupsEl} />
         <Route path="accounts/select-receive" element={ReceiveAccountsSelectorEl} />