Merge pull request #2806 from spryker/gifs-to-mp4

ACP docs + margin fixes

css/pages/_content.scss

@@ -21,9 +21,11 @@
 
     h2, h3, h4, h5, h6 {
         margin-top: 40px;
-        margin-bottom: -4px;
+        margin-bottom: -10px;
     }
 
+
+
     h1 {
         font-size: 38px;
         line-height: 1.369;

docs/dg/dev/acp/app-composition-platform.md

@@ -46,14 +46,10 @@ To run ACP Catalog with an earlier version, install the `spryker/app-catalog-gui
 
 ## Register for ACP
 
-To use ACP apps, you need to register your project with ACP. The registration process prepares your project for seamless communication with the third-party apps provided via the ACP. To register your project, follow the steps:
+To use ACP apps, you need to register your project with ACP. The registration process prepares your project for seamless communication with the third-party apps. To register your project, follow the steps:
 
-1. [Project update to include SCCOS dependencies](/docs/dg/dev/acp/install-prerequisites-and-enable-acp.html).
+1. [Install prerequisites and enable ACP](/docs/dg/dev/acp/install-prerequisites-and-enable-acp.html).
 
-2. Infrastructure configuration: This step is handled by Spryker once the SCCOS dependencies are in place on the project. Once step 1 is completed, contact us via the [support portal](https://support.spryker.com/s/).
+2. To set up infrastructure, [contact us](https://support.spryker.com/s/).
 
-{% info_block infoBox "" %}
-
-Our team will guide you through the registration process if needed. If you have any questions, [send us a message](https://support.spryker.com/s/).
-
-{% endinfo_block %}
+If you need help with the registration process or have any questions, [send us a message](https://support.spryker.com/s/).

docs/dg/dev/acp/install-prerequisites-and-enable-acp.md

@@ -22,49 +22,38 @@ Your project is running in Spryker Cloud.
 
 If your project is of version [202311.0](/docs/scos/user/intro-to-spryker/releases/release-notes/release-notes-202311.0/release-notes-202311.0.html) or later, proceed to [Register your project with ACP](#register-your-project-with-acp).
 
-## Install prerequisites for projects version 202211.0
 
+## Install prerequisites for projects version 202211.0
 
-### Dependency 1: Module updates for ACP
+To install the prerequisites, update modules and set up the configuration as described in the following sections.
 
-To get your project ACP-ready, make sure that your project modules are updated to the required versions.
 
-#### ACP modules
+### Update modules
 
-ACP catalog is shipped by default with Spryker since version [202311.0](/docs/scos/user/intro-to-spryker/releases/release-notes/release-notes-202311.0/release-notes-202311.0.html). If you're running an earlier version, update the following modules to specified or later versions:
+Update the following modules to specified or later versions:
 
 * `spryker/app-catalog-gui: ^1.4.1`
 * `spryker/message-broker: ^1.11.0`
 * `spryker/message-broker-aws: ^1.6.0`
 * `spryker/session: ^4.15.1`
 * `spryker/oauth-client: ^1.4.0`
 
-#### ACP app modules
-
-{% info_block warningBox "Apps- and PBC-specific modules" %}
-
-Depending on the specific ACP apps you intend to use through ACP, you need to add or update the modules for each respective app as explained in the corresponding app guide.
-
-{% endinfo_block %}
-
-We're  continuously updating ACP apps. Even though you don't need to install app updates, you may need to update modules that are related to an app to take full advantage of it.
-
-For each app you want to use, make sure you have all the related modules installed. The list of modules is provided in the installation guide for each app.
 
-### Dependency 2: Code changes in SCCOS
+{% info_block infoBox "ACP app modules" %}
 
-{% info_block infoBox "This step can be omitted for Product version later than 202311.0" %}
+When installing an ACP app, make sure to follow the provided guide to install and update the modules required by the app.
 
-If your version is based on product release [202311.0](/docs/scos/user/intro-to-spryker/releases/release-notes/release-notes-202311.0/release-notes-202311.0.html) or later, you can skip this section.
+When a new version of app is released, you don't need to update it. However, you may need to update modules that are related to an app to take full advantage of it.
 
 {% endinfo_block %}
 
-To activate ACP catalog in the Back Office, do the following:
+
+### Add plugins and configuration
 
 1. Define the configuration and add plugins:
 
 <details>
-<summary>config/Shared/config_default.php</summary>
+  <summary>config/Shared/config_default.php</summary>
 
 ```php
 use Spryker\Shared\AppCatalogGui\AppCatalogGuiConstants;
@@ -131,6 +120,7 @@ $config[AppCatalogGuiConstants::OAUTH_PROVIDER_NAME] = OauthAuth0Config::PROVIDE
 $config[AppCatalogGuiConstants::OAUTH_GRANT_TYPE] = OauthAuth0Config::GRANT_TYPE_CLIENT_CREDENTIALS;
 $config[AppCatalogGuiConstants::OAUTH_OPTION_AUDIENCE] = 'aop-atrs';
 ```
+
 </details>
 
 2. In the `navigation.xml` file, add the navigation item:
@@ -150,14 +140,14 @@ $config[AppCatalogGuiConstants::OAUTH_OPTION_AUDIENCE] = 'aop-atrs';
 
 3. In the `MessageBrokerDependencyProvider.php` file, enable the following module plugins:
 
-{% info_block infoBox "Deprecated plugins" %}
+{% info_block infoBox "Disable deprecated plugins" %}
 
 Make sure that no deprecated plugins are enabled. Ideally, the content of each of the methods listed below should exactly match the provided example.
 
 {% endinfo_block %}
 
 <details>
-<summary>src/Pyz/Zed/MessageBroker/MessageBrokerDependencyProvider.php</summary>
+  <summary>src/Pyz/Zed/MessageBroker/MessageBrokerDependencyProvider.php</summary>
 
 ```php
 <?php
@@ -227,12 +217,13 @@ class MessageBrokerDependencyProvider extends SprykerMessageBrokerDependencyProv
     }
 }
 ```
+
 </details>
 
 4. In `MessageBrokerAwsDependencyProvider.php`, enable the following module plugins:
 
 <details>
-<summary>src/Pyz/Zed/MessageBrokerAws/MessageBrokerAwsDependencyProvider.php</summary>
+  <summary>src/Pyz/Zed/MessageBrokerAws/MessageBrokerAwsDependencyProvider.php</summary>
 
 ```php
 <?php
@@ -262,18 +253,19 @@ class MessageBrokerAwsDependencyProvider extends SprykerMessageBrokerAwsDependen
     }
 }
 ```
+
 </details>
 
 5. In `OauthClientDependencyProvider.php`, enable the following module plugins:
 
-{% info_block infoBox "Deprecated plugins" %}
+{% info_block infoBox "Disable deprecated plugins" %}
 
 Make sure that no deprecated plugins are enabled. Ideally, the content of each of the methods listed below should exactly match the provided example.
 
 {% endinfo_block %}
 
 <details>
-<summary>src/Pyz/Zed/OauthClient/OauthClientDependencyProvider.php</summary>
+  <summary>src/Pyz/Zed/OauthClient/OauthClientDependencyProvider.php</summary>
 
 ```php
 <?php
@@ -314,6 +306,7 @@ class OauthClientDependencyProvider extends SprykerOauthClientDependencyProvider
     }
 }
 ```
+
 </details>
 
 
@@ -326,17 +319,13 @@ We'll need to analyze your project and provide you with specific instructions, [
 
 Once redeployed with the added changes, your environment is ACP-ready.
 
-Now, you need to make your project ACP-enabled. In this step, we enable your project to communicate with ACP by connect your environment with ACP App-Tenant-Registry-Service and Event Platform.
-
-To get your project ACP-enabled, [contact support](https://spryker.com/support/).
+To get your project ACP-enabled, [contact support](https://spryker.com/support/). In this step, we enable your project to communicate with ACP by connect your environment with ACP App-Tenant-Registry-Service and Event Platform.
 
-Once all the steps of the ACP-enablement process are completed, the ACP catalog appears in the Back Office:
+Once all the steps of the ACP-enablement process are completed, the ACP catalog is displayed in the Back Office:
 
 ![acp-catalog](https://spryker.s3.eu-central-1.amazonaws.com/docs/aop/app-orchestration-platform-overview/aop-catalog.png)
 
 
-{% info_block infoBox "Using ACP Apps" %}
+## Next steps
 
-After getting your project enabled and registered for ACP, there may be specific requirements needed for different ACP apps. Check the App page more for information.
-
-{% endinfo_block %}
+Once you're ready to install ACP apps, make sure to check the installation guides and the requirements on the page of each app.

docs/dg/dev/acp/receive-acp-messages.md

@@ -1,26 +1,29 @@
 ---
-title: Receive ACP Messages 
+title: Receive ACP Messages
 description: Find out how you can receive ACP messages in SCCOS.
 template: howto-guide-template
 last_updated: Jan 09, 2024
 redirect_from:
 - /docs/acp/user/receive-acp-messages.html
 ---
 
-This document describes how to receive ACP messages in SCCOS.
+Your Spryker project can receive ACP messages using the following commands:
 
-To receive messages from all the channels, run the following command:
+Receive messages from all the channels:
 ```bash
 console message-broker:consume
 ```
 
-To receive messages from a specific channel, run the following command:
+Receive messages from a specific channel:
 
 ```bash
 console message-broker:consume {channel-name} # {channel-name} is the name of the channel, like `asset-commands`.
 ```
 
-This command must be executed periodically. To set up this periodic execution, configure Jenkins in `config/Zed/cronjobs/jenkins.php`:
+
+## Receiving messages automatically
+
+The preceding command must be executed periodically. To set up a periodic execution, configure Jenkins in `config/Zed/cronjobs/jenkins.php`:
 
 ```php
 $jobs[] = [
@@ -30,4 +33,4 @@ $jobs[] = [
     'enable' => true,
     'stores' => $allStores,
 ];
-```
+```

docs/pbc/all/cart-and-checkout/202404.0/base-shop/feature-overviews/multiple-carts-feature-overview.md

@@ -99,18 +99,40 @@ On the storefront, company users can perform the following actions by using the
 <details>
 <summary>Create a cart</summary>
 
-![Create a cart](https://spryker.s3.eu-central-1.amazonaws.com/docs/Features/Shopping+Cart/Cart/Multiple+Carts+per+User+Feature+Overview/create-a-cart.gif)
+<figure class="video_container">
+    <video width="100%" height="auto" controls>
+    <source src="https://spryker.s3.eu-central-1.amazonaws.com/docs/pbc/all/cart-and-checkout/base-shop/feature-overviews/multiple-carts-feature-overview.md/create-a-cart.mp4" type="video/mp4">
+  </video>
+</figure>
+
 </details>
 
 <details>
 <summary>Edit and delete a cart</summary>
 
-![Edit and delete a cart](https://spryker.s3.eu-central-1.amazonaws.com/docs/Features/Shopping+Cart/Cart/Multiple+Carts+per+User+Feature+Overview/manage-a-shopping-cart.gif)
+
+<figure class="video_container">
+    <video width="100%" height="auto" controls>
+    <source src="https://spryker.s3.eu-central-1.amazonaws.com/docs/pbc/all/cart-and-checkout/base-shop/feature-overviews/multiple-carts-feature-overview.md/manage-a-shopping-cart.mp4" type="video/mp4">
+  </video>
+</figure>
+
+
 </details>
+
+
 <details>
 <summary>Dismiss and duplicate a cart</summary>
 
-![Dismiss and duplicate a cart](https://spryker.s3.eu-central-1.amazonaws.com/docs/Features/Shopping+Cart/Cart/Multiple+Carts+per+User+Feature+Overview/dismiss-and-duplicate-a-shopping-cart.gif)
+
+
+<figure class="video_container">
+    <video width="100%" height="auto" controls>
+    <source src="https://spryker.s3.eu-central-1.amazonaws.com/docs/pbc/all/cart-and-checkout/base-shop/feature-overviews/multiple-carts-feature-overview.md/dismiss-and-duplicate-a-shopping-cart.mp4" type="video/mp4">
+  </video>
+</figure>
+
+
 </details>
 
 * To share a cart with external and internal users by a link, see [Unique URL per Cart for Easy Sharing feature overview](/docs/pbc/all/cart-and-checkout/{{site.version}}/base-shop/feature-overviews/persistent-cart-sharing-feature-overview.html).

docs/pbc/all/content-management-system/202404.0/base-shop/manage-in-the-back-office/content-items/create-file-list-content-items.md

@@ -70,8 +70,19 @@ You can view how it looks like on the store website:
 
 * **B2C**
     <br>Template used: File icon and size
-![File list content item widget B2C](https://spryker.s3.eu-central-1.amazonaws.com/docs/User+Guides/Back+Office+User+Guides/Content+Management+System/Content+Item+Widgets/Content+Item+Widgets+types%3A+Reference+Information/file-list-yves-b2c.gif)
+
+<figure class="video_container">
+    <video width="100%" height="auto" controls>
+    <source src="https://spryker.s3.eu-central-1.amazonaws.com/docs/pbc/all/content-management-system/base-shop/manage-in-the-back-office/content-items/create-file-list-content-items.md/file-list-yves-b2c.mp4" type="video/mp4">
+  </video>
+</figure>
+
 
 * **B2B**
     <br>Template used: Text Link
-![File list content item widget B2B](https://spryker.s3.eu-central-1.amazonaws.com/docs/User+Guides/Back+Office+User+Guides/Content+Management+System/Content+Item+Widgets/Content+Item+Widgets+types%3A+Reference+Information/file-list-yves-b2b.gif)
+
+<figure class="video_container">
+    <video width="100%" height="auto" controls>
+    <source src="https://spryker.s3.eu-central-1.amazonaws.com/docs/pbc/all/content-management-system/base-shop/manage-in-the-back-office/content-items/create-file-list-content-items.md/file-list-yves-b2b.mp4" type="video/mp4">
+  </video>
+</figure>

docs/pbc/all/order-management-system/202404.0/base-shop/order-management-feature-overview/order-cancellation-overview.md

@@ -58,7 +58,12 @@ To learn how a Back Office user can skip timeout or cancel an order by changing
 ## Order cancellation on the Storefront
 This is how the Order Cancellation feature works on the Spryker Demo Shop Storefront:
 
-![image](https://spryker.s3.eu-central-1.amazonaws.com/docs/pbc/all/order-management-system/base-shop/order-management-feature-overview/order-cancellation-overview.md/shop-guide-cancelling-orders.mp4)
+<figure class="video_container">
+    <video width="100%" height="auto" controls>
+    <source src="https://spryker.s3.eu-central-1.amazonaws.com/docs/pbc/all/order-management-system/base-shop/order-management-feature-overview/order-cancellation-overview.md/shop-guide-cancelling-orders.mp4" type="video/mp4">
+  </video>
+</figure>
+
 
 ## Related Business User documents
 

docs/pbc/all/product-information-management/202404.0/marketplace/marketplace-product-feature-overview.md

@@ -52,7 +52,11 @@ The marketplace product is also displayed with the **Sold By** field defining th
 
 On the **Quick Order** page, customers can add products to cart by entering their names or SKUs. Also, in the **Merchants** drop-down, they can specify merchants who they want to buy from. If customers select specific merchants in the **Merchants** drop-down, only products of those merchants are available for selection when they enter **SKU or Name** of the product. Buyers who select the **All Merchants** option can add products from all merchants. If customers change the merchant of the already selected item, some values of its fields may change. For example, the prices of different merchants may vary, so when you change a merchant, the **Price** value may change as well. For information about the Quick Add to Cart feature, see [Quick Add to Cart feature overview](/docs/pbc/all/cart-and-checkout/{{page.version}}/base-shop/feature-overviews/quick-add-to-cart-feature-overview.html)
 
-![quick-order-from-quick-order-page](https://spryker.s3.eu-central-1.amazonaws.com/docs/Marketplace/user+guides/Features/Marketplace+Product+Offer/quick-order-from-quick-order-page.gif)
+<figure class="video_container">
+    <video width="100%" height="auto" controls>
+    <source src="https://spryker.s3.eu-central-1.amazonaws.com/docs/pbc/all/product-information-management/marketplace/marketplace-product-feature-overview.md/quick-order-from-quick-order-page.mp4" type="video/mp4">
+  </video>
+</figure>
 
 ### Marketplace product on the cart page
 
@@ -64,7 +68,12 @@ Note that the drop-down with merchants is not visible until the product is selec
 
 {% endinfo_block %}
 
-![quick-add-to-cart-from-cart-page](https://spryker.s3.eu-central-1.amazonaws.com/docs/Marketplace/user+guides/Features/Marketplace+Product+Offer/quick-add-to-cart-from-cart-page.gif)
+
+<figure class="video_container">
+    <video width="100%" height="auto" controls>
+    <source src="https://spryker.s3.eu-central-1.amazonaws.com/docs/pbc/all/product-information-management/marketplace/marketplace-product-feature-overview.md/quick-add-to-cart-from-cart-page.mp4" type="video/mp4">
+  </video>
+</figure>
 
 ### Marketplace product on the shopping list page
 
@@ -76,23 +85,35 @@ Note that the drop-down with merchants is not visible until the product is selec
 
 {% endinfo_block %}
 
-![quick-add-to-cart-from-shopping-list-page](https://spryker.s3.eu-central-1.amazonaws.com/docs/Marketplace/user+guides/Features/Marketplace+Product+Offer/quick-add-to-cart-from-shopping-list-page.gif)
+
+<figure class="video_container">
+    <video width="100%" height="auto" controls>
+    <source src="https://spryker.s3.eu-central-1.amazonaws.com/docs/pbc/all/product-information-management/marketplace/marketplace-product-feature-overview.md/quick-add-to-cart-from-shopping-list-page.mp4" type="video/mp4">
+  </video>
+</figure>
 
 
 ### Searching and filtering marketplace products
 
 When the merchant name is entered in the catalog search, not only the offers but also the products belonging to this merchant are displayed. By selecting a merchant name in the filter, products from this merchant are also displayed.
 
-![Search for marketplace products](https://spryker.s3.eu-central-1.amazonaws.com/docs/Marketplace/user+guides/Features/Marketplace+product/search-for-products-by-name-and-sku.gif)
-
+<figure class="video_container">
+    <video width="100%" height="auto" controls>
+    <source src="https://spryker.s3.eu-central-1.amazonaws.com/docs/pbc/all/product-information-management/marketplace/marketplace-product-feature-overview.md/search-for-products-by-name-and-sku.mp4" type="video/mp4">
+  </video>
+</figure>
 
 ## Marketplace products in the Back Office
 
 Before new marketplace products become visible on the Storefront, they must be [activated either by the merchant](/docs/pbc/all/product-information-management/{{page.version}}/marketplace/manage-in-the-merchant-portal/concrete-products/manage-marketplace-concrete-products.html#activating-and-deactivating-a-concrete-product) in the Merchant Portal or [by the Marketplace administrator in the Back Office](/docs/pbc/all/product-information-management/{{page.version}}/marketplace/manage-in-the-back-office/products/manage-products.html).
 
 A Marketplace administrator can filter the products belonging to certain merchants in the Back Office.
 
-![merchants-switcher-on-products](https://spryker.s3.eu-central-1.amazonaws.com/docs/Marketplace/user+guides/Features/Marketplace+product/filter-merchant-productsby-merchant-back-office.gif)
+<figure class="video_container">
+    <video width="100%" height="auto" controls>
+    <source src="https://spryker.s3.eu-central-1.amazonaws.com/docs/pbc/all/product-information-management/marketplace/marketplace-product-feature-overview.md/filter-merchant-productsby-merchant-back-office.mp4" type="video/mp4">
+  </video>
+</figure>
 
 Also, Marketplace administrators can edit products, if needed, and create products when acting as the [main merchant](/docs/pbc/all/merchant-management/{{page.version}}/marketplace/marketplace-merchant-feature-overview/main-merchant.html).