AD-288 Implement Translation Support in Adyen Library for Spartacus S…

…torefront
Adyen · Aug 13, 2024 · 6fafd5b · 6fafd5b
1 parent 7b79c52
commit 6fafd5b
Show file tree

Hide file tree

Showing 15 changed files with 99 additions and 18 deletions.
diff --git a/projects/adyen-payments/src/lib/adyen-payments.module.ts b/projects/adyen-payments/src/lib/adyen-payments.module.ts
@@ -16,7 +16,9 @@ import {AdyenAddressService} from "./service/adyen-address.service";
 import {AdditionalDetailsConnector} from "./core/connectors/additional-details.connector";
 import {OccAdditionalDetailsAdapter} from "./core/occ/adapters/occ-additionaldetails.adapter";
 import {AdyenRedirectModule} from "./adyen-redirect/adyen-redirect.module";
-import { provideDefaultConfig } from '@spartacus/core';
+import {I18nConfig, provideConfig, provideDefaultConfig} from '@spartacus/core';
+import {adyenCheckoutTranslationChunksConfig, adyenCheckoutTranslations} from "./assets/translations/translations";
+
 
 
 @NgModule({
@@ -55,7 +57,13 @@ import { provideDefaultConfig } from '@spartacus/core';
     OccCheckoutConfigAdapter,
     CheckoutAdyenEventListener,
     CheckoutConfigurationConnector,
-    OrderHistoryConnector],
+    OrderHistoryConnector,
+    provideConfig(<I18nConfig>{
+      i18n: {
+        resources: adyenCheckoutTranslations,
+        chunks: adyenCheckoutTranslationChunksConfig,
+      },
+    })],
 })
 export class AdyenPaymentsModule {
 }
diff --git a/projects/adyen-payments/src/lib/adyen-redirect/adyen-redirect-error.component.ts b/projects/adyen-payments/src/lib/adyen-redirect/adyen-redirect-error.component.ts
@@ -5,6 +5,7 @@ import {
   GlobalMessageType,
   OCC_CART_ID_CURRENT,
   RoutingService,
+  TranslationService,
   UserIdService
 } from '@spartacus/core';
 
@@ -18,7 +19,8 @@ export class AdyenRedirectErrorComponent implements OnInit {
   constructor(protected routingService: RoutingService,
               protected globalMessageService: GlobalMessageService,
               protected multiCartFacade: MultiCartFacade,
-              protected userIdService: UserIdService
+              protected userIdService: UserIdService,
+              protected translationService: TranslationService,
   ) {
   }
 
@@ -28,8 +30,11 @@ export class AdyenRedirectErrorComponent implements OnInit {
 
       if (errorCode) {
         let decodedError = atob(errorCode);
-
-        this.globalMessageService.add(decodedError, GlobalMessageType.MSG_TYPE_ERROR, this.messageTimeout);
+
+        this.translationService.translate(decodedError).subscribe(message => {
+          this.globalMessageService.add(message, GlobalMessageType.MSG_TYPE_ERROR, this.messageTimeout);
+        })
+
         this.multiCartFacade.reloadCart(OCC_CART_ID_CURRENT)
 
         this.userIdService.takeUserId().subscribe((userId) => {

diff --git a/projects/adyen-payments/src/lib/assets/public_api.ts b/projects/adyen-payments/src/lib/assets/public_api.ts
@@ -0,0 +1 @@
+export * from './translations/translations';
diff --git a/projects/adyen-payments/src/lib/assets/translations/en/adyen-checkout.json b/projects/adyen-payments/src/lib/assets/translations/en/adyen-checkout.json
@@ -0,0 +1,11 @@
+{
+  "adyenCheckout": {
+    "selectBillingAddress": "Select your billing address",
+    "selectAddress": "Select address",
+    "paymentFailed": "Payment failed",
+    "paymentPending": "Payment processing in progress",
+    "paymentRejected": "Your payment was rejected",
+    "paymentSuccessful": "Payment successful",
+    "paymentTimeout": "Payment took longer than expected. Try refreshing page in few minutes"
+  }
+}
diff --git a/projects/adyen-payments/src/lib/assets/translations/en/index.ts b/projects/adyen-payments/src/lib/assets/translations/en/index.ts
@@ -0,0 +1,9 @@
+// @ts-ignore
+import adyenCheckout from './adyen-checkout.json';
+// @ts-ignore
+import paymentErrors from './payment-errors.json';
+
+export const en = {
+  adyenCheckout,
+  paymentErrors
+};
diff --git a/projects/adyen-payments/src/lib/assets/translations/en/payment-errors.json b/projects/adyen-payments/src/lib/assets/translations/en/payment-errors.json
@@ -0,0 +1,27 @@
+{
+  "checkout": {
+    "error": {
+      "authorization": {
+        "payment": {
+          "refused": "The payment is REFUSED.",
+          "detail": {
+            "not": {
+              "found": "The payment is REFUSED because the saved card is removed. Please try an other payment method."
+            }
+          }
+        },
+        "restricted": {
+          "card": "The card is restricted."
+        },
+        "cvc": {
+          "declined": "The payment is REFUSED. Please check your Card details."
+        },
+        "transaction": {
+          "not": {
+            "permitted": "The transaction is not permitted."
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/projects/adyen-payments/src/lib/assets/translations/translations.ts b/projects/adyen-payments/src/lib/assets/translations/translations.ts
@@ -0,0 +1,15 @@
+import {TranslationChunksConfig, TranslationResources} from "@spartacus/core";
+import {en} from "./en";
+
+export const adyenCheckoutTranslations: TranslationResources = {
+  en,
+};
+
+export const adyenCheckoutTranslationChunksConfig: TranslationChunksConfig = {
+  adyenCheckout: [
+    'adyenCheckout'
+  ],
+  paymentErrors: [
+    'checkout'
+  ]
+}
diff --git a/...method/checkout-adyen-delivery-address/adyen-checkout-adyen-delivery-address.component.ts b/...method/checkout-adyen-delivery-address/adyen-checkout-adyen-delivery-address.component.ts
@@ -138,9 +138,7 @@ export class AdyenCheckoutAdyenDeliveryAddressComponent implements OnInit {
       this.selectedAddress$,
     ]);
     const translations$ = combineLatest([
-
-      //TODO: translations
-      of("Select address"),
+      this.translationService.translate('adyenCheckout.selectAddress'),
       this.translationService.translate('addressCard.selected'),
       this.translationService.translate('addressCard.phoneNumber'),
       this.translationService.translate('addressCard.mobileNumber'),

diff --git a/...adyen-payment-method/checkout-adyen-delivery-address/checkout-adyen-delivery-address.html b/...adyen-payment-method/checkout-adyen-delivery-address/checkout-adyen-delivery-address.html
@@ -38,8 +38,7 @@
 
         <ng-template #showExistingAddresses>
           <p class="cx-checkout-text">
-            <!--          TODO: Translations-->
-            {{ 'Select your billing address' }}
+            {{ 'adyenCheckout.selectBillingAddress' | cxTranslate }}
           </p>
 
           <div class="cx-checkout-btns cx-checkout-btns-top">

diff --git a/...n/order-confirmation-payment-status/statuses/failed/order-confirmation-status-failed.html b/...n/order-confirmation-payment-status/statuses/failed/order-confirmation-status-failed.html
@@ -1,4 +1,4 @@
 <div class= "payment-status">
   <cx-order-confirmation-icon-fail/>
-  <div class="payment-status_text">Payment failed</div>
+  <div class="payment-status_text">{{ 'adyenCheckout.paymentFailed' | cxTranslate }}</div>
 </div>
diff --git a/...order-confirmation-payment-status/statuses/pending/order-confirmation-status-pending.html b/...order-confirmation-payment-status/statuses/pending/order-confirmation-status-pending.html
@@ -1,4 +1,4 @@
 <div class= "payment-status">
   <cx-order-confirmation-payment-status-spinner/>
-  <div class="payment-status_text">Payment processing in progress</div>
+  <div class="payment-status_text">{{ 'adyenCheckout.paymentPending' | cxTranslate }}</div>
 </div>
diff --git a/...der-confirmation-payment-status/statuses/rejected/order-confirmation-status-rejected.html b/...der-confirmation-payment-status/statuses/rejected/order-confirmation-status-rejected.html
@@ -1,4 +1,4 @@
 <div class= "payment-status">
   <cx-order-confirmation-icon-fail/>
-  <div class="payment-status_text">Your payment was rejected</div>
+  <div class="payment-status_text">{{ 'adyenCheckout.paymentRejected' | cxTranslate }}</div>
 </div>
diff --git a/...order-confirmation-payment-status/statuses/success/order-confirmation-status-success.html b/...order-confirmation-payment-status/statuses/success/order-confirmation-status-success.html
@@ -1,4 +1,4 @@
 <div class= "payment-status">
   <cx-order-confirmation-icon-success/>
-  <div class="payment-status_text">Payment successful</div>
+  <div class="payment-status_text">{{ 'adyenCheckout.paymentSuccessful' | cxTranslate }}</div>
 </div>
diff --git a/...order-confirmation-payment-status/statuses/timeout/order-confirmation-status-timeout.html b/...order-confirmation-payment-status/statuses/timeout/order-confirmation-status-timeout.html
@@ -1,4 +1,4 @@
 <div class= "payment-status">
   <cx-order-confirmation-icon-timeout/>
-  <div class="payment-status_text">Payment took longer than expected. Try refreshing page in few minutes</div>
+  <div class="payment-status_text">{{ 'adyenCheckout.paymentTimeout' | cxTranslate }}</div>
 </div>
diff --git a/projects/adyen-payments/src/lib/service/adyen-order.service.ts b/projects/adyen-payments/src/lib/service/adyen-order.service.ts
@@ -7,6 +7,7 @@ import {
   EventService,
   GlobalMessageService,
   GlobalMessageType,
+  TranslationService,
   UserIdService
 } from "@spartacus/core";
 import {OrderConnector, OrderHistoryConnector, OrderService} from '@spartacus/order/core';
@@ -31,7 +32,8 @@ export class AdyenOrderService extends OrderService {
               protected override orderConnector: OrderConnector,
               protected override eventService: EventService,
               protected globalMessageService: GlobalMessageService,
-              protected orderHistoryConnector: OrderHistoryConnector
+              protected orderHistoryConnector: OrderHistoryConnector,
+              protected translationService: TranslationService
   ) {
     super(activeCartFacade, userIdService, commandService, orderConnector, eventService)
   }
@@ -59,7 +61,10 @@ export class AdyenOrderService extends OrderService {
                 return {...response, success: true}
               }),
               catchError((error: HttpErrorResponse) => {
-                  this.globalMessageService.add(error.error.errorCode, GlobalMessageType.MSG_TYPE_ERROR, this.messageTimeout);
+                  this.translationService.translate(error.error.errorCode).subscribe((message) => {
+                    this.globalMessageService.add(message, GlobalMessageType.MSG_TYPE_ERROR, this.messageTimeout);
+                  })
+
                   let response: PlaceOrderResponse = {
                     success: false,
                     error: error.error.errorCode,
@@ -103,7 +108,10 @@ export class AdyenOrderService extends OrderService {
                 return {...response, success: true}
               }),
               catchError((error: HttpErrorResponse) => {
-                  this.globalMessageService.add(error.error.errorCode, GlobalMessageType.MSG_TYPE_ERROR, this.messageTimeout);
+                  this.translationService.translate(error.error.errorCode).subscribe((message) => {
+                    this.globalMessageService.add(message, GlobalMessageType.MSG_TYPE_ERROR, this.messageTimeout);
+                  })
+
                   let response: PlaceOrderResponse = {
                     success: false,
                     error: error.error.errorCode,