@akinon/pz-masterpass 1.19.2 → 1.19.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/README.md +90 -95
  3. package/package.json +1 -1
  4. package/src/masterpass-provider.tsx +32 -5
  5. package/src/views/card-registration/index.tsx +20 -2
  6. package/src/views/countdown-timer/countdown-timer.tsx +13 -11
  7. package/src/views/delete-confirmation-modal/index.tsx +10 -8
  8. package/src/views/info-modal/index.tsx +75 -72
  9. package/src/views/otp-modal/index.tsx +4 -4
  10. package/src/views/otp-modal/otp-form.tsx +3 -2
package/CHANGELOG.md CHANGED
@@ -1,5 +1,17 @@
1
1
  # @akinon/pz-masterpass
2
2
 
3
+ ## 1.19.4
4
+
5
+ ### Patch Changes
6
+
7
+ - ZERO-2427: Refactor props and README
8
+
9
+ ## 1.19.3
10
+
11
+ ### Patch Changes
12
+
13
+ - ZERO-2427: Fix translation and check script load states
14
+
3
15
  ## 1.19.2
4
16
 
5
17
  ### Patch Changes
package/README.md CHANGED
@@ -1,122 +1,117 @@
1
1
  # pz-masterpass
2
2
 
3
- ### Install the npm package
3
+ ## Available Props
4
4
 
5
- ```bash
6
- # For latest version
7
- yarn add git+ssh://git@bitbucket.org:akinonteam/pz-masterpass.git
5
+ ### Masterpass Provider
8
6
 
9
- # For specific version
10
- yarn add git+ssh://git@bitbucket.org:akinonteam/pz-masterpass.git#COMMIT_HASH
11
- ```
12
-
13
- ### Next Config Configuration
14
-
15
- ##### next.config.js**
7
+ ##### File Path: src/app/[commerce]/[locale]/[currency]/orders/checkout/page.tsx
16
8
 
17
9
  ```javascript
18
- transpilePackages: ['pz-masterpass'],
10
+ <PluginModule
11
+ component={Component.MasterpassProvider}
12
+ props={{
13
+ translations: {
14
+ genericErrorMessage: 'An error occurred. Please try again later.'
15
+ }
16
+ }}
17
+ >
18
+ ... ...
19
+ </PluginModule>
19
20
  ```
20
21
 
21
- ##### Middleware Config
22
- Add to matcher array
23
- ```javascript
24
- |mfs-client.min.js|zepto.min.js
25
- ```
22
+ ### Delete Confirmation Modal
26
23
 
27
- ### Translation
28
- ##### File Path: public/locales/en/checkout.json
29
- ##### File Path: public/locales/tr/checkout.json
30
-
31
- **NOTE:** Add to payment object
32
- *en*
33
- ```json
34
- "masterpass": {
35
- "title": "Your Masterpass Registered Cards",
36
- "modal": {
37
- "use_masterpass_cards": "Would you like to use your cards registered to Masterpass?",
38
- "use": "Use",
39
- "remove_title": "Are you sure you want to delete the card?",
40
- "remove_button": "YES, DELETE",
41
- "cancel_button": "CANCEL"
42
- },
43
- "add": {
44
- "sms_code": "Sms Code",
45
- "send_sms_again": "Send Sms Again",
46
- "enter_code": "Enter the verification code.",
47
- "invalid_ex_date": "Invalid expiration date",
48
- "invalid_card_number": "Invalid card number",
49
- "enter_one_time_pass": "Enter Your One-Time Password",
50
- "enter_bank_pass": "Enter Your Bank Verification Password",
51
- "enter_the_verification_code": "Enter the verification code.",
52
- "enter_card_name": "Please enter card name.",
53
- "mastercard_info": "I want to store my card information in the Mastercard infrastructure and use it again in my next purchase.",
54
- "masterpass_term": "Masterpass Terms of Use",
55
- "continue": "CONTINUE",
56
- "verify": "VERIFY"
57
- }
58
- }
59
- ```
24
+ ##### File Path: src/app/[commerce]/[locale]/[currency]/orders/checkout/page.tsx
60
25
 
61
- *tr*
62
- ```json
63
- "masterpass": {
64
- "title": "Masterpass Kayıtlı Kartlarınız",
65
- "modal": {
66
- "use_masterpass_cards": "Masterpass'e kayıtlı kartlarınızı kullanmak ister misiniz?",
67
- "use": "Kullan",
68
- "remove_title": "Karti silmek istediğinize emin misiniz?",
69
- "remove_button": "EVET, SİL",
70
- "cancel_button": "VAZGEÇ"
71
- },
72
- "add": {
73
- "sms_code": "Sms Kodu",
74
- "send_sms_again": "Tekrar Sms Gönder",
75
- "enter_code": "Doğrulama kodunu giriniz",
76
- "invalid_ex_date": "Geçersiz son kullanma tarihi",
77
- "invalid_card_number": "Geçersiz kart numarası",
78
- "enter_one_time_pass": "Tek Seferlik Şifrenizi Giriniz",
79
- "enter_bank_pass": "Banka Doğrulama Şifrenizi Giriniz",
80
- "enter_the_verification_code": "Doğrulama kodunu giriniz.",
81
- "enter_card_name": "Kartınıza bir isim verin",
82
- "mastercard_info": "Kart bilgilerimi Mastercard altyapısında saklamak ve bir sonraki alışverişimde tekrar kullanmak istiyorum.",
83
- "masterpass_term": "Masterpass Kullanım Koşulları",
84
- "continue": "DEVAM ET",
85
- "verify": "DOĞRULA"
86
- }
87
- }
26
+ ```javascript
27
+ <PluginModule
28
+ component={Component.MasterpassDeleteConfirmationModal}
29
+ props={{
30
+ translations: {
31
+ title: 'Are you sure you want to delete this card?',
32
+ delete_button: 'Remove',
33
+ cancel_button: 'Delete'
34
+ }
35
+ }}
36
+ />
88
37
  ```
89
38
 
90
- ### Example Usage
91
- Wrap the component with the provider
39
+ ### OTP Modal
92
40
 
93
- ##### File Path: src/app/[commerce]/[locale]/orders/checkout/page.tsx
41
+ ##### File Path: src/app/[commerce]/[locale]/[currency]/orders/checkout/page.tsx
94
42
 
95
43
  ```javascript
96
- return (
97
- <MasterpassProvider>
98
- ...
99
- </MasterpassProvider>
100
- );
44
+ <PluginModule
45
+ component={Component.MasterpassOtpModal}
46
+ props={{
47
+ translations: {
48
+ enter_the_verification_code: 'Enter the verification code',
49
+ sms_code: 'SMS Code',
50
+ verify: 'Verify',
51
+ resend_sms: 'Resend SMS',
52
+ // Or pass response code to show custom message
53
+ 5001: 'Please enter the OTP sent to your mobile number'
54
+ }
55
+ }}
56
+ />
101
57
  ```
102
58
 
103
- Add PaymentOptions
104
- ##### File Path: src/views/checkout/steps/payment/index.tsx
59
+ ### Link Modal
60
+
61
+ ##### File Path: src/app/[commerce]/[locale]/[currency]/orders/checkout/page.tsx
105
62
 
106
63
  ```javascript
107
- {
108
- pk: 000, // Related payment option pk
109
- view: CheckoutCreditCard
110
- }
64
+ <PluginModule
65
+ component={Component.MasterpassLinkModal}
66
+ props={{
67
+ translations: {
68
+ use_masterpass_cards:
69
+ 'You have cards registered to your Masterpass account. Would you like to use your cards?',
70
+ use: 'Use'
71
+ }
72
+ }}
73
+ />
111
74
  ```
112
75
 
76
+ ### Card List
77
+
113
78
  ##### File Path: src/views/checkout/steps/payment/options/credit-card/index.tsx
114
79
 
115
80
  ```javascript
116
- import { MasterpassCardList, MasterpassCheckForm } from 'pz-masterpass';
81
+ <PluginModule
82
+ component={Component.MasterpassCardList}
83
+ props={{
84
+ className: 'p-10',
85
+ translations: {
86
+ title: 'Select a card to pay with',
87
+ pay_with_new_card: 'Pay with a new card',
88
+ retryFetchCards: 'Retry Fetching Cards'
89
+ }
90
+ }}
91
+ />
92
+ ```
117
93
 
118
- <MasterpassCardList />
94
+ ### Card Registration
119
95
 
120
- <MasterpassCheckForm getValues={getValues} />
96
+ ##### File Path: src/views/checkout/steps/payment/options/credit-card/index.tsx
121
97
 
122
- ```
98
+ ```javascript
99
+ <PluginModule
100
+ component={Component.MasterpassCardRegistration}
101
+ props={{
102
+ // Do not remove getValues, it is used to get the form values
103
+ getValues,
104
+ className: 'mt-5 mb-10 sm:px-10',
105
+ infoModalContent: <div>Lorem...</div>,
106
+ infoModalIcon: <Icon name="info" />,
107
+ translations: {
108
+ enter_card_name: 'Enter card name',
109
+ continue: 'Continue',
110
+ pay_with_my_masterpass_card: 'Pay with my Masterpass card',
111
+ terms_and_conditions: 'Masterpass terms and conditions',
112
+ card_registration_consent:
113
+ 'I want to store my card information in the Mastercard infrastructure and use it again in my next purchase.'
114
+ }
115
+ }}
116
+ />
117
+ ```
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@akinon/pz-masterpass",
3
- "version": "1.19.2",
3
+ "version": "1.19.4",
4
4
  "license": "MIT",
5
5
  "main": "src/index.ts",
6
6
  "types": "src/index.d.ts",
package/src/masterpass-provider.tsx CHANGED
@@ -3,7 +3,7 @@
3
3
  import { useLocalization } from '@akinon/next/hooks';
4
4
  import { useAppDispatch, useAppSelector } from '@akinon/next/redux/hooks';
5
5
  import Script from 'next/script';
6
- import { useEffect } from 'react';
6
+ import { useEffect, useState } from 'react';
7
7
  import { checkMasterpass } from './utils/check-masterpass';
8
8
  import { init } from './utils/init';
9
9
  import {
@@ -46,6 +46,11 @@ export const MasterpassProvider = (props: MasterpassProviderProps) => {
46
46
  const { locale } = useLocalization();
47
47
  const dispatch = useAppDispatch();
48
48
 
49
+ const [scriptLoadState, setScriptLoadState] = useState({
50
+ zepto: false,
51
+ mfs: false
52
+ });
53
+
49
54
  const prepareState = async () => {
50
55
  dispatch(setLanguage(getLanguage(locale)));
51
56
 
@@ -86,12 +91,16 @@ export const MasterpassProvider = (props: MasterpassProviderProps) => {
86
91
  };
87
92
 
88
93
  useEffect(() => {
89
- if (preOrder?.payment_option?.payment_type !== 'masterpass') {
94
+ if (
95
+ preOrder?.payment_option?.payment_type !== 'masterpass' ||
96
+ !scriptLoadState.zepto ||
97
+ !scriptLoadState.mfs
98
+ ) {
90
99
  return;
91
100
  }
92
101
 
93
102
  prepareState();
94
- }, [preOrder?.payment_option?.payment_type]);
103
+ }, [scriptLoadState, preOrder?.payment_option?.payment_type]);
95
104
 
96
105
  useEffect(() => {
97
106
  if (!otp.response) {
@@ -116,8 +125,26 @@ export const MasterpassProvider = (props: MasterpassProviderProps) => {
116
125
 
117
126
  return (
118
127
  <>
119
- <Script src="/mfs-client.min.js" strategy="afterInteractive" />
120
- <Script src="/zepto.min.js" strategy="afterInteractive" />
128
+ <Script
129
+ src="/mfs-client.min.js"
130
+ strategy="afterInteractive"
131
+ onLoad={() => {
132
+ setScriptLoadState((prevState) => ({
133
+ ...prevState,
134
+ mfs: true
135
+ }));
136
+ }}
137
+ />
138
+ <Script
139
+ src="/zepto.min.js"
140
+ strategy="afterInteractive"
141
+ onLoad={() => {
142
+ setScriptLoadState((prevState) => ({
143
+ ...prevState,
144
+ zepto: true
145
+ }));
146
+ }}
147
+ />
121
148
 
122
149
  <Modal
123
150
  portalId="masterpass-error-modal"
package/src/views/card-registration/index.tsx CHANGED
@@ -30,10 +30,14 @@ const defaultTranslations = {
30
30
  export const MasterpassCardRegistration = ({
31
31
  getValues,
32
32
  className,
33
+ infoModalContent,
34
+ infoModalIcon,
33
35
  translations
34
36
  }: {
35
37
  getValues: () => Record<string, string | number | boolean>;
36
38
  className?: string;
39
+ infoModalContent?: React.ReactNode;
40
+ infoModalIcon?: React.ReactNode;
37
41
  translations?: typeof defaultTranslations;
38
42
  }) => {
39
43
  const { preOrder } = useAppSelector((state: RootState) => state.checkout);
@@ -159,7 +163,11 @@ export const MasterpassCardRegistration = ({
159
163
 
160
164
  return (
161
165
  <div className={twMerge('w-full', className)}>
162
- <InfoModal open={isInfoModalOpen} setOpen={setIsInfoModalOpen} />
166
+ <InfoModal
167
+ open={isInfoModalOpen}
168
+ setOpen={setIsInfoModalOpen}
169
+ content={infoModalContent}
170
+ />
163
171
 
164
172
  <div className="border border-[#ddd]">
165
173
  <div className="p-4">
@@ -185,7 +193,17 @@ export const MasterpassCardRegistration = ({
185
193
  className="cursor-pointer w-5 h-5 ml-auto"
186
194
  onClick={() => setIsInfoModalOpen(true)}
187
195
  >
188
- <Icon name="bell" />
196
+ {infoModalIcon ?? (
197
+ <svg
198
+ fill="currentColor"
199
+ viewBox="0 0 16 16"
200
+ height="1em"
201
+ width="1em"
202
+ >
203
+ <path d="M8 15A7 7 0 118 1a7 7 0 010 14zm0 1A8 8 0 108 0a8 8 0 000 16z" />
204
+ <path d="M8.93 6.588l-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533L8.93 6.588zM9 4.5a1 1 0 11-2 0 1 1 0 012 0z" />
205
+ </svg>
206
+ )}
189
207
  </div>
190
208
  </div>
191
209
  <p className="mt-5 text-sm">
package/src/views/countdown-timer/countdown-timer.tsx CHANGED
@@ -1,21 +1,14 @@
1
1
  import React from 'react';
2
2
  import { Button, LoaderSpinner } from 'components';
3
- import { useTranslation } from '@akinon/next/hooks';
4
3
  import { useCountdown } from '../../hooks/use-countdown';
5
4
 
6
- const SendSms = ({ resendSms, resendSmsFetching }) => {
7
- const { t } = useTranslation('checkout');
8
-
5
+ const SendSms = ({ resendSms, resendSmsFetching, resendSmsTranslation }) => {
9
6
  return (
10
7
  <Button
11
8
  onClick={() => resendSms()}
12
9
  className="mt-2 w-full text-primary bg-[#cccccc] border-0 hover:border"
13
10
  >
14
- {!resendSmsFetching ? (
15
- t('payment.masterpass.add.send_sms_again')
16
- ) : (
17
- <LoaderSpinner />
18
- )}
11
+ {!resendSmsFetching ? resendSmsTranslation : <LoaderSpinner />}
19
12
  </Button>
20
13
  );
21
14
  };
@@ -28,12 +21,21 @@ const ShowCounter = ({ minutes, seconds }) => {
28
21
  );
29
22
  };
30
23
 
31
- const CountdownTimer = ({ targetDate, resendSms, resendSmsFetching }) => {
24
+ const CountdownTimer = ({
25
+ targetDate,
26
+ resendSms,
27
+ resendSmsFetching,
28
+ resendSmsTranslation
29
+ }) => {
32
30
  const [minutes, seconds] = useCountdown(targetDate);
33
31
 
34
32
  if (minutes + seconds <= 0) {
35
33
  return (
36
- <SendSms resendSms={resendSms} resendSmsFetching={resendSmsFetching} />
34
+ <SendSms
35
+ resendSms={resendSms}
36
+ resendSmsFetching={resendSmsFetching}
37
+ resendSmsTranslation={resendSmsTranslation}
38
+ />
37
39
  );
38
40
  } else {
39
41
  return <ShowCounter minutes={minutes} seconds={seconds} />;
package/src/views/delete-confirmation-modal/index.tsx CHANGED
@@ -7,12 +7,14 @@ import masterpassLogo from '../../../assets/img/mp_masterpass-logo.png';
7
7
  import { useDeleteCard } from '../../hooks/use-delete-card';
8
8
  import { setDeletionModalVisible } from '../../redux/reducer';
9
9
 
10
+ const defaultTranslations = {
11
+ title: 'Are you sure you want to delete this card?',
12
+ delete_button: 'Delete',
13
+ cancel_button: 'Cancel'
14
+ };
15
+
10
16
  export interface MasterpassDeleteConfirmationModalProps {
11
- translations?: {
12
- remove_title?: string;
13
- remove_button?: string;
14
- cancel_button?: string;
15
- };
17
+ translations?: typeof defaultTranslations;
16
18
  }
17
19
 
18
20
  export const MasterpassDeleteConfirmationModal = ({
@@ -39,14 +41,14 @@ export const MasterpassDeleteConfirmationModal = ({
39
41
  >
40
42
  <div className="px-6">
41
43
  <h3 className="text-center mt-4 text-lg">
42
- {translations?.remove_title ?? 'Remove Card'}
44
+ {translations?.title ?? defaultTranslations.title}
43
45
  </h3>
44
46
  <div className="flex flex-col gap-3 p-5 w-3/4 m-auto">
45
47
  <Button className="py-3 h-auto" onClick={deleteCard}>
46
48
  {isLoading ? (
47
49
  <LoaderSpinner className="w-4 h-4" />
48
50
  ) : (
49
- translations?.remove_button ?? 'Remove'
51
+ translations?.delete_button ?? defaultTranslations.delete_button
50
52
  )}
51
53
  </Button>
52
54
  <Button
@@ -54,7 +56,7 @@ export const MasterpassDeleteConfirmationModal = ({
54
56
  className="underline px-5 py-3 h-auto"
55
57
  onClick={() => dispatch(setDeletionModalVisible(false))}
56
58
  >
57
- {translations?.cancel_button ?? 'Cancel'}
59
+ {translations?.cancel_button ?? defaultTranslations.cancel_button}
58
60
  </Button>
59
61
  {error && <p className="text-error text-xs text-center">{error}</p>}
60
62
  </div>
package/src/views/info-modal/index.tsx CHANGED
@@ -6,9 +6,10 @@ import { Image } from '@akinon/next/components/image';
6
6
  interface InfoModalProps {
7
7
  open: boolean;
8
8
  setOpen: (arg: boolean) => void;
9
+ content?: React.ReactNode;
9
10
  }
10
11
 
11
- export const InfoModal = ({ open, setOpen }: InfoModalProps) => {
12
+ export const InfoModal = ({ open, setOpen, content }: InfoModalProps) => {
12
13
  return (
13
14
  <Modal
14
15
  portalId="agreement-masterpass"
@@ -25,77 +26,79 @@ export const InfoModal = ({ open, setOpen }: InfoModalProps) => {
25
26
  className="w-full overflow-y-auto sm:w-[28rem] max-h-[90vh]"
26
27
  >
27
28
  <div className="px-6 py-4">
28
- <p>
29
- Giriş
30
- <br />
31
- <br />
32
- MasterPass™ by Mastercard ("MasterPass"), Mastercard Europe SA
33
- ("Mastercard") tarafından sunulan ve seçtiğiniz ödeme ve teslimat
34
- bilgilerinizi uygun ve güvenli bir yerde ("MasterPass by Mastercard,"
35
- veya "MasterPass") toplayan, talebiniz üzerine sözkonusu bilgiyi web
36
- sitelerinde, mobil sitelerde veya akıllı telefon uygulamalarında
37
- MasterPass ödeme işareti ("MasterPass Checkout Butonu") taşıyan
38
- çevrimiçi firmalara (herbiri "MasterPass Firması") aktaran bir dijital
39
- ödeme hizmetidir.
40
- <br />
41
- <br />
42
- İşbu Kullanım Şartları ("KŞ") ve MasterPass Gizlilik Bildirimi
43
- ("Gizlilik Bildirimi"), Mastercard ile aranızdaki bir yasal
44
- sözleşmedir. İŞBU KŞ VE GİZLİLİK POLİTİKASINI KABUL ET SEÇENEĞİNE
45
- TIKLANMASINI İÇEREN, MASTERPASS İNTERNET SAYFASI ÜZERİNDEN
46
- MASTERPASS’E KAYIT OLMAKLA, İŞBU KŞ'DE VE GİZLİLİK BİLDİRİMİNDE YER
47
- ALAN TÜM ŞART VE KOŞULLAR İLE MASTERPASS İLE İLGİLİ İŞBU KŞ'DE
48
- TANIMLANDIĞI ÜZERE MASTERCARD TARAFINDAN SİZE ZAMAN ZAMAN
49
- SUNULABİLECEK DİĞER KURAL, İLKE VE PROSEDÜRLERİ KABUL ETMEKTESİNİZ.
50
- <br />
51
- <br />
52
- MasterPass™ by Mastercard ("MasterPass"), Mastercard Europe SA
53
- ("Mastercard") tarafından sunulan ve seçtiğiniz ödeme ve teslimat
54
- MasterPass™ by Mastercard ("MasterPass"), Mastercard Europe SA
55
- ("Mastercard") tarafından sunulan ve seçtiğiniz ödeme ve teslimat
56
- bilgilerinizi uygun ve güvenli bir yerde ("MasterPass by Mastercard,"
57
- veya "MasterPass") toplayan, talebiniz üzerine sözkonusu bilgiyi web
58
- sitelerinde, mobil sitelerde veya akıllı telefon uygulamalarında
59
- MasterPass ödeme işareti ("MasterPass Checkout Butonu") taşıyan
60
- çevrimiçi firmalara (herbiri "MasterPass Firması") aktaran bir dijital
61
- ödeme hizmetidir.
62
- <br />
63
- <br />
64
- İşbu Kullanım Şartları ("KŞ") ve MasterPass Gizlilik Bildirimi
65
- ("Gizlilik Bildirimi"), Mastercard ile aranızdaki bir yasal
66
- sözleşmedir. İŞBU KŞ VE GİZLİLİK POLİTİKASINI KABUL ET SEÇENEĞİNE
67
- TIKLANMASINI İÇEREN, MASTERPASS İNTERNET SAYFASI ÜZERİNDEN
68
- MASTERPASS’E KAYIT OLMAKLA, İŞBU KŞ'DE VE GİZLİLİK BİLDİRİMİNDE YER
69
- ALAN TÜM ŞART VE KOŞULLAR İLE MASTERPASS İLE İLGİLİ İŞBU KŞ'DE
70
- TANIMLANDIĞI ÜZERE MASTERCARD TARAFINDAN SİZE ZAMAN ZAMAN
71
- SUNULABİLECEK DİĞER KURAL, İLKE VE PROSEDÜRLERİ KABUL ETMEKTESİNİZ.
72
- <br />
73
- <br />
74
- MasterPass™ by Mastercard ("MasterPass"), Mastercard Europe SA
75
- ("Mastercard") tarafından sunulan ve seçtiğiniz ödeme ve teslimat
76
- MasterPass™ by Mastercard ("MasterPass"), Mastercard Europe SA
77
- ("Mastercard") tarafından sunulan ve seçtiğiniz ödeme ve teslimat
78
- bilgilerinizi uygun ve güvenli bir yerde ("MasterPass by Mastercard,"
79
- veya "MasterPass") toplayan, talebiniz üzerine sözkonusu bilgiyi web
80
- sitelerinde, mobil sitelerde veya akıllı telefon uygulamalarında
81
- MasterPass ödeme işareti ("MasterPass Checkout Butonu") taşıyan
82
- çevrimiçi firmalara (herbiri "MasterPass Firması") aktaran bir dijital
83
- ödeme hizmetidir.
84
- <br />
85
- <br />
86
- İşbu Kullanım Şartları ("KŞ") ve MasterPass Gizlilik Bildirimi
87
- ("Gizlilik Bildirimi"), Mastercard ile aranızdaki bir yasal
88
- sözleşmedir. İŞBU KŞ VE GİZLİLİK POLİTİKASINI KABUL ET SEÇENEĞİNE
89
- TIKLANMASINI İÇEREN, MASTERPASS İNTERNET SAYFASI ÜZERİNDEN
90
- MASTERPASS’E KAYIT OLMAKLA, İŞBU KŞ'DE VE GİZLİLİK BİLDİRİMİNDE YER
91
- ALAN TÜM ŞART VE KOŞULLAR İLE MASTERPASS İLE İLGİLİ İŞBU KŞ'DE
92
- TANIMLANDIĞI ÜZERE MASTERCARD TARAFINDAN SİZE ZAMAN ZAMAN
93
- SUNULABİLECEK DİĞER KURAL, İLKE VE PROSEDÜRLERİ KABUL ETMEKTESİNİZ.
94
- <br />
95
- <br />
96
- MasterPass™ by Mastercard ("MasterPass"), Mastercard Europe SA
97
- ("Mastercard") tarafından sunulan ve seçtiğiniz ödeme ve teslimat
98
- </p>
29
+ {content ?? (
30
+ <p>
31
+ Giriş
32
+ <br />
33
+ <br />
34
+ MasterPass™ by Mastercard ("MasterPass"), Mastercard Europe SA
35
+ ("Mastercard") tarafından sunulan ve seçtiğiniz ödeme ve teslimat
36
+ bilgilerinizi uygun ve güvenli bir yerde ("MasterPass by
37
+ Mastercard," veya "MasterPass") toplayan, talebiniz üzerine
38
+ sözkonusu bilgiyi web sitelerinde, mobil sitelerde veya akıllı
39
+ telefon uygulamalarında MasterPass ödeme işareti ("MasterPass
40
+ Checkout Butonu") taşıyan çevrimiçi firmalara (herbiri "MasterPass
41
+ Firması") aktaran bir dijital ödeme hizmetidir.
42
+ <br />
43
+ <br />
44
+ İşbu Kullanım Şartları ("KŞ") ve MasterPass Gizlilik Bildirimi
45
+ ("Gizlilik Bildirimi"), Mastercard ile aranızdaki bir yasal
46
+ sözleşmedir. İŞBU KŞ VE GİZLİLİK POLİTİKASINI KABUL ET SEÇENEĞİNE
47
+ TIKLANMASINI İÇEREN, MASTERPASS İNTERNET SAYFASI ÜZERİNDEN
48
+ MASTERPASS’E KAYIT OLMAKLA, İŞBU KŞ'DE VE GİZLİLİK BİLDİRİMİNDE YER
49
+ ALAN TÜM ŞART VE KOŞULLAR İLE MASTERPASS İLE İLGİLİ İŞBU KŞ'DE
50
+ TANIMLANDIĞI ÜZERE MASTERCARD TARAFINDAN SİZE ZAMAN ZAMAN
51
+ SUNULABİLECEK DİĞER KURAL, İLKE VE PROSEDÜRLERİ KABUL ETMEKTESİNİZ.
52
+ <br />
53
+ <br />
54
+ MasterPass™ by Mastercard ("MasterPass"), Mastercard Europe SA
55
+ ("Mastercard") tarafından sunulan ve seçtiğiniz ödeme ve teslimat
56
+ MasterPass™ by Mastercard ("MasterPass"), Mastercard Europe SA
57
+ ("Mastercard") tarafından sunulan ve seçtiğiniz ödeme ve teslimat
58
+ bilgilerinizi uygun ve güvenli bir yerde ("MasterPass by
59
+ Mastercard," veya "MasterPass") toplayan, talebiniz üzerine
60
+ sözkonusu bilgiyi web sitelerinde, mobil sitelerde veya akıllı
61
+ telefon uygulamalarında MasterPass ödeme işareti ("MasterPass
62
+ Checkout Butonu") taşıyan çevrimiçi firmalara (herbiri "MasterPass
63
+ Firması") aktaran bir dijital ödeme hizmetidir.
64
+ <br />
65
+ <br />
66
+ İşbu Kullanım Şartları ("KŞ") ve MasterPass Gizlilik Bildirimi
67
+ ("Gizlilik Bildirimi"), Mastercard ile aranızdaki bir yasal
68
+ sözleşmedir. İŞBU KŞ VE GİZLİLİK POLİTİKASINI KABUL ET SEÇENEĞİNE
69
+ TIKLANMASINI İÇEREN, MASTERPASS İNTERNET SAYFASI ÜZERİNDEN
70
+ MASTERPASS’E KAYIT OLMAKLA, İŞBU KŞ'DE VE GİZLİLİK BİLDİRİMİNDE YER
71
+ ALAN TÜM ŞART VE KOŞULLAR İLE MASTERPASS İLE İLGİLİ İŞBU KŞ'DE
72
+ TANIMLANDIĞI ÜZERE MASTERCARD TARAFINDAN SİZE ZAMAN ZAMAN
73
+ SUNULABİLECEK DİĞER KURAL, İLKE VE PROSEDÜRLERİ KABUL ETMEKTESİNİZ.
74
+ <br />
75
+ <br />
76
+ MasterPass™ by Mastercard ("MasterPass"), Mastercard Europe SA
77
+ ("Mastercard") tarafından sunulan ve seçtiğiniz ödeme ve teslimat
78
+ MasterPass™ by Mastercard ("MasterPass"), Mastercard Europe SA
79
+ ("Mastercard") tarafından sunulan ve seçtiğiniz ödeme ve teslimat
80
+ bilgilerinizi uygun ve güvenli bir yerde ("MasterPass by
81
+ Mastercard," veya "MasterPass") toplayan, talebiniz üzerine
82
+ sözkonusu bilgiyi web sitelerinde, mobil sitelerde veya akıllı
83
+ telefon uygulamalarında MasterPass ödeme işareti ("MasterPass
84
+ Checkout Butonu") taşıyan çevrimiçi firmalara (herbiri "MasterPass
85
+ Firması") aktaran bir dijital ödeme hizmetidir.
86
+ <br />
87
+ <br />
88
+ İşbu Kullanım Şartları ("KŞ") ve MasterPass Gizlilik Bildirimi
89
+ ("Gizlilik Bildirimi"), Mastercard ile aranızdaki bir yasal
90
+ sözleşmedir. İŞBU KŞ VE GİZLİLİK POLİTİKASINI KABUL ET SEÇENEĞİNE
91
+ TIKLANMASINI İÇEREN, MASTERPASS İNTERNET SAYFASI ÜZERİNDEN
92
+ MASTERPASS’E KAYIT OLMAKLA, İŞBU KŞ'DE VE GİZLİLİK BİLDİRİMİNDE YER
93
+ ALAN TÜM ŞART VE KOŞULLAR İLE MASTERPASS İLE İLGİLİ İŞBU KŞ'DE
94
+ TANIMLANDIĞI ÜZERE MASTERCARD TARAFINDAN SİZE ZAMAN ZAMAN
95
+ SUNULABİLECEK DİĞER KURAL, İLKE VE PROSEDÜRLERİ KABUL ETMEKTESİNİZ.
96
+ <br />
97
+ <br />
98
+ MasterPass™ by Mastercard ("MasterPass"), Mastercard Europe SA
99
+ ("Mastercard") tarafından sunulan ve seçtiğiniz ödeme ve teslimat
100
+ </p>
101
+ )}
99
102
  </div>
100
103
  </Modal>
101
104
  );
package/src/views/otp-modal/index.tsx CHANGED
@@ -8,17 +8,14 @@ import { useCallback, useEffect, useState } from 'react';
8
8
  import { formCreator } from '../../utils';
9
9
 
10
10
  import CountdownTimer from '../countdown-timer/countdown-timer';
11
- import { OtpForm, OtpFormProps } from './otp-form';
11
+ import { OtpForm, OtpFormProps, defaultTranslations } from './otp-form';
12
12
  import { useAppDispatch, useAppSelector } from '@akinon/next/redux/hooks';
13
13
  import { setOtpResponse } from '../../redux/reducer';
14
14
  import { Image } from '@akinon/next/components/image';
15
15
 
16
16
  export interface MasterpassOtpModalProps {
17
17
  translations?: {
18
- 1999?: string;
19
- 5192?: string;
20
18
  5001?: string;
21
- 5008?: string;
22
19
  } & OtpFormProps['translations'];
23
20
  }
24
21
 
@@ -140,6 +137,9 @@ export const MasterpassOtpModal = ({
140
137
  resendSmsFetching={isBusy}
141
138
  targetDate={otpTime}
142
139
  resendSms={resendSms}
140
+ resendSmsTranslation={
141
+ translations?.resend_sms ?? defaultTranslations.resend_sms
142
+ }
143
143
  />
144
144
  </div>
145
145
  </div>
package/src/views/otp-modal/otp-form.tsx CHANGED
@@ -4,10 +4,11 @@ import { useEffect } from 'react';
4
4
  import { useForm } from 'react-hook-form';
5
5
  import * as yup from 'yup';
6
6
 
7
- const defaultTranslations = {
7
+ export const defaultTranslations = {
8
8
  enter_the_verification_code: 'Enter the verification code',
9
9
  sms_code: 'SMS Code',
10
- verify: 'Verify'
10
+ verify: 'Verify',
11
+ resend_sms: 'Resend SMS'
11
12
  };
12
13
 
13
14
  export interface OtpFormProps {