Merge branch 'main' into feature/34974-vemno

README.md

@@ -9,22 +9,27 @@ Each payment component takes a set of props that will be the same for everything
 - **createPaymentUrl**: `string`  
   _POST_-Request - we get a [_CreatePaymentResponse_](src/types/index.ts)  
   It is **your** responsibility to develop this API  
-  The url that gets called to the endpoint of the connect app to create a payment in commerce tools. Communicates with CommerceTools backend  
+  The url that gets called to the endpoint of the connect app to create a payment in commercetools. Communicates with commercetools backend  
   See the examples in our [CoFe integration example repository]()
 - **getSettingsUrl**: `string`  
   _POST_-Request - we get a [_GetSettingsResponse_](src/types/index.ts)  
   It is **your** responsibility to develop this API  
-  The url that gets called to the endpoint of the connect app to get settings of PayPal in commerce tools. Communicates with CommerceTools backend  
+  The url that gets called to the endpoint of the connect app to get settings of PayPal in commercetools. Communicates with commercetools backend  
   See the examples in our [CoFe integration example repository]()
 - **createOrderUrl**: `string`  
   _POST_-Request - we get a [_CreateOrderResponse_](src/types/index.ts)  
   It is **your** responsibility to develop this API  
-  The url that gets called to the endpoint of the connect app to create a PayPal order in commerce tools. Communicates with CommerceTools backend  
+  The url that gets called to the endpoint of the connect app to create a PayPal order in commercetools. Communicates with commercetools backend  
   See the examples in our [CoFe integration example repository]()
 - **onApproveUrl**: `string`  
   _POST_-Request - we get a [_OnApproveResponse_](src/types/index.ts)  
   It is **your** responsibility to develop this API  
-  The url that gets called to the endpoint of the connect app to capture a PayPal order in commerce tools. Communicates with CommerceTools backend  
+  The url that gets called to the endpoint of the connect app to capture a PayPal order in commercetools. Communicates with commercetools backend  
+  See the examples in our [CoFe integration example repository]()
+- **authorizeOrderUrl**: `string`  
+  _POST_-Request - we get a [_OnApproveResponse_](src/types/index.ts)  
+  It is **your** responsibility to develop this API  
+  The url that gets called to the endpoint of the connect app to authorize a PayPal order in commercetools. Communicates with commercetools backend  
   See the examples in our [CoFe integration example repository]()
 - **cartInformation**: `object`  
   Information about the customers cart to crate payments with.
@@ -65,6 +70,9 @@ Each payment component takes a set of props that will be the same for everything
   "Commercetools-Frontend-Extension-Version": string;
   ```
 
+- **shippingMethodId**: `string`  
+  The id of the selected shipping. It will be sent back in the create purchase call to calculate the correct shipping costs.
+
 - **options**: `object`
   options will pass to PayPalScriptProvider component and you can see the structure on PayPal documentation. [_ReactPayPalScriptOptions_](https://github.com/paypal/react-paypal-js/blob/main/src/types/scriptProviderTypes.ts).
 
@@ -82,3 +90,11 @@ PayPal components props are based on PayPal props and you can see them on PayPal
 ### PayPalMessages
 
 PayPal messages props are based on PayPalMessages props and you can see them on PayPal official documentation [_PayPalMessagesComponentOptions_](https://github.com/paypal/react-paypal-js/blob/main/src/components/PayPalMessages.tsx).
+
+### HostedFields
+
+- **getClientTokenUrl**: `string`  
+  _POST_-Request - we get a [_ClientTokenResponse_](src/types/index.ts)  
+  It is **your** responsibility to develop this API  
+  The URL that gets called to the endpoint of the connect app to get the client token to use in PayPalHostedFieldsProvider component in commercetools. Communicates with commercetools backend  
+  See the examples in our [CoFe integration example repository]()

package.json

@@ -1,6 +1,6 @@
 {
   "name": "paypal-commercetools-client",
-  "version": "0.0.42",
+  "version": "0.0.43",
   "private": false,
   "type": "module",
   "license": "MIT",

src/App.tsx

@@ -10,7 +10,7 @@ import { HostedFields } from "./components/HostedFields";
 
 const CC_FRONTEND_EXTENSION_VERSION: string = "devmajidabbasi";
 const FRONTASTIC_SESSION: string =
-  "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ3aXNobGlzdElkIjoiODg4OWQ4ZTYtNTcxOC00OTdjLWI3ZDgtYjBkYmM0OWIxNDkwIiwiY2FydElkIjoiMjJjOTVlYWItN2MyYy00ZjJmLTgxNDMtMzVlNzNhM2JmYTYwIn0.CbsE3rxtmU5qrDgoD3-6CKUo7on6k5jswpDmywNBZVo";
+  "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ3aXNobGlzdElkIjoiOWIzZGY0M2UtNjc4MC00Yzk1LWJkNjktYmIyYWZhNDMxOGE4IiwiY2FydElkIjoiNWQ4Y2YyZDgtYzAwMC00MDI4LWI0NTUtNDcyNDIwNTJlMzVhIn0.dfUq-ZvWNEUaJny40BJbXv9fK25CK90sYQCqHkXX3sw";
 
 function App() {
   const [choosenPaymentMethod, setChoosenPaymentMethod] = useState("");

src/components/RenderTemplate/RenderTemplate.tsx

@@ -1,5 +1,4 @@
 import { FC } from "react";
-import { PayPalScriptProvider } from "@paypal/react-paypal-js";
 
 import { NotificationsProvider } from "../../app/useNotifications";
 import { PaymentProvider } from "../../app/usePayment";

storybook/stories/All.stories.js

@@ -36,6 +36,9 @@ export default {
       ],
       control: { type: "select" },
     },
+    getClientTokenUrl: {
+      table: { disable: true },
+    },
   },
 };
 

storybook/stories/HostedFields.stories.js

@@ -4,7 +4,11 @@ import { params, options, requestHeader } from "./constants";
 export default {
   title: "Components/HostedFields",
   component: HostedFields,
-  argTypes: {},
+  argTypes: {
+    authorizeOrderUrl: {
+      table: { disable: true },
+    },
+  },
 };
 
 export const Main = {

storybook/stories/PayPal.stories.js

@@ -8,6 +8,9 @@ export default {
     fundingSource: {
       table: { disable: true },
     },
+    getClientTokenUrl: {
+      table: { disable: true },
+    },
   },
 };
 

storybook/stories/PayPalMessages.stories.js

@@ -13,6 +13,24 @@ export default {
     fundingSource: {
       table: { disable: true },
     },
+    onApproveUrl: {
+      table: { disable: true },
+    },
+    authorizeOrderUrl: {
+      table: { disable: true },
+    },
+    getClientTokenUrl: {
+      table: { disable: true },
+    },
+    shippingMethodId: {
+      table: { disable: true },
+    },
+    cartInformation: {
+      table: { disable: true },
+    },
+    purchaseCallback: {
+      table: { disable: true },
+    },
   },
 };
 

storybook/stories/PayPalPayLater.stories.js

@@ -13,6 +13,9 @@ export default {
     fundingSource: {
       table: { disable: true },
     },
+    getClientTokenUrl: {
+      table: { disable: true },
+    },
   },
 };
 

storybook/stories/constants.jsx

@@ -30,7 +30,7 @@ export const options = {
 
 export const requestHeader = {
   "Frontastic-Session":
-    "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJjYXJ0SWQiOiIwYzkwZjliMC0yODVhLTQwMDQtOWIwYS0yYzI2ZGE4ZjExNzQifQ.mJIK2xLEt-vaF78zk2N341csfVjCe_8QC_2BaBqn6bU",
+    "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ3aXNobGlzdElkIjoiOWIzZGY0M2UtNjc4MC00Yzk1LWJkNjktYmIyYWZhNDMxOGE4IiwiY2FydElkIjoiNWQ4Y2YyZDgtYzAwMC00MDI4LWI0NTUtNDcyNDIwNTJlMzVhIn0.dfUq-ZvWNEUaJny40BJbXv9fK25CK90sYQCqHkXX3sw",
   "Commercetools-Frontend-Extension-Version": "devmajidabbasi",
 };
 
@@ -42,7 +42,7 @@ export const params = {
   createOrderUrl: `${baseUrl}payment/createPayPalOrder`,
   getClientTokenUrl: `${baseUrl}payment/getClientToken`,
   onApproveUrl: `${baseUrl}payment/capturePayPalOrder`,
-
+  authorizeOrderUrl: `${baseUrl}payment/authorizePayPalOrder`,
   shippingMethodId: "da416140-39bf-4677-8882-8b6cab23d981",
   cartInformation: cartInformation,
   purchaseCallback: (result, options) => {