diff --git a/src/Resources/app/administration/src/module/extension/index.ts b/src/Resources/app/administration/src/module/extension/index.ts index 4f8d1c722..683fc247b 100644 --- a/src/Resources/app/administration/src/module/extension/index.ts +++ b/src/Resources/app/administration/src/module/extension/index.ts @@ -1,4 +1,8 @@ -Shopware.Component.override('sw-first-run-wizard-paypal-credentials', () => import('./sw-first-run-wizard/sw-first-run-wizard-paypal-credentials')); +if (Shopware.Feature.isActive('PAYPAL_SETTINGS_TWEAKS')) { + Shopware.Component.override('sw-first-run-wizard-paypal-credentials', () => import('./sw-first-run-wizard/sw-first-run-wizard-paypal-credentials')); +} else { + Shopware.Component.override('sw-first-run-wizard-paypal-credentials', () => import('./sw-first-run-wizard/sw-first-run-wizard-paypal-credentials-deprecated')); +} Shopware.Component.override('sw-sales-channel-modal-detail', () => import('./sw-sales-channel-modal-detail')); diff --git a/src/Resources/app/administration/src/module/extension/sw-first-run-wizard/snippets/de-DE.json b/src/Resources/app/administration/src/module/extension/sw-first-run-wizard/snippets/de-DE.json index bc8128dd3..c8e9b6381 100644 --- a/src/Resources/app/administration/src/module/extension/sw-first-run-wizard/snippets/de-DE.json +++ b/src/Resources/app/administration/src/module/extension/sw-first-run-wizard/snippets/de-DE.json @@ -1,6 +1,7 @@ { "swag-paypal-frw-credentials": { "buttonGetCredentials": "Hole API Zugangsdaten", + "buttonGetSandboxCredentials": "Hole Sandbox API Zugangsdaten", "textIntroPayPal": "Um PayPal zu nutzen müssen nur die API Zugangsdaten eingegeben werden.", "labelClientId": "Client-ID", "labelClientSecret": "Client-Secret", @@ -15,6 +16,7 @@ "messageFetchedError": " Bitte versuche es erneut oder nutze die erweiterten Einstellungen um die Zugangsdaten direkt einzugeben.", "textFetchedSuccessful": "Die Zugangsdaten wurden erfolgreich abgerufen.", "messageNoCredentials": "Es wurden keine Zugangsdaten hinterlegt.", + "messageInvalidCredentials": "Die Zugangsdaten sind ungültig.", "messageTestSuccess": "Die Zugangsdaten sind gültig." } } diff --git a/src/Resources/app/administration/src/module/extension/sw-first-run-wizard/snippets/en-GB.json b/src/Resources/app/administration/src/module/extension/sw-first-run-wizard/snippets/en-GB.json index dc3f91c36..8c0697dc2 100644 --- a/src/Resources/app/administration/src/module/extension/sw-first-run-wizard/snippets/en-GB.json +++ b/src/Resources/app/administration/src/module/extension/sw-first-run-wizard/snippets/en-GB.json @@ -1,6 +1,7 @@ { "swag-paypal-frw-credentials": { "buttonGetCredentials": "Get API credentials", + "buttonGetSandboxCredentials": "Get sandbox API credentials", "textIntroPayPal": "To get PayPal up and running you only need to provide your PayPal API credentials.", "labelClientId": "Client ID", "labelClientSecret": "Client secret", @@ -15,6 +16,7 @@ "messageFetchedError": "Try again or use the advanced settings to provide your credentials.", "textFetchedSuccessful": "Credentials have been fetched.", "messageNoCredentials": "No credentials provided.", + "messageInvalidCredentials": "Credentials are invalid.", "messageTestSuccess": "Credentials are valid." } } diff --git a/src/Resources/app/administration/src/module/extension/sw-first-run-wizard/sw-first-run-wizard-paypal-credentials-deprecated/index.ts b/src/Resources/app/administration/src/module/extension/sw-first-run-wizard/sw-first-run-wizard-paypal-credentials-deprecated/index.ts new file mode 100644 index 000000000..c15319caa --- /dev/null +++ b/src/Resources/app/administration/src/module/extension/sw-first-run-wizard/sw-first-run-wizard-paypal-credentials-deprecated/index.ts @@ -0,0 +1,169 @@ +import type * as PayPal from 'src/types'; +import template from './sw-first-run-wizard-paypal-credentials.html.twig'; +import './sw-first-run-wizard-paypal-credentials.scss'; + +export default Shopware.Component.wrapComponentConfig({ + template, + + inject: [ + 'systemConfigApiService', + 'SwagPaypalPaymentMethodService', + ], + + mixins: [ + Shopware.Mixin.getByName('swag-paypal-notification'), + Shopware.Mixin.getByName('swag-paypal-credentials-loader'), + ], + + data() { + return { + config: {} as PayPal.SystemConfig, + isLoading: false, + setDefault: false, + }; + }, + + computed: { + sandboxMode() { + return this.config['SwagPayPal.settings.sandbox'] || false; + }, + + onboardingUrl() { + return this.sandboxMode ? this.onboardingUrlSandbox : this.onboardingUrlLive; + }, + + onboardingCallback() { + return this.sandboxMode ? 'onboardingCallbackSandbox' : 'onboardingCallbackLive'; + }, + + buttonConfig() { + const prev = this.$super('buttonConfig') as { key: string; action: () => Promise }[]; + + return prev.map((button) => { + if (button.key === 'next') { + button.action = this.onClickNext.bind(this); + } + + return button; + }); + }, + + credentialsProvided() { + return (!this.sandboxMode && this.credentialsProvidedLive) + || (this.sandboxMode && this.credentialsProvidedSandbox); + }, + + credentialsProvidedLive() { + return !!this.config['SwagPayPal.settings.clientId'] + && !!this.config['SwagPayPal.settings.clientSecret']; + }, + + credentialsProvidedSandbox() { + return !!this.config['SwagPayPal.settings.clientIdSandbox'] + && !!this.config['SwagPayPal.settings.clientSecretSandbox']; + }, + }, + + created() { + this.createdComponent(); + }, + + methods: { + createdComponent() { + this.$super('createdComponent'); + this.fetchPayPalConfig(); + }, + + onPayPalCredentialsLoadSuccess(clientId: string, clientSecret: string, merchantPayerId: string, sandbox: boolean) { + this.setConfig(clientId, clientSecret, merchantPayerId, sandbox); + }, + + onPayPalCredentialsLoadFailed(sandbox: boolean) { + this.setConfig('', '', '', sandbox); + this.createNotificationError({ + message: this.$tc('swag-paypal-frw-credentials.messageFetchedError'), + // @ts-expect-error - duration is not defined correctly + duration: 10000, + }); + }, + + setConfig(clientId: string, clientSecret: string, merchantPayerId: string, sandbox: boolean) { + const suffix = sandbox ? 'Sandbox' : ''; + this.$set(this.config, `SwagPayPal.settings.clientId${suffix}`, clientId); + this.$set(this.config, `SwagPayPal.settings.clientSecret${suffix}`, clientSecret); + this.$set(this.config, `SwagPayPal.settings.merchantPayerId${suffix}`, merchantPayerId); + }, + + async onClickNext(): Promise { + if (!this.credentialsProvided) { + this.createNotificationError({ + message: this.$tc('swag-paypal-frw-credentials.messageNoCredentials'), + }); + + return true; + } + + try { + // Do not test the credentials if they have been fetched from the PayPal api + if (!this.isGetCredentialsSuccessful) { + await this.testApiCredentials(); + } + + await this.saveConfig(); + + this.$emit('frw-redirect', 'sw.first.run.wizard.index.plugins'); + + return false; + } catch { + return true; + } + }, + + fetchPayPalConfig() { + this.isLoading = true; + return this.systemConfigApiService.getValues('SwagPayPal.settings', null) + .then((values: PayPal.SystemConfig) => { + this.config = values; + }) + .finally(() => { + this.isLoading = false; + }); + }, + + async saveConfig() { + this.isLoading = true; + await this.systemConfigApiService.saveValues(this.config, null); + + if (this.setDefault) { + await this.SwagPaypalPaymentMethodService.setDefaultPaymentForSalesChannel(); + } + + this.isLoading = false; + }, + + async testApiCredentials() { + this.isLoading = true; + + const sandbox = this.config['SwagPayPal.settings.sandbox'] ?? false; + const sandboxSetting = sandbox ? 'Sandbox' : ''; + const clientId = this.config[`SwagPayPal.settings.clientId${sandboxSetting}`]; + const clientSecret = this.config[`SwagPayPal.settings.clientSecret${sandboxSetting}`]; + + const response = await this.SwagPayPalApiCredentialsService + .validateApiCredentials(clientId, clientSecret, sandbox) + .catch((errorResponse: PayPal.ServiceError) => { + this.createNotificationFromError({ errorResponse, title: 'swag-paypal.settingForm.messageTestError' }); + + return { credentialsValid: false }; + }); + + this.isLoading = false; + + return response.credentialsValid ? Promise.resolve() : Promise.reject(); + }, + + onCredentialsChanged() { + this.isGetCredentialsSuccessful = null; + }, + }, +}); diff --git a/src/Resources/app/administration/src/module/extension/sw-first-run-wizard/sw-first-run-wizard-paypal-credentials-deprecated/sw-first-run-wizard-paypal-credentials.html.twig b/src/Resources/app/administration/src/module/extension/sw-first-run-wizard/sw-first-run-wizard-paypal-credentials-deprecated/sw-first-run-wizard-paypal-credentials.html.twig new file mode 100644 index 000000000..2edd26d36 --- /dev/null +++ b/src/Resources/app/administration/src/module/extension/sw-first-run-wizard/sw-first-run-wizard-paypal-credentials-deprecated/sw-first-run-wizard-paypal-credentials.html.twig @@ -0,0 +1,122 @@ +{% block sw_first_run_wizard_paypal_credentials %} +
+ + {% block sw_first_run_wizard_paypal_credentials_inner %} + + + {% block sw_first_run_wizard_paypal_credentials_intro %} +

+ {{ $tc('swag-paypal-frw-credentials.textIntroPayPal') }} +

+ {% endblock %} + + {% block sw_first_run_wizard_paypal_credentials_sandbox %} + + {% endblock %} + + {% block sw_first_run_wizard_paypal_credentials_button_container %} +
+ + {% block sw_first_run_wizard_paypal_credentials_button %} + + {% endblock %} + + {% block sw_first_run_wizard_paypal_credentials_indicator %} +
+ +
+ {% endblock %} +
+ {% endblock %} + + {% block sw_first_run_wizard_paypal_credentials_client_id %} + + {% endblock %} + + {% block sw_first_run_wizard_paypal_credentials_client_secret %} + + {% endblock %} + + {% block sw_first_run_wizard_paypal_credentials_merchant_id %} + + {% endblock %} + + {% block sw_first_run_wizard_paypal_credentials_client_id_sandbox %} + + {% endblock %} + + {% block sw_first_run_wizard_paypal_credentials_client_secret_sandbox %} + + {% endblock %} + + {% block sw_first_run_wizard_paypal_credentials_merchant_id_sandbox %} + + {% endblock %} + + {% block sw_first_run_wizard_paypal_credentials_set_default %} + + {% endblock %} + {% endblock %} +
+{% endblock %} diff --git a/src/Resources/app/administration/src/module/extension/sw-first-run-wizard/sw-first-run-wizard-paypal-credentials-deprecated/sw-first-run-wizard-paypal-credentials.scss b/src/Resources/app/administration/src/module/extension/sw-first-run-wizard/sw-first-run-wizard-paypal-credentials-deprecated/sw-first-run-wizard-paypal-credentials.scss new file mode 100644 index 000000000..194384243 --- /dev/null +++ b/src/Resources/app/administration/src/module/extension/sw-first-run-wizard/sw-first-run-wizard-paypal-credentials-deprecated/sw-first-run-wizard-paypal-credentials.scss @@ -0,0 +1,31 @@ +@import "~scss/variables"; + +.sw-first-run-wizard-paypal-credentials { + width: 100%; + + .sw-first-run-wizard-paypal-credentials__headerText { + font-weight: bold; + color: $color-darkgray-200; + margin-bottom: 22px; + } + + .sw-first-run-wizard-paypal-credentials__button-container { + display: flex; + align-items: center; + margin-bottom: 22px; + + .sw-first-run-wizard-paypal-credentials__indicator { + display: inline; + margin-left: 25px; + + .sw-first-run-wizard-paypal-credentials__icon-successful { + color: $color-emerald-500; + margin-top: -5px; + } + + .sw-first-run-wizard-paypal-credentials__text-indicator { + margin-left: 8px; + } + } + } +} diff --git a/src/Resources/app/administration/src/module/extension/sw-first-run-wizard/sw-first-run-wizard-paypal-credentials/index.ts b/src/Resources/app/administration/src/module/extension/sw-first-run-wizard/sw-first-run-wizard-paypal-credentials/index.ts index c15319caa..23a5b49db 100644 --- a/src/Resources/app/administration/src/module/extension/sw-first-run-wizard/sw-first-run-wizard-paypal-credentials/index.ts +++ b/src/Resources/app/administration/src/module/extension/sw-first-run-wizard/sw-first-run-wizard-paypal-credentials/index.ts @@ -1,4 +1,3 @@ -import type * as PayPal from 'src/types'; import template from './sw-first-run-wizard-paypal-credentials.html.twig'; import './sw-first-run-wizard-paypal-credentials.scss'; @@ -6,36 +5,28 @@ export default Shopware.Component.wrapComponentConfig({ template, inject: [ - 'systemConfigApiService', 'SwagPaypalPaymentMethodService', + 'SwagPayPalSettingsService', ], mixins: [ Shopware.Mixin.getByName('swag-paypal-notification'), - Shopware.Mixin.getByName('swag-paypal-credentials-loader'), + Shopware.Mixin.getByName('swag-paypal-settings'), ], - data() { + data(): { + isLoading: boolean; + asDefault: boolean; + error: { detail: string; code: string } | null; + } { return { - config: {} as PayPal.SystemConfig, isLoading: false, - setDefault: false, + asDefault: false, + error: null, }; }, computed: { - sandboxMode() { - return this.config['SwagPayPal.settings.sandbox'] || false; - }, - - onboardingUrl() { - return this.sandboxMode ? this.onboardingUrlSandbox : this.onboardingUrlLive; - }, - - onboardingCallback() { - return this.sandboxMode ? 'onboardingCallbackSandbox' : 'onboardingCallbackLive'; - }, - buttonConfig() { const prev = this.$super('buttonConfig') as { key: string; action: () => Promise }[]; @@ -48,54 +39,38 @@ export default Shopware.Component.wrapComponentConfig({ }); }, - credentialsProvided() { - return (!this.sandboxMode && this.credentialsProvidedLive) - || (this.sandboxMode && this.credentialsProvidedSandbox); - }, - - credentialsProvidedLive() { - return !!this.config['SwagPayPal.settings.clientId'] - && !!this.config['SwagPayPal.settings.clientSecret']; - }, - - credentialsProvidedSandbox() { - return !!this.config['SwagPayPal.settings.clientIdSandbox'] - && !!this.config['SwagPayPal.settings.clientSecretSandbox']; + hasLiveCredentials() { + return !!this.settingsStore.get('SwagPayPal.settings.clientId') + && !!this.settingsStore.get('SwagPayPal.settings.clientSecret'); }, - }, - - created() { - this.createdComponent(); - }, - methods: { - createdComponent() { - this.$super('createdComponent'); - this.fetchPayPalConfig(); + hasSandboxCredentials() { + return !!this.settingsStore.get('SwagPayPal.settings.clientIdSandbox') + && !!this.settingsStore.get('SwagPayPal.settings.clientSecretSandbox'); }, - onPayPalCredentialsLoadSuccess(clientId: string, clientSecret: string, merchantPayerId: string, sandbox: boolean) { - this.setConfig(clientId, clientSecret, merchantPayerId, sandbox); + hasCredentials() { + return (!this.settingsStore.isSandbox && this.hasLiveCredentials) + || (this.settingsStore.isSandbox && this.hasSandboxCredentials); }, - onPayPalCredentialsLoadFailed(sandbox: boolean) { - this.setConfig('', '', '', sandbox); - this.createNotificationError({ - message: this.$tc('swag-paypal-frw-credentials.messageFetchedError'), - // @ts-expect-error - duration is not defined correctly - duration: 10000, - }); + inputsDisabled() { + return this.isLoading || this.settingsStore.isLoading || this.savingSettings === 'loading'; }, + }, - setConfig(clientId: string, clientSecret: string, merchantPayerId: string, sandbox: boolean) { - const suffix = sandbox ? 'Sandbox' : ''; - this.$set(this.config, `SwagPayPal.settings.clientId${suffix}`, clientId); - this.$set(this.config, `SwagPayPal.settings.clientSecret${suffix}`, clientSecret); - this.$set(this.config, `SwagPayPal.settings.merchantPayerId${suffix}`, merchantPayerId); + watch: { + 'settingsStore.allConfigs': { + deep: true, + handler() { + this.resetError(); + }, }, + }, + methods: { async onClickNext(): Promise { - if (!this.credentialsProvided) { + if (!this.hasCredentials) { this.createNotificationError({ message: this.$tc('swag-paypal-frw-credentials.messageNoCredentials'), }); @@ -103,67 +78,57 @@ export default Shopware.Component.wrapComponentConfig({ return true; } - try { - // Do not test the credentials if they have been fetched from the PayPal api - if (!this.isGetCredentialsSuccessful) { - await this.testApiCredentials(); - } - - await this.saveConfig(); - - this.$emit('frw-redirect', 'sw.first.run.wizard.index.plugins'); - - return false; - } catch { - return true; - } - }, - - fetchPayPalConfig() { this.isLoading = true; - return this.systemConfigApiService.getValues('SwagPayPal.settings', null) - .then((values: PayPal.SystemConfig) => { - this.config = values; - }) - .finally(() => { - this.isLoading = false; - }); - }, - async saveConfig() { - this.isLoading = true; - await this.systemConfigApiService.saveValues(this.config, null); + const information = (await this.saveSettings())?.null; + + const haveChanged = (!this.settingsStore.isSandbox && information?.liveCredentialsChanged) || (this.settingsStore.isSandbox && information?.sandboxCredentialsChanged); + let areValid = (!this.settingsStore.isSandbox && information?.liveCredentialsValid) || (this.settingsStore.isSandbox && information?.sandboxCredentialsValid); - if (this.setDefault) { - await this.SwagPaypalPaymentMethodService.setDefaultPaymentForSalesChannel(); + if (!haveChanged) { + areValid = await this.onTest(); } this.isLoading = false; - }, - async testApiCredentials() { - this.isLoading = true; + if (!areValid) { + this.error = { + detail: this.$tc('swag-paypal-frw-credentials.messageInvalidCredentials'), + code: 'ASD', + }; - const sandbox = this.config['SwagPayPal.settings.sandbox'] ?? false; - const sandboxSetting = sandbox ? 'Sandbox' : ''; - const clientId = this.config[`SwagPayPal.settings.clientId${sandboxSetting}`]; - const clientSecret = this.config[`SwagPayPal.settings.clientSecret${sandboxSetting}`]; + return true; + } - const response = await this.SwagPayPalApiCredentialsService - .validateApiCredentials(clientId, clientSecret, sandbox) - .catch((errorResponse: PayPal.ServiceError) => { - this.createNotificationFromError({ errorResponse, title: 'swag-paypal.settingForm.messageTestError' }); + this.$emit('frw-redirect', 'sw.first.run.wizard.index.plugins'); - return { credentialsValid: false }; - }); + if (this.asDefault) { + try { + await this.SwagPaypalPaymentMethodService.setDefaultPaymentForSalesChannel(this.settingsStore.salesChannel); + } catch { + return true; + } + } - this.isLoading = false; + return false; + }, - return response.credentialsValid ? Promise.resolve() : Promise.reject(); + resetError() { + this.error = null; }, - onCredentialsChanged() { - this.isGetCredentialsSuccessful = null; + async onTest() { + const suffix = this.settingsStore.isSandbox ? 'Sandbox' : ''; + + return this.SwagPayPalSettingsService + .testApiCredentials( + this.settingsStore.get(`SwagPayPal.settings.clientId${suffix}`), + this.settingsStore.get(`SwagPayPal.settings.clientSecret${suffix}`), + this.settingsStore.get(`SwagPayPal.settings.merchantPayerId${suffix}`), + this.settingsStore.isSandbox, + ) + .then((response) => response.valid) + .catch(() => false); }, }, }); diff --git a/src/Resources/app/administration/src/module/extension/sw-first-run-wizard/sw-first-run-wizard-paypal-credentials/sw-first-run-wizard-paypal-credentials.html.twig b/src/Resources/app/administration/src/module/extension/sw-first-run-wizard/sw-first-run-wizard-paypal-credentials/sw-first-run-wizard-paypal-credentials.html.twig index 2edd26d36..d35588e17 100644 --- a/src/Resources/app/administration/src/module/extension/sw-first-run-wizard/sw-first-run-wizard-paypal-credentials/sw-first-run-wizard-paypal-credentials.html.twig +++ b/src/Resources/app/administration/src/module/extension/sw-first-run-wizard/sw-first-run-wizard-paypal-credentials/sw-first-run-wizard-paypal-credentials.html.twig @@ -1,122 +1,85 @@ {% block sw_first_run_wizard_paypal_credentials %}
+

+ {{ $tc('swag-paypal-frw-credentials.textIntroPayPal') }} +

- {% block sw_first_run_wizard_paypal_credentials_inner %} - - - {% block sw_first_run_wizard_paypal_credentials_intro %} -

- {{ $tc('swag-paypal-frw-credentials.textIntroPayPal') }} -

- {% endblock %} + - {% block sw_first_run_wizard_paypal_credentials_sandbox %} - + - {% endblock %} - - {% block sw_first_run_wizard_paypal_credentials_button_container %} -
- - {% block sw_first_run_wizard_paypal_credentials_button %} - - {% endblock %} - - {% block sw_first_run_wizard_paypal_credentials_indicator %} -
- -
- {% endblock %} -
- {% endblock %} + + {{ $tc('swag-paypal-frw-credentials.buttonGetSandboxCredentials') }} + - {% block sw_first_run_wizard_paypal_credentials_client_id %} - - {% endblock %} - - {% block sw_first_run_wizard_paypal_credentials_client_secret %} - - {% endblock %} - - {% block sw_first_run_wizard_paypal_credentials_merchant_id %} - - {% endblock %} - {% block sw_first_run_wizard_paypal_credentials_client_id_sandbox %} - - {% endblock %} - - {% block sw_first_run_wizard_paypal_credentials_client_secret_sandbox %} - - {% endblock %} - - {% block sw_first_run_wizard_paypal_credentials_merchant_id_sandbox %} - - {% endblock %} - {% block sw_first_run_wizard_paypal_credentials_set_default %} - {% endblock %} - {% endblock %} + + +
{% endblock %} diff --git a/src/Resources/app/administration/src/module/extension/sw-first-run-wizard/sw-first-run-wizard-paypal-credentials/sw-first-run-wizard-paypal-credentials.scss b/src/Resources/app/administration/src/module/extension/sw-first-run-wizard/sw-first-run-wizard-paypal-credentials/sw-first-run-wizard-paypal-credentials.scss index 194384243..2f3fe6ca1 100644 --- a/src/Resources/app/administration/src/module/extension/sw-first-run-wizard/sw-first-run-wizard-paypal-credentials/sw-first-run-wizard-paypal-credentials.scss +++ b/src/Resources/app/administration/src/module/extension/sw-first-run-wizard/sw-first-run-wizard-paypal-credentials/sw-first-run-wizard-paypal-credentials.scss @@ -3,29 +3,29 @@ .sw-first-run-wizard-paypal-credentials { width: 100%; - .sw-first-run-wizard-paypal-credentials__headerText { + display: flex; + flex-direction: column; + gap: 20px; + + &__headerText { font-weight: bold; color: $color-darkgray-200; - margin-bottom: 22px; } - .sw-first-run-wizard-paypal-credentials__button-container { - display: flex; - align-items: center; - margin-bottom: 22px; + &__as_default { + margin: 0; + } - .sw-first-run-wizard-paypal-credentials__indicator { - display: inline; - margin-left: 25px; + .sw-field.sw-block-field, .sw-field--switch { + margin: 0; + } - .sw-first-run-wizard-paypal-credentials__icon-successful { - color: $color-emerald-500; - margin-top: -5px; - } + .sw-field--switch .sw-field__label label { + padding-top: 0; + padding-bottom: 0; + } - .sw-first-run-wizard-paypal-credentials__text-indicator { - margin-left: 8px; - } - } + .swag-paypal-onboarding-button { + align-self: start; } }