From fdf166ff76c6b51e14dca514779353bdaad8a820 Mon Sep 17 00:00:00 2001
From: jmcollin <jean-marie.collin@prestashop.com>
Date: Mon, 13 Jan 2025 15:44:15 +0100
Subject: [PATCH 1/3] feat: add payment method standalone

---
 .../ps_billing_payment_method-pane.png        | Bin 0 -> 4112 bytes
 .../3-payment-method-pane/README.md           | 165 ++++++++++++++++++
 2 files changed, 165 insertions(+)
 create mode 100644 docs/src/.vuepress/public/assets/images/billing/ps_billing_payment_method-pane.png
 create mode 100644 docs/src/5-prestashop-billing/100-hidden/3-payment-method-pane/README.md

diff --git a/docs/src/.vuepress/public/assets/images/billing/ps_billing_payment_method-pane.png b/docs/src/.vuepress/public/assets/images/billing/ps_billing_payment_method-pane.png
new file mode 100644
index 0000000000000000000000000000000000000000..d420a78755b80762971a7354b5fbb718bd14bdc4
GIT binary patch
literal 4112
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
N)CniMk{{0h^gmLkfy@8^

literal 0
HcmV?d00001

diff --git a/docs/src/5-prestashop-billing/100-hidden/3-payment-method-pane/README.md b/docs/src/5-prestashop-billing/100-hidden/3-payment-method-pane/README.md
new file mode 100644
index 0000000..ebb7a16
--- /dev/null
+++ b/docs/src/5-prestashop-billing/100-hidden/3-payment-method-pane/README.md
@@ -0,0 +1,165 @@
+---
+title: Payment Method
+---
+
+[[toc]]
+
+# Address
+
+## Use case
+
+Some of our users don't want to use the whole funnel, because it doesn't fit very well with the onboarding flow. We provide a checkout only component, which handle only the payment method.
+
+This component can be imported in any layout: a page, a modal, a fullscreen modal...
+
+![PrestaShop Payment Method Pane](/assets/images/billing/ps_billing_payment_method-pane.png)
+
+## Implementation
+
+### Add the component in your page
+
+First of all you need to add `@prestashopcorp/billing-cdc` to your project.
+
+```
+# Import from CDN
+<script src="https://unpkg.com/@prestashopcorp/billing-cdc/dist/bundle.js"></script>
+
+# OR add it to your project dependencies
+npm add @prestashopcorp/billing-cdc
+```
+
+`@prestashopcorp/billing-cdc` provides the component `UserPaymentMethodManagementComponent` and `ModalContainerComponent`. Depending on your project setup, the way you will use this component will change.
+
+### Build the context
+
+We provide a PHP lib which create the billingContext for you, but if you want to display the checkout outside of a PrestaShop shop, you need to build it manually. Here is an example of the context. Please find more information about the context [in PrestaShop Billing CDC page](http://localhost:8080/5-prestashop-billing/6-references/3-billing-cdc/#context).
+
+:::tip Note
+The `contextType` set to shop means that you want to attach the subscription to a shop.
+:::
+
+
+```javascript
+const billingContext = {
+  contextType: 'user',
+  contextVersion: 2,
+  billingEnv: 'production', // could be 'preprod' depending on your authentication configuration
+  isSandbox: true,
+  accessToken: 't0K3N',     // the authentication token of your user, it should contain the scope "subscription.write"
+  i18n: {
+    isoCode: 'en',          // two-letter format
+  },
+  organization: {
+    uuid: '<sub_in_access_token>',
+    email: 'john.doe@prestashop.com'
+  },
+}
+```
+
+#### Vue 3
+
+You need to instantiate the component in the JS part, then use it in your Vue template.
+
+::: warning
+[Vite](https://vitejs.dev/) user can get this error `Uncaught TypeError: Expected string or element selector to be passed`.
+
+In this case an alias should be added in vite.config.js: `defineViteConfig({ resolve: { alias: { vue: "vue/dist/vue.esm-bundler.js" } } })`.
+:::
+
+```html
+<template>
+  <UserPaymentMethodManagementComponent
+    :context="billingContext"
+    :onOpenModal="openBillingModal"
+  />
+
+  <PsBillingModal
+    :context="billingContext"
+    :type="modalType"
+    :on-close-modal="closeBillingModal"
+  />
+</template>
+
+<script setup lang="ts">
+import { UserPaymentMethodManagementComponent, ModalContainerComponent } from '@prestashopcorp/billing-cdc';
+
+const UserPaymentMethodManagement = await UserPaymentMethodManagementComponent.driver('vue3');
+const PsBillingModal = ModalContainerComponent.driver('vue3');
+
+const modalType = ref<string>('');
+
+const billingContext = {
+  contextType: 'user',
+  contextVersion: 2,
+  billingEnv: 'production', // could be 'preprod' depending on your authentication configurationOFF-1282/feat/standalone-address-component
+    isoCode: 'en',          // two-letter format
+  },
+  organization: {
+    uuid: '<sub_in_access_token>',
+    email: 'john.doe@prestashop.com'
+  },
+}
+
+const openBillingModal = (type: string, data?: Record<string, unknown>) => {
+  modalType.value = type;
+  billingContext = { ...billingContext, ...data };
+};
+
+const closeBillingModal = () => {
+  modalType.value = '';
+};
+
+</script>
+```
+
+#### Vanilla JS
+
+You need to instantiate the component in the JS part, then attach the component to a div with the method `render(selectorCss: string)`.
+
+```html
+<body>
+  <div id="ps-payment-method"></div>
+  <div id="ps-modal"></div>
+  <script>
+        /*********************
+        * PrestaShop Billing *
+        * *******************/
+        const onCloseModal = async (data) => {
+          // When a modal is closed, we need to update the context
+          await Promise.all([currentModal.close(), updateCustomerProps(data)]);
+        };
+
+        // Open the proper modal
+        const onOpenModal = (type, data) => {
+          currentModal = new window.psBilling.ModalContainerComponent({
+            type,
+            context: {
+              ...context,
+              ...data,
+            },
+            onCloseModal,
+          });
+          currentModal.render('#ps-modal');
+        };
+
+        const updateCustomerProps = (data) => {
+          return customer.updateProps({
+            context: {
+              ...context,
+              ...data,
+            },
+          });
+        };
+
+        let currentModal;
+
+        // Here we instantiate the subscription management component
+        const address = new window.psBilling.UserPaymentMethodManagement({
+          context,
+          onOpenModal,
+        });
+        // Render the subscription management
+        address.render('#ps-payment-method');
+  </script>
+</body>
+```

From 01a5cd0eb588cb12d2bd18306953cdfe4716449f Mon Sep 17 00:00:00 2001
From: jmcollin <jean-marie.collin@prestashop.com>
Date: Tue, 14 Jan 2025 11:08:29 +0100
Subject: [PATCH 2/3] fix: rename page

---
 .../{3-payment-method-pane => 3-payment-method}/README.md       | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)
 rename docs/src/5-prestashop-billing/100-hidden/{3-payment-method-pane => 3-payment-method}/README.md (99%)

diff --git a/docs/src/5-prestashop-billing/100-hidden/3-payment-method-pane/README.md b/docs/src/5-prestashop-billing/100-hidden/3-payment-method/README.md
similarity index 99%
rename from docs/src/5-prestashop-billing/100-hidden/3-payment-method-pane/README.md
rename to docs/src/5-prestashop-billing/100-hidden/3-payment-method/README.md
index ebb7a16..c124232 100644
--- a/docs/src/5-prestashop-billing/100-hidden/3-payment-method-pane/README.md
+++ b/docs/src/5-prestashop-billing/100-hidden/3-payment-method/README.md
@@ -4,7 +4,7 @@ title: Payment Method
 
 [[toc]]
 
-# Address
+# Payment Method
 
 ## Use case
 

From 4c342c2508b01976c0ed172a7e5eb0119a768322 Mon Sep 17 00:00:00 2001
From: jmcollin <jean-marie.collin@prestashop.com>
Date: Fri, 17 Jan 2025 15:23:58 +0100
Subject: [PATCH 3/3] fix: doc

---
 .../100-hidden/3-payment-method/README.md                   | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/docs/src/5-prestashop-billing/100-hidden/3-payment-method/README.md b/docs/src/5-prestashop-billing/100-hidden/3-payment-method/README.md
index c124232..997d238 100644
--- a/docs/src/5-prestashop-billing/100-hidden/3-payment-method/README.md
+++ b/docs/src/5-prestashop-billing/100-hidden/3-payment-method/README.md
@@ -45,7 +45,7 @@ const billingContext = {
   contextVersion: 2,
   billingEnv: 'production', // could be 'preprod' depending on your authentication configuration
   isSandbox: true,
-  accessToken: 't0K3N',     // the authentication token of your user, it should contain the scope "subscription.write"
+  accessToken: 't0K3N',
   i18n: {
     isoCode: 'en',          // two-letter format
   },
@@ -68,12 +68,13 @@ In this case an alias should be added in vite.config.js: `defineViteConfig({ res
 
 ```html
 <template>
-  <UserPaymentMethodManagementComponent
+  <UserPaymentMethodManagement
     :context="billingContext"
     :onOpenModal="openBillingModal"
   />
 
   <PsBillingModal
+    v-if="modalType !== ''
     :context="billingContext"
     :type="modalType"
     :on-close-modal="closeBillingModal"
@@ -94,6 +95,7 @@ const billingContext = {
   billingEnv: 'production', // could be 'preprod' depending on your authentication configurationOFF-1282/feat/standalone-address-component
     isoCode: 'en',          // two-letter format
   },
+   accessToken: 't0K3N',
   organization: {
     uuid: '<sub_in_access_token>',
     email: 'john.doe@prestashop.com'