ECTO-2203 - first poc to use a shopware storefronts frontend backed b…

src/Controller/LicenseController.php

@@ -1,4 +1,4 @@
 <?php
 
 declare(strict_types=1);
 
@@ -32,18 +32,20 @@
     #[Route('/api/_action/extension-store/cart/new', name: 'api.extension.create_new_cart', methods: ['POST'])]
     public function createCart(Request $request, Context $context): JsonResponse
     {
+        // the extensionId is now the productUuid and the variantId is the optionId of the variant of our extensionStore
         $extensionId = $request->request->get('extensionId');
         $variantId = $request->request->get('variantId');
 
-        if (!is_numeric($extensionId)) {
-            throw ExtensionStoreException::invalidExtensionId();
-        }
-
-        if (!is_numeric($variantId)) {
-            throw ExtensionStoreException::invalidVariantId();
-        }
+        // because we have now string UUIDs, we cannot validate them as numeric anymore
+//        if (!is_numeric($extensionId)) {
+//            throw ExtensionStoreException::invalidExtensionId();
+//        }
+//
+//        if (!is_numeric($variantId)) {
+//            throw ExtensionStoreException::invalidVariantId();
+//        }
 
-        $cart = $this->licenseService->createCart((int) $extensionId, (int) $variantId, $context);
+        $cart = $this->licenseService->createCart($extensionId, $variantId, $context);
 
         return new JsonResponse($cart);
     }

src/Resources/app/administration/package.json

@@ -30,5 +30,8 @@
     },
     "optionalDependencies": {
         "administration": "^6.x"
+    },
+    "dependencies": {
+        "@shopware-ag/meteor-admin-sdk": "^6.4.0"
     }
 }

src/Resources/app/administration/src/module/sw-extension-store/page/sw-extension-store-index/index.js

@@ -1,13 +1,15 @@
 import template from './sw-extension-store-index.html.twig';
 import './sw-extension-store-index.scss';
+import { handle } from '@shopware-ag/meteor-admin-sdk/es/channel';
 
 /**
  * @private
  */
 export default {
     template,
 
-    inject: ['extensionStoreActionService', 'shopwareExtensionService', 'feature'],
+    // we have to add the extensionStoreLicensesService for the checkout example
+    inject: ['extensionStoreActionService', 'shopwareExtensionService', 'feature', 'extensionStoreLicensesService'],
 
     props: {
         id: {
@@ -61,8 +63,43 @@
 
     created() {
         this.createdComponent();
-    },
 
+        handle('swag-extension-store-channel', async (data) => {
+            if (data.action === 'handshake') {
+                const extensions = (await this.extensionStoreActionService.getMyExtensions()).map((extension) => extension.name);
+                await this.shopwareExtensionService.checkLogin();
+                const shopwareVersion = Shopware.Context.app.config.version;
+                const language = Shopware.Context.app.fallbackLocale;
+                const isLoggedIn = Shopware.Store.get('shopwareExtensions').userInfo !== null;
+
+
+                return {
+                    shopwareVersion: shopwareVersion,
+                    owningExtensions: extensions,
+                    sessionToken: data.sessionToken,
+                    language: language,
+                    isLoggedIn: isLoggedIn,
+                    success: true,
+                };
+            }
+            if (data.action === 'routeTo') {
+                this.$router.push({ name: data.route });
+            }
+            if (data.action === 'purchase') {
+                const cartResponse = await this.extensionStoreLicensesService.newCart(
+                  data.productId,
+                  data.variantId
+                );
+
+                await this.extensionStoreLicensesService.orderCart(cartResponse.data);
+
+                return {
+                    sessionToken: data.sessionToken,
+                    success: true,
+                }
+            }
+        });
+    },
     methods: {
         createdComponent() {
             this.checkStoreUpdates();

src/Resources/app/administration/src/module/sw-extension-store/page/sw-extension-store-index/sw-extension-store-index.html.twig

@@ -1,83 +1,5 @@
 {% block sw_extension_store_index %}
-    <sw-meteor-page class="sw-extension-store-index" hide-icon>
-        {% block sw_extension_store_index_slots %}
-            {% block sw_extension_store_index_slot_search_bar %}
-                <template #search-bar>
-                    {% block sw_extension_store_index_search_bar %}
-                        <sw-search-bar
-                            :key="storeSearchKey"
-                            :initial-search="searchValue"
-                            initial-search-type="extension"
-                            :placeholder="$t('sw-extension-store.listing.placeholderSearchBar')"
-                            @search="updateSearch"
-                        />
-                    {% endblock %}
-                </template>
-            {% endblock %}
-
-            {% block sw_extension_store_index_slot_tabs %}
-                <template #page-tabs>
-                    {% block sw_extension_store_index_tabs %}
-                        {% block sw_extension_store_index_tabs_extensions_app %}
-                            <sw-tabs-item :route="{ name: 'sw.extension.store.listing.app' }" :disabled="!isAvailable">
-                                {{ $t('sw-extension-store.tabs.apps') }}
-                            </sw-tabs-item>
-                        {% endblock %}
-
-                        {% block sw_extension_store_index_tabs_extensions_theme %}
-                            <sw-tabs-item :route="{ name: 'sw.extension.store.listing.theme' }" :disabled="!isAvailable">
-                                {{ $t('sw-extension-store.tabs.themes') }}
-                            </sw-tabs-item>
-                        {% endblock %}
-                    {% endblock %}
-                </template>
-            {% endblock %}
-
-            {% block sw_extension_store_index_slot_default %}
-                <template #default>
-
-                    {% block sw_extension_store_index_loader %}
-                        <sw-loader v-if="isLoading" />
-                    {% endblock %}
-
-                    <template v-else>
-                        {% block sw_extension_store_index_content %}
-                            {% block sw_extension_store_index_content_view %}
-                                <router-view
-                                    v-if="isAvailable"
-                                    @extension-listing-errors="onExtensionListingError"
-                                />
-                            {% endblock %}
-
-                            {% block sw_extension_store_index_content_offline_warning %}
-                                <sw-extension-store-error-card
-                                    v-else-if="failReason === 'offline'"
-                                    :title="$t('sw-extension-store.offline.headline')"
-                                    variant="danger"
-                                >
-                                    {{ $t('sw-extension-store.offline.description') }}
-                                </sw-extension-store-error-card>
-                            {% endblock %}
-
-                            {% block sw_extension_store_index_content_update_warning %}
-                                <sw-extension-store-update-warning v-else-if="failReason === 'outdated'" />
-                            {% endblock %}
-
-                            {% block sw_extension_store_index_content_listing_error %}
-                                <sw-extension-store-error-card
-                                    v-else
-                                    :title="listingError?.title"
-                                    variant="danger"
-                                >
-                                    <template v-if="listingError">
-                                        {{ listingError.message }}
-                                    </template>
-                                </sw-extension-store-error-card>
-                            {% endblock %}
-                        {% endblock %}
-                    </template>
-                </template>
-            {% endblock %}
-        {% endblock %}
-    </sw-meteor-page>
+    {#    we use shopwares iframe renderer component to render the iframe on the index page, currently set to localhost for development#}
+    {#    here is the entrypoint for our Storefront#}
+    <sw-iframe-renderer style="height: 100%;" src="http://localhost:3000" locationId="" />
 {% endblock %}

src/Resources/app/administration/src/module/sw-extension-store/page/sw-extension-store-listing/sw-extension-store-listing.html.twig

@@ -1,5 +1,5 @@
-{% block sw_extension_store_listing %}
-    <div class="sw-extension-store-listing">
+{# {% block sw_extension_store_listing %} #}
+    {# <div class="sw-extension-store-listing">
         {% block sw_extension_store_listing_loader %}
             <sw-loader v-if="isLoading" />
         {% endblock %}
@@ -24,5 +24,5 @@
         {% block sw_extension_store_listing_pagination %}
             <sw-pagination v-bind="{ total, page, limit }" @page-change="setPage" />
         {% endblock %}
-    </div>
-{% endblock %}
+    </div> #}
+{# {% endblock %} #}

src/Services/LicenseService.php

@@ -22,7 +22,9 @@ public function __construct(StoreClient $client)
         $this->client = $client;
     }
 
-    public function createCart(int $extensionId, int $variantId, Context $context): CartStruct
+    // extensionId is now the productUuid and variantId is the optionId of the variant of our extensionStore
+    // uuids are strings, so we changed the type from int to int|string
+    public function createCart(int|string $extensionId, int|string $variantId, Context $context): CartStruct
     {
         $cart = $this->client->createCart($extensionId, $variantId, $context);
 

src/Services/StoreClient.php

@@ -1,4 +1,4 @@
 <?php
 
 declare(strict_types=1);
 
@@ -140,7 +140,9 @@
         return json_decode((string) $response->getBody(), true);
     }
 
-    public function createCart(int $extensionId, int $variantId, Context $context): CartStruct
+    // also here typing is changed regarding the uuid usage
+    // extensionId is now the productUuid and variantId is the optionId of the variant of our extensionStore
+    public function createCart(int|string $extensionId, int|string $variantId, Context $context): CartStruct
     {
         try {
             $response = $this->client->request(
@@ -156,6 +158,8 @@
                                 'variantId' => $variantId,
                             ],
                         ],
+                        // we add a mode so that the SBP API can handle the different use case with the uuids from the extension store later on
+                        'mode' => 'newStore'
                     ],
                 ],
             );