@akinon/pz-masterpass 1.19.1 → 1.19.3

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @akinon/pz-masterpass
 
+## 1.19.3
+
+### Patch Changes
+
+- ZERO-2427: Fix translation and check script load states
+
+## 1.19.2
+
+### Patch Changes
+
+- ZERO-2287: Add optional masterpassJsUrl to Settings
+
 ## 1.19.1
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@akinon/pz-masterpass",
-  "version": "1.19.1",
+  "version": "1.19.3",
   "license": "MIT",
   "main": "src/index.ts",
   "types": "src/index.d.ts",

package/src/masterpass-provider.tsx

@@ -3,7 +3,7 @@
 import { useLocalization } from '@akinon/next/hooks';
 import { useAppDispatch, useAppSelector } from '@akinon/next/redux/hooks';
 import Script from 'next/script';
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
 import { checkMasterpass } from './utils/check-masterpass';
 import { init } from './utils/init';
 import {
@@ -46,6 +46,11 @@ export const MasterpassProvider = (props: MasterpassProviderProps) => {
   const { locale } = useLocalization();
   const dispatch = useAppDispatch();
 
+  const [scriptLoadState, setScriptLoadState] = useState({
+    zepto: false,
+    mfs: false
+  });
+
   const prepareState = async () => {
     dispatch(setLanguage(getLanguage(locale)));
 
@@ -86,12 +91,16 @@ export const MasterpassProvider = (props: MasterpassProviderProps) => {
   };
 
   useEffect(() => {
-    if (preOrder?.payment_option?.payment_type !== 'masterpass') {
+    if (
+      preOrder?.payment_option?.payment_type !== 'masterpass' ||
+      !scriptLoadState.zepto ||
+      !scriptLoadState.mfs
+    ) {
       return;
     }
 
     prepareState();
-  }, [preOrder?.payment_option?.payment_type]);
+  }, [scriptLoadState, preOrder?.payment_option?.payment_type]);
 
   useEffect(() => {
     if (!otp.response) {
@@ -116,8 +125,26 @@ export const MasterpassProvider = (props: MasterpassProviderProps) => {
 
   return (
     <>
-      <Script src="/mfs-client.min.js" strategy="afterInteractive" />
-      <Script src="/zepto.min.js" strategy="afterInteractive" />
+      <Script
+        src="/mfs-client.min.js"
+        strategy="afterInteractive"
+        onLoad={() => {
+          setScriptLoadState((prevState) => ({
+            ...prevState,
+            mfs: true
+          }));
+        }}
+      />
+      <Script
+        src="/zepto.min.js"
+        strategy="afterInteractive"
+        onLoad={() => {
+          setScriptLoadState((prevState) => ({
+            ...prevState,
+            zepto: true
+          }));
+        }}
+      />
 
       <Modal
         portalId="masterpass-error-modal"

package/src/utils/init.ts

@@ -1,10 +1,14 @@
 import { buildClientRequestUrl } from '@akinon/next/utils';
 import { MasterpassCredentials } from '../types';
+import settings from 'settings';
 
 export const init = () =>
   new Promise<MasterpassCredentials>(async (resolve) => {
     try {
-      const response = await fetch(buildClientRequestUrl('/masterpass-js'));
+      const response = await fetch(
+        settings.checkout?.masterpassJsUrl ??
+          buildClientRequestUrl('/masterpass-js')
+      );
       const data: MasterpassCredentials = await response.json();
 
       window.MFS.setClientId(data.client_id);

package/src/views/countdown-timer/countdown-timer.tsx

@@ -1,21 +1,14 @@
 import React from 'react';
 import { Button, LoaderSpinner } from 'components';
-import { useTranslation } from '@akinon/next/hooks';
 import { useCountdown } from '../../hooks/use-countdown';
 
-const SendSms = ({ resendSms, resendSmsFetching }) => {
-  const { t } = useTranslation('checkout');
-
+const SendSms = ({ resendSms, resendSmsFetching, resendSmsTranslation }) => {
   return (
     <Button
       onClick={() => resendSms()}
       className="mt-2 w-full text-primary bg-[#cccccc] border-0 hover:border"
     >
-      {!resendSmsFetching ? (
-        t('payment.masterpass.add.send_sms_again')
-      ) : (
-        <LoaderSpinner />
-      )}
+      {!resendSmsFetching ? resendSmsTranslation : <LoaderSpinner />}
     </Button>
   );
 };
@@ -28,12 +21,21 @@ const ShowCounter = ({ minutes, seconds }) => {
   );
 };
 
-const CountdownTimer = ({ targetDate, resendSms, resendSmsFetching }) => {
+const CountdownTimer = ({
+  targetDate,
+  resendSms,
+  resendSmsFetching,
+  resendSmsTranslation
+}) => {
   const [minutes, seconds] = useCountdown(targetDate);
 
   if (minutes + seconds <= 0) {
     return (
-      <SendSms resendSms={resendSms} resendSmsFetching={resendSmsFetching} />
+      <SendSms
+        resendSms={resendSms}
+        resendSmsFetching={resendSmsFetching}
+        resendSmsTranslation={resendSmsTranslation}
+      />
     );
   } else {
     return <ShowCounter minutes={minutes} seconds={seconds} />;

package/src/views/otp-modal/index.tsx

@@ -8,7 +8,7 @@ import { useCallback, useEffect, useState } from 'react';
 import { formCreator } from '../../utils';
 
 import CountdownTimer from '../countdown-timer/countdown-timer';
-import { OtpForm, OtpFormProps } from './otp-form';
+import { OtpForm, OtpFormProps, defaultTranslations } from './otp-form';
 import { useAppDispatch, useAppSelector } from '@akinon/next/redux/hooks';
 import { setOtpResponse } from '../../redux/reducer';
 import { Image } from '@akinon/next/components/image';
@@ -140,6 +140,9 @@ export const MasterpassOtpModal = ({
             resendSmsFetching={isBusy}
             targetDate={otpTime}
             resendSms={resendSms}
+            resendSmsTranslation={
+              translations?.resend_sms ?? defaultTranslations.resend_sms
+            }
           />
         </div>
       </div>

package/src/views/otp-modal/otp-form.tsx

@@ -4,10 +4,11 @@ import { useEffect } from 'react';
 import { useForm } from 'react-hook-form';
 import * as yup from 'yup';
 
-const defaultTranslations = {
+export const defaultTranslations = {
   enter_the_verification_code: 'Enter the verification code',
   sms_code: 'SMS Code',
-  verify: 'Verify'
+  verify: 'Verify',
+  resend_sms: 'Resend SMS'
 };
 
 export interface OtpFormProps {