refactor: improve ui/ux

src/Resources/app/administration/src/module/swag-migration/component/card/index.ts

@@ -5,5 +5,4 @@
 Shopware.Component.register('swag-migration-shop-information', () => import('./swag-migration-shop-information'));
 Shopware.Component.register('swag-migration-premapping', () => import('./swag-migration-premapping'));
 Shopware.Component.register('swag-migration-progress-bar', () => import('./swag-migration-progress-bar'));
-Shopware.Component.register('swag-migration-assistant', () => import('./swag-migration-assistant'));
 Shopware.Component.register('swag-migration-confirm-warning', () => import('./swag-migration-confirm-warning'));

src/Resources/app/administration/src/module/swag-migration/component/card/swag-migration-confirm-warning/index.ts

@@ -2,43 +2,16 @@ import template from './swag-migration-confirm-warning.html.twig';
 import './swag-migration-confirm-warning.scss';
 import { MIGRATION_STORE_ID } from '../../../store/migration.store';
 
-const { Store } = Shopware;
 const { mapState } = Shopware.Component.getComponentHelper();
 
-/**
- * @private
- */
-export interface SwagMigrationConfirmWarningData {
-    isCurrencyChecked: boolean;
-    isLanguageChecked: boolean;
-}
-
 /**
  * @private
  * @sw-package fundamentals@after-sales
  */
 export default Shopware.Component.wrapComponentConfig({
     template,
 
-    data(): SwagMigrationConfirmWarningData {
-        return {
-            isCurrencyChecked: false,
-            isLanguageChecked: false,
-        };
-    },
-
     computed: {
-        ...mapState(
-            () => Store.get(MIGRATION_STORE_ID),
-            [
-                'environmentInformation',
-            ],
-        ),
-
-        hasDifferentCurrency() {
-            return this.sourceSystemCurrency !== this.targetSystemCurrency;
-        },
-
         sourceSystemCurrency() {
             return this.environmentInformation.sourceSystemCurrency;
         },
@@ -47,10 +20,6 @@ export default Shopware.Component.wrapComponentConfig({
             return this.environmentInformation.targetSystemCurrency;
         },
 
-        hasDifferentLanguage() {
-            return this.sourceSystemLanguage !== this.targetSystemLanguage;
-        },
-
         sourceSystemLanguage() {
             return this.environmentInformation.sourceSystemLocale;
         },
@@ -59,25 +28,13 @@ export default Shopware.Component.wrapComponentConfig({
             return this.environmentInformation.targetSystemLocale;
         },
 
-        isContinuable() {
-            return (
-                (!this.hasDifferentCurrency || this.isCurrencyChecked) &&
-                (!this.hasDifferentLanguage || this.isLanguageChecked)
-            );
-        },
-    },
-
-    created() {
-        this.createdComponent();
-    },
-
-    methods: {
-        createdComponent() {
-            this.onCheckboxValueChanged();
-        },
-
-        onCheckboxValueChanged() {
-            Store.get(MIGRATION_STORE_ID).setWarningConfirmed(this.isContinuable);
-        },
+        ...mapState(
+            () => Shopware.Store.get(MIGRATION_STORE_ID),
+            [
+                'environmentInformation',
+                'hasCurrencyMismatch',
+                'hasLanguageMismatch',
+            ],
+        ),
     },
 });

src/Resources/app/administration/src/module/swag-migration/component/card/swag-migration-confirm-warning/swag-migration-confirm-warning.html.twig

@@ -1,108 +1,21 @@
 {% block swag_migration_confirm_warning %}
     <div class="swag-migration-confirm-warning">
-
-        {% block swag_migration_confirm_warning_card %}
-            <mt-card
-                v-if="hasDifferentCurrency"
-                class="swag-migration-confirm-warning__card"
-                position-identifier="swag-migration-confirm-warning__card"
-            >
-
-                {% block swag_migration_confirm_warning_bubble %}
-                    <div class="swag-migration-confirm-warning__bubble">
-                        <mt-icon class="swag-migration-confirm-warning__bubble-icon"
-                                 name="regular-exclamation-triangle"
-                                 size="36px"
-                                 decorative />
-                    </div>
-                {% endblock %}
-
-                {% block swag_migration_confirm_warning_title %}
-                    <h5 class="swag-migration-confirm-warning__title">
-                        {{ $tc('swag-migration.index.confirmWarningCard.currencyMismatch.title') }}
-                    </h5>
-                {% endblock %}
-
-                {% block swag_migration_confirm_warning_text %}
-                    <p class="swag-migration-confirm-warning__text">
-                        {{ $tc('swag-migration.index.confirmWarningCard.currencyMismatch.text', { sourceSystemCurrency, targetSystemCurrency }, 0) }}
-                    </p>
-                {% endblock %}
-
-                {% block swag_migration_confirm_warning_alert %}
-                    <mt-banner
-                        variant="critical"
-                        class="swag-migration-confirm-warning__alert"
-                    >
-                        {{ $tc('swag-migration.index.confirmWarningCard.currencyMismatch.info') }}
-                    </mt-banner>
-                {% endblock %}
-
-                {% block swag_migration_confirm_warning_question %}
-                    <p class="swag-migration-confirm-warning__question">
-                        {{ $tc('swag-migration.index.confirmWarningCard.currencyMismatch.question', { targetSystemCurrency }, 0) }}
-                    </p>
-                {% endblock %}
-
-                {% block swag_migration_confirm_warning_checkbox %}
-                    <mt-checkbox v-model:checked="isCurrencyChecked"
-                                 class="swag-migration-confirm-warning__checkbox"
-                                 :label="$tc('swag-migration.index.confirmWarningCard.currencyMismatch.checkboxLabel')"
-                                 @update:checked="onCheckboxValueChanged" />
-                {% endblock %}
-            </mt-card>
-        {% endblock %}
-
-        {% block swag_migration_confirm_language_warning_card %}
-            <mt-card
-                v-if="hasDifferentLanguage"
-                class="swag-migration-confirm-warning__card"
-                position-identifier="swag-migration-confirm-warning__card"
-            >
-
-                {% block swag_migration_confirm_language_warning_bubble %}
-                    <div class="swag-migration-confirm-warning__bubble">
-                        <mt-icon class="swag-migration-confirm-warning__bubble-icon"
-                                 name="regular-exclamation-triangle"
-                                 size="36px"
-                                 decorative />
-                    </div>
-                {% endblock %}
-
-                {% block swag_migration_confirm_language_warning_title %}
-                    <h5 class="swag-migration-confirm-warning__title">
-                        {{ $tc('swag-migration.index.confirmWarningCard.languageMismatch.title') }}
-                    </h5>
-                {% endblock %}
-
-                {% block swag_migration_confirm_language_warning_text %}
-                    <p class="swag-migration-confirm-warning__text">
-                        {{ $tc('swag-migration.index.confirmWarningCard.languageMismatch.text', { sourceSystemLanguage, targetSystemLanguage }, 0) }}
-                    </p>
-                {% endblock %}
-
-                {% block swag_migration_confirm_language_warning_alert %}
-                    <mt-banner
-                        variant="critical"
-                        class="swag-migration-confirm-warning__alert"
-                    >
-                        {{ $tc('swag-migration.index.confirmWarningCard.languageMismatch.info') }}
-                    </mt-banner>
-                {% endblock %}
-
-                {% block swag_migration_confirm_language_warning_question %}
-                    <p class="swag-migration-confirm-warning__question">
-                        {{ $tc('swag-migration.index.confirmWarningCard.languageMismatch.question', { targetSystemLanguage }, 0) }}
-                    </p>
-                {% endblock %}
-
-                {% block swag_migration_confirm_language_warning_checkbox %}
-                    <mt-checkbox v-model:checked="isLanguageChecked"
-                                 class="swag-migration-confirm-warning__checkbox"
-                                 :label="$tc('swag-migration.index.confirmWarningCard.currencyMismatch.checkboxLabel')"
-                                 @update:checked="onCheckboxValueChanged" />
-                {% endblock %}
-            </mt-card>
-        {% endblock %}
+        <mt-banner
+            v-if="hasCurrencyMismatch"
+            class="swag-migration-confirm-warning__banner"
+            :title="$tc('swag-migration.index.confirmWarningCard.currencyMismatch.title')"
+            variant="attention"
+        >
+            {{ $tc('swag-migration.index.confirmWarningCard.currencyMismatch.text', { sourceSystemCurrency, targetSystemCurrency }, 0) }}
+        </mt-banner>
+
+        <mt-banner
+            v-if="hasLanguageMismatch"
+            class="swag-migration-confirm-warning__banner"
+            :title="$tc('swag-migration.index.confirmWarningCard.languageMismatch.title')"
+            variant="attention"
+        >
+            {{ $tc('swag-migration.index.confirmWarningCard.languageMismatch.text', { sourceSystemLanguage, targetSystemLanguage }, 0) }}
+        </mt-banner>
     </div>
 {% endblock %}