From 1e1674a42da9deb64c1884a0028ab3d7b54dc05f Mon Sep 17 00:00:00 2001
From: Majid Abbasi <majid.abbasi@mediaopt.de>
Date: Thu, 18 Apr 2024 12:51:18 +0200
Subject: [PATCH] #36076 Added applePayDisplayName to ApplePay component

---
 package-lock.json                          |  4 ++--
 package.json                               |  2 +-
 src/App.tsx                                |  1 +
 src/components/ApplePay/ApplePay.tsx       |  4 ++--
 src/components/ApplePay/ApplePayButton.tsx |  9 ++++++---
 src/components/ApplePay/ApplePayMask.tsx   | 15 +++++++++------
 src/types/index.ts                         |  6 ++++++
 7 files changed, 27 insertions(+), 14 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 561bbe3..6a20655 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "paypal-commercetools-client",
-  "version": "0.1.18-alpha",
+  "version": "0.1.19-alpha",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "paypal-commercetools-client",
-      "version": "0.1.18-alpha",
+      "version": "0.1.19-alpha",
       "license": "MIT",
       "dependencies": {
         "@heroicons/react": "^1.0.6",
diff --git a/package.json b/package.json
index 26d299c..b40a356 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "paypal-commercetools-client",
-  "version": "0.1.18-alpha",
+  "version": "0.1.19-alpha",
   "private": false,
   "type": "module",
   "license": "MIT",
diff --git a/src/App.tsx b/src/App.tsx
index 5d092bc..edadd3e 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -200,6 +200,7 @@ function App() {
           components: "applepay,buttons",
           buyerCountry: "US",
         }}
+        applePayDisplayName="My Store"
       />
     ),
     Venmo: (
diff --git a/src/components/ApplePay/ApplePay.tsx b/src/components/ApplePay/ApplePay.tsx
index 1930211..5f5818c 100644
--- a/src/components/ApplePay/ApplePay.tsx
+++ b/src/components/ApplePay/ApplePay.tsx
@@ -3,9 +3,9 @@ import React from "react";
 import { RenderTemplate } from "../RenderTemplate";
 import { ApplePayButton } from "./ApplePayButton";
 
-import { SmartComponentsProps } from "../../types";
+import { ApplePayComponentsProps } from "../../types";
 
-export const ApplePay: React.FC<SmartComponentsProps> = ({
+export const ApplePay: React.FC<ApplePayComponentsProps> = ({
   options,
 
   createPaymentUrl,
diff --git a/src/components/ApplePay/ApplePayButton.tsx b/src/components/ApplePay/ApplePayButton.tsx
index 196b879..658d722 100644
--- a/src/components/ApplePay/ApplePayButton.tsx
+++ b/src/components/ApplePay/ApplePayButton.tsx
@@ -6,9 +6,12 @@ import { useHandleCreatePayment } from "../../app/useHandleCreatePayment";
 
 import { ApplePayMask } from "./ApplePayMask";
 
-type CustomPayPalButtonsComponentProps = PayPalButtonsComponentProps & {
-  enableVaulting?: boolean;
-};
+import { ApplePayProps } from "../../types";
+
+type CustomPayPalButtonsComponentProps = ApplePayProps &
+  PayPalButtonsComponentProps & {
+    enableVaulting?: boolean;
+  };
 
 export const ApplePayButton: React.FC<CustomPayPalButtonsComponentProps> = (
   props
diff --git a/src/components/ApplePay/ApplePayMask.tsx b/src/components/ApplePay/ApplePayMask.tsx
index 6e6ad24..099875d 100644
--- a/src/components/ApplePay/ApplePayMask.tsx
+++ b/src/components/ApplePay/ApplePayMask.tsx
@@ -2,7 +2,7 @@ import React, { useEffect, useState } from "react";
 
 import loadScript from "../../app/loadScript";
 import { usePayment } from "../../app/usePayment";
-import { CustomPayPalButtonsComponentProps } from "../../types";
+import { CustomPayPalButtonsComponentProps, ApplePayProps } from "../../types";
 import { ERROR_TEXT_STYLE } from "../../styles";
 
 declare const window: any;
@@ -40,9 +40,10 @@ type Applepay = {
   validateMerchant: ({}: ApplepayValidateMerchant) => Promise<ApplepayValidateMerchantResult>;
 };
 
-export const ApplePayMask: React.FC<CustomPayPalButtonsComponentProps> = (
-  props
-) => {
+type ApplePayMaskComponentProps = ApplePayProps &
+  CustomPayPalButtonsComponentProps;
+
+export const ApplePayMask: React.FC<ApplePayMaskComponentProps> = (props) => {
   const [logs, setLogs] = useState<string>();
   const [paymentId, setPaymentId] = useState<string>();
 
@@ -53,6 +54,8 @@ export const ApplePayMask: React.FC<CustomPayPalButtonsComponentProps> = (
 
   const { paymentInfo, handleCreateOrder, handleOnApprove } = usePayment();
 
+  const { applePayDisplayName } = props;
+
   useEffect(() => {
     loadScript("https://applepay.cdn-apple.com/jsapi/v1/apple-pay-sdk.js").then(
       async () => {
@@ -105,7 +108,7 @@ export const ApplePayMask: React.FC<CustomPayPalButtonsComponentProps> = (
       currencyCode: paymentInfo.currency,
       requiredBillingContactFields: ["postalAddress"],
       total: {
-        label: "Demo",
+        label: applePayDisplayName,
         type: "final",
         amount: paymentInfo.amount,
       },
@@ -119,7 +122,7 @@ export const ApplePayMask: React.FC<CustomPayPalButtonsComponentProps> = (
       try {
         const validateResult = await pay.validateMerchant({
           validationUrl: event.validationURL,
-          displayName: "My Store",
+          displayName: applePayDisplayName,
         });
 
         console.log("onvalidatemerchant validateResult", validateResult);
diff --git a/src/types/index.ts b/src/types/index.ts
index e6ee806..56aa49e 100644
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -173,6 +173,12 @@ export type CustomPayPalButtonsComponentProps = Omit<
 export type SmartComponentsProps = CustomPayPalButtonsComponentProps &
   GeneralComponentsProps;
 
+export type ApplePayProps = {
+  applePayDisplayName: string;
+};
+
+export type ApplePayComponentsProps = ApplePayProps & SmartComponentsProps;
+
 export type CartInformation = {
   account: {
     email: string;