From 5c080b7542d65497e02586ec890ce24d0b549c12 Mon Sep 17 00:00:00 2001 From: Majid Abbasi Date: Wed, 11 Oct 2023 17:49:32 +0200 Subject: [PATCH 1/3] #34973 updated readme file and stories --- README.md | 16 ++++++++++++++++ src/App.tsx | 2 +- .../RenderTemplate/RenderTemplate.tsx | 1 - storybook/stories/All.stories.js | 3 +++ storybook/stories/HostedFields.stories.js | 6 +++++- storybook/stories/PayPal.stories.js | 3 +++ storybook/stories/PayPalMessages.stories.js | 18 ++++++++++++++++++ storybook/stories/PayPalPayLater.stories.js | 3 +++ storybook/stories/TestButton.stories.js | 15 --------------- storybook/stories/constants.jsx | 4 ++-- 10 files changed, 51 insertions(+), 20 deletions(-) delete mode 100644 storybook/stories/TestButton.stories.js diff --git a/README.md b/README.md index 0692be0..456d90e 100644 --- a/README.md +++ b/README.md @@ -26,6 +26,11 @@ Each payment component takes a set of props that will be the same for everything 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 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 commerce tools. Communicates with CommerceTools backend + See the examples in our [CoFe integration example repository]() - **cartInformation**: `object` Information about the customers cart to crate payments with. Structure: @@ -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 commerce tools. Communicates with CommerceTools backend + See the examples in our [CoFe integration example repository]() diff --git a/src/App.tsx b/src/App.tsx index de6fe29..f3fd4df 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -10,7 +10,7 @@ import { HostedFields } from "./components/HostedFields"; const CC_FRONTEND_EXTENSION_VERSION: string = "devmajidabbasi"; const FRONTASTIC_SESSION: string = - "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJjYXJ0SWQiOiI5MWMyZDUxOS0zZDgwLTQwODYtYjMyMS03ZmM1MDNmZDYyMGYiLCJ3aXNobGlzdElkIjoiMGQ1NDM2NjEtMDA0OS00MDY1LTlkZWYtYWY3NTY3MjdiMTJkIn0.-lqUW_tQUd9KzmWHV0hygcGsxOuabK8UkfNciEEmAXQ"; + "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ3aXNobGlzdElkIjoiOWIzZGY0M2UtNjc4MC00Yzk1LWJkNjktYmIyYWZhNDMxOGE4IiwiY2FydElkIjoiNWQ4Y2YyZDgtYzAwMC00MDI4LWI0NTUtNDcyNDIwNTJlMzVhIn0.dfUq-ZvWNEUaJny40BJbXv9fK25CK90sYQCqHkXX3sw"; function App() { const [choosenPaymentMethod, setChoosenPaymentMethod] = useState(""); diff --git a/src/components/RenderTemplate/RenderTemplate.tsx b/src/components/RenderTemplate/RenderTemplate.tsx index bed7e07..cf29adb 100644 --- a/src/components/RenderTemplate/RenderTemplate.tsx +++ b/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"; diff --git a/storybook/stories/All.stories.js b/storybook/stories/All.stories.js index 24a7038..4390979 100644 --- a/storybook/stories/All.stories.js +++ b/storybook/stories/All.stories.js @@ -36,6 +36,9 @@ export default { ], control: { type: "select" }, }, + getClientTokenUrl: { + table: { disable: true }, + }, }, }; diff --git a/storybook/stories/HostedFields.stories.js b/storybook/stories/HostedFields.stories.js index b2b9828..e572b48 100644 --- a/storybook/stories/HostedFields.stories.js +++ b/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 = { diff --git a/storybook/stories/PayPal.stories.js b/storybook/stories/PayPal.stories.js index e8dc14a..f521961 100644 --- a/storybook/stories/PayPal.stories.js +++ b/storybook/stories/PayPal.stories.js @@ -8,6 +8,9 @@ export default { fundingSource: { table: { disable: true }, }, + getClientTokenUrl: { + table: { disable: true }, + }, }, }; diff --git a/storybook/stories/PayPalMessages.stories.js b/storybook/stories/PayPalMessages.stories.js index 0e9febf..6579e13 100644 --- a/storybook/stories/PayPalMessages.stories.js +++ b/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 }, + }, }, }; diff --git a/storybook/stories/PayPalPayLater.stories.js b/storybook/stories/PayPalPayLater.stories.js index ca8f787..79981aa 100644 --- a/storybook/stories/PayPalPayLater.stories.js +++ b/storybook/stories/PayPalPayLater.stories.js @@ -13,6 +13,9 @@ export default { fundingSource: { table: { disable: true }, }, + getClientTokenUrl: { + table: { disable: true }, + }, }, }; diff --git a/storybook/stories/TestButton.stories.js b/storybook/stories/TestButton.stories.js deleted file mode 100644 index 803b638..0000000 --- a/storybook/stories/TestButton.stories.js +++ /dev/null @@ -1,15 +0,0 @@ -import { TestButton } from "../../src/components/TestButton"; -import { params, options, requestHeader } from "./constants"; - -export default { - title: "Components/TestButton", - component: TestButton, -}; - -export const Main = { - args: { - ...params, - requestHeader, - ...options, - }, -}; diff --git a/storybook/stories/constants.jsx b/storybook/stories/constants.jsx index 2b3905f..658a264 100644 --- a/storybook/stories/constants.jsx +++ b/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) => { From df6d8af1d17aac5a519bf2255a6647f03c318c0e Mon Sep 17 00:00:00 2001 From: Majid Abbasi Date: Mon, 16 Oct 2023 09:25:55 +0200 Subject: [PATCH 2/3] #34973 fixed typo related to commercetools --- README.md | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/README.md b/README.md index 456d90e..d6cd8c5 100644 --- a/README.md +++ b/README.md @@ -9,27 +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 commerce tools. Communicates with CommerceTools backend + 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. @@ -96,5 +96,5 @@ PayPal messages props are based on PayPalMessages props and you can see them on - **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 commerce tools. Communicates with CommerceTools backend + 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]() From 93deec4f2119934eac41365f0ecf5d795bd688c1 Mon Sep 17 00:00:00 2001 From: Majid Abbasi Date: Mon, 16 Oct 2023 11:49:36 +0200 Subject: [PATCH 3/3] #34973 increased version --- package-lock.json | 4 ++-- package.json | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/package-lock.json b/package-lock.json index 9f4fdb4..be34726 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "paypal-commercetools-client", - "version": "0.0.42", + "version": "0.0.43", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "paypal-commercetools-client", - "version": "0.0.42", + "version": "0.0.43", "license": "MIT", "dependencies": { "@heroicons/react": "^1.0.6", diff --git a/package.json b/package.json index 586c77a..da43832 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "paypal-commercetools-client", - "version": "0.0.42", + "version": "0.0.43", "private": false, "type": "module", "license": "MIT",