fix(payment): fix Adyen live environment when cleengSandbox is set to…

… false
jwplayer · Aug 6, 2021 · 4ff1e42 · 4ff1e42
1 parent 28547dd
commit 4ff1e42
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 11 deletions.
diff --git a/src/components/Adyen/Adyen.tsx b/src/components/Adyen/Adyen.tsx
@@ -5,16 +5,18 @@ import { addScript, addStyleSheet } from '../../utils/dom';
 import useOpaqueId from '../../hooks/useOpaqueId';
 import Button from '../Button/Button';
 import FormFeedback from '../FormFeedback/FormFeedback';
+import { ADYEN_LIVE_CLIENT_KEY, ADYEN_TEST_CLIENT_KEY } from '../../config';
 
 import styles from './Adyen.module.scss';
 
 type Props = {
   onChange?: (data: AdyenEventData) => void;
   onSubmit: (data: AdyenEventData) => void;
   error?: string;
+  environment?: 'test' | 'live';
 };
 
-const Adyen: React.FC<Props> = ({ onChange, onSubmit, error }) => {
+const Adyen: React.FC<Props> = ({ onChange, onSubmit, error, environment = 'test' }) => {
   const { t } = useTranslation('account');
   const id = useOpaqueId('adyen', 'checkout');
   const adyenRef = useRef<AdyenCheckout>(null) as React.MutableRefObject<AdyenCheckout>;
@@ -23,22 +25,22 @@ const Adyen: React.FC<Props> = ({ onChange, onSubmit, error }) => {
   useEffect(() => {
     const loadExternalScripts = async () => {
       await Promise.all([
-        addScript('https://checkoutshopper-test.adyen.com/checkoutshopper/sdk/3.10.1/adyen.js'),
-        addStyleSheet('https://checkoutshopper-test.adyen.com/checkoutshopper/sdk/3.11.4/adyen.css'),
+        addScript(`https://checkoutshopper-${environment}.adyen.com/checkoutshopper/sdk/3.10.1/adyen.js`),
+        addStyleSheet(`https://checkoutshopper-${environment}.adyen.com/checkoutshopper/sdk/3.11.4/adyen.css`),
       ]);
 
       setScriptsLoaded(true);
     };
 
     loadExternalScripts();
-  }, []);
+  }, [environment]);
 
   useEffect(() => {
     if (scriptsLoaded) {
       const configuration = {
         showPayButton: false,
-        environment: 'test',
-        clientKey: 'test_I4OFGUUCEVB5TI222AS3N2Y2LY6PJM3K',
+        clientKey: environment === 'test' ? ADYEN_TEST_CLIENT_KEY : ADYEN_LIVE_CLIENT_KEY,
+        environment,
         onSubmit,
         onChange,
       };

diff --git a/src/config.ts b/src/config.ts
@@ -5,5 +5,8 @@ export const VideoProgressMinMax = {
   Max: 0.95,
 };
 
-export const termsConditionsUrl = 'https://cleeng.com/cleeng-user-agreement';
-export const playlistLimit = 25;
+export const PLAYLIST_LIMIT = 25;
+
+export const ADYEN_TEST_CLIENT_KEY = 'test_I4OFGUUCEVB5TI222AS3N2Y2LY6PJM3K';
+
+export const ADYEN_LIVE_CLIENT_KEY = 'live_BQDOFBYTGZB3XKF62GBYSLPUJ4YW2TPL';
diff --git a/src/containers/AccountModal/forms/Checkout.tsx b/src/containers/AccountModal/forms/Checkout.tsx
@@ -20,8 +20,10 @@ import PayPal from '../../../components/PayPal/PayPal';
 import NoPaymentRequired from '../../../components/NoPaymentRequired/NoPaymentRequired';
 import { addQueryParams } from '../../../utils/formatting';
 import { reloadActiveSubscription } from '../../../stores/AccountStore';
+import { ConfigStore } from '../../../stores/ConfigStore';
 
 const Checkout = () => {
+  const { cleengSandbox } = ConfigStore.useState((s) => s.config);
   const { t } = useTranslation('account');
   const history = useHistory();
   const [paymentError, setPaymentError] = useState<string | undefined>(undefined);
@@ -166,7 +168,7 @@ const Checkout = () => {
     }
 
     if (paymentMethod?.methodName === 'card') {
-      return <Adyen onSubmit={handleAdyenSubmit} error={paymentError} />;
+      return <Adyen onSubmit={handleAdyenSubmit} error={paymentError} environment={cleengSandbox ? 'test' : 'live'} />;
     } else if (paymentMethod?.methodName === 'paypal') {
       return <PayPal onSubmit={handlePayPalSubmit} error={paymentError} />;
     }

diff --git a/src/containers/Playlist/PlaylistContainer.tsx b/src/containers/Playlist/PlaylistContainer.tsx
@@ -5,7 +5,7 @@ import { PersonalShelf, PersonalShelves } from '../../enum/PersonalShelf';
 import usePlaylist, { UsePlaylistResult } from '../../hooks/usePlaylist';
 import { useFavorites } from '../../stores/FavoritesStore';
 import { useWatchHistory } from '../../stores/WatchHistoryStore';
-import { playlistLimit } from '../../config';
+import { PLAYLIST_LIMIT } from '../../config';
 
 type ChildrenParams = {
   playlist: Playlist;
@@ -29,7 +29,7 @@ const PlaylistContainer = ({ playlistId, relatedItem, onPlaylistUpdate, style, c
     isLoading,
     error,
     data: fetchedPlaylist = { title: '', playlist: [] },
-  }: UsePlaylistResult = usePlaylist(playlistId, relatedItem?.mediaid, !isAlternativeShelf && !!playlistId, true, playlistLimit);
+  }: UsePlaylistResult = usePlaylist(playlistId, relatedItem?.mediaid, !isAlternativeShelf && !!playlistId, true, PLAYLIST_LIMIT);
 
   let playlist = fetchedPlaylist;