Updates GraphQL for Payment Services with new PDP workflows and details. (#484)

* updated pages as per typo

* Updated TOC

* fixed title

* Added workflows for pdp

* Fix note

* Updated toc

* Apply suggestions from code review

Co-authored-by: Kevin Harper <keharper@users.noreply.github.com>

* Update src/pages/graphql/payment-services-extension/workflows/cart-pdp.md

Co-authored-by: Kevin Harper <keharper@users.noreply.github.com>

* Apply suggestions from code review

* Update src/pages/graphql/payment-services-extension/workflows/cart-pdp.md

* Update src/pages/graphql/payment-services-extension/workflows/cart-pdp.md

* Update src/pages/graphql/payment-services-extension/workflows/cart-pdp.md

* Update src/pages/graphql/payment-services-extension/workflows/cart-pdp.md

* Apply suggestions from code review

Co-authored-by: Kevin Harper <keharper@users.noreply.github.com>

---------

Co-authored-by: Kevin Harper <keharper@users.noreply.github.com>

Author: danidelcar

src/data/navigation/sections/graphql.js

@@ -1371,6 +1371,10 @@ module.exports = [
                 title: "Minicart",
                 path: "/graphql/payment-services-extension/workflows/minicart.md",
               },
+              {
+                title: "Add product to a new cart on a Product Details Page",
+                path: "/graphql/payment-services-extension/workflows/cart-pdp.md",
+              },
               {
                 title: "Vault a card during a checkout authorization",
                 path: "/graphql/payment-services-extension/workflows/vault-with-purchase.md",
@@ -1411,6 +1415,10 @@ module.exports = [
             title: "Mutations",
             path: "/graphql/payment-services-extension/mutations/",
             pages: [
+              {
+                title: "addProductsToNewCart",
+                path: "/graphql/payment-services-extension/mutations/add-products-new-cart/",
+              },
               {
                 title: "createPaymentOrder",
                 path: "/graphql/payment-services-extension/mutations/create-payment-order/",
@@ -1423,6 +1431,10 @@ module.exports = [
                 title: "createVaultCardSetupToken",
                 path: "/graphql/payment-services-extension/mutations/create-vault-card-setup-token/",
               },
+              {
+                title: "setCartAsInactive",
+                path: "/graphql/payment-services-extension/mutations/set-cart-inactive/",
+              },
               {
                 title: "syncPaymentOrder",
                 path: "/graphql/payment-services-extension/mutations/sync-payment-order/",

src/pages/_images/graphql/payment-services-pdp-cartinactive.svg

@@ -11,9 +11,7 @@ This mutation is available only if you have installed [Payment Services for Adob
 
 The `addProductsToNewCart` mutation always creates a new cart for the shopper then adds the specified products to that cart. This contrasts with the `addProductsToCart` mutation, which requires you to specify an existing cart ID as input.
 
->[!NOTE]
->
-> For a logged-in customer, the customer token is passed in the [Authorization header](../../usage/authorization-tokens.md#customer-tokens).
+For a logged-in customer, the customer token is passed in the [Authorization header](../../usage/authorization-tokens.md#customer-tokens).
 
 ## Use case: smart button on the Product Details Page (PDP)
 

src/pages/_images/graphql/payment-services-pdp.svg

@@ -22,7 +22,7 @@ If you have installed [Payment Services for Adobe Commerce](https://commercemark
 
 * [`createVaultCardPaymentToken`](../mutations/create-vault-card-payment-token.md)
 
-If you have installed [Payment Services for Adobe Commerce](https://commercemarketplace.adobe.com/magento-payment-services.html) 2.12.0 or higher, you can use the following mutations to manage your carts in the Product page:
+If you have installed [Payment Services for Adobe Commerce](https://commercemarketplace.adobe.com/magento-payment-services.html) 2.12.0 or higher, you can use the following mutations to manage your carts in the Product Details Page (PDP):
 
 * [`addProductsToNewCart`](../mutations/add-products-new-cart.md)
 

src/pages/graphql/payment-services-extension/mutations/add-products-new-cart.md

@@ -0,0 +1,67 @@
+---
+title: Add product to a new cart on a Product Details Page
+description: Learn how Adobe Commerce uses GraphQL to create a new cart in the Product Details Page with smart buttons (Apple Pay).
+keywords:
+  - GraphQL
+  - Payments
+---
+
+# Create a new cart in the Product Details Page workflows
+
+<InlineAlert variant="info" slots="text" />
+
+This workflow is available only with Apple Pay if you have installed [Payment Services for Adobe Commerce](https://commercemarketplace.adobe.com/magento-payment-services.html) 2.12.0 or higher.
+
+These steps describe the flow of requests and responses with the [Payment Services](https://experienceleague.adobe.com/docs/commerce-merchant-services/payment-services/guide-overview.html) solution enabled for guests and logged-in customers. This workflow is required to [create a new cart](../mutations/add-products-new-cart.md) in the Product Details Page (PDP) with smart buttons.
+
+## Add product to a new cart in a PDP workflow
+
+These steps describe the use case when a shopper adds a product to the cart on a PDP.
+
+![Payment Services sequence diagram](../../../_images/graphql/payment-services-pdp.svg)
+
+1. Run the [`getPaymentConfig`](../../payment-services-extension/queries/get-payment-config.md) query to fetch the payment configuration needed to render details about PayPal components, such as hosted fields, smart buttons, and Apple Pay.
+
+1. Adobe Commerce returns payment configuration information.
+
+1. Run [`addProductsToNewCart`](../../payment-services-extension/mutations/add-products-new-cart.md) to create a new cart and add the item.
+
+1. Commerce returns a `cart` object, which includes the cart `id` field.
+
+1. Run [`createPaymentOrder`](../../payment-services-extension/mutations/create-payment-order.md) to begin the authorization process.
+
+1. Commerce forwards the request to PayPal.
+
+  If there is an error during the payment process, or the shopper cancels the payment process on the PDP, run [`setCartAsInactive`](../../payment-services-extension/mutations/set-cart-inactive.md) to set the corresponding `cartId` as inactive and to avoid having multiple active carts for logged-in customers.
+
+1. PayPal returns an `id` value.
+
+1. Adobe Commerce generates a `order_id` and forwards the value in the `mp_order_id` field and the PayPal response in the `id` field.
+
+1.  Run the [`placeOrder`](../../schema/cart/mutations/place-order.md) mutation.
+
+1.  Commerce sends an authorization request to PayPal.
+
+1.  PayPal returns the result to Commerce.
+
+1.  Commerce creates an order.
+
+## Payment cancellation while on a PDP workflow
+
+These steps describe the use case when a shopper cancels the payment process on the PDP.
+
+![Payment Services sequence diagram](../../../_images/graphql/payment-services-pdp-cartinactive.svg)
+
+1. Run the [`getPaymentConfig`](../../payment-services-extension/queries/get-payment-config.md) query to fetch the payment configuration needed to render details about PayPal components, such as hosted fields, smart buttons, and Apple Pay.
+
+1. Adobe Commerce returns payment configuration information.
+
+1. Run [`addProductsToNewCart`](../../payment-services-extension/mutations/add-products-new-cart.md) to create a new cart and add the item.
+
+1. Commerce returns a `cart` object, which includes the cart `id` field.
+
+1. Run [`setCartAsInactive`](../../payment-services-extension/mutations/set-cart-inactive.md) to set a specific `cartId` as inactive.
+
+1. Commerce returns a confirmation that a specific `cartId` is inactive.
+
+1. If the shopper clicks the smart button again, `addProductsToNewCart` mutation runs once more to return a new `cart` object.

src/pages/graphql/payment-services-extension/mutations/index.md

@@ -17,3 +17,7 @@ If you have installed [Payment Services for Adobe Commerce](https://commercemark
 * [Minicart](../workflows/minicart.md)---This workflow describes the additional flow of requests and responses required to place an order after adding a product to your cart with the Payment Services extension enabled.
 
 * [Checkout using a vaulted card](../workflows/vaulted-card.md)---This workflow describes a checkout authorization using a vaulted card.
+
+If you have installed [Payment Services for Adobe Commerce](https://commercemarketplace.adobe.com/magento-payment-services.html) 2.12.0 or higher, check the following workflows:
+
+* [Smart buttons in the Product Details Page (PDP)](../workflows/cart-pdp.md)---This workflow describes the flow of requests and responses, in Payment Services for guests and logged-in customers, required to create a new cart in the Product Details Page (PDP) with smart buttons.