Add button for webhook re-registration on the Connection page by tamaralogeecom · Pull Request #11 · sequra/integration-core-ui

tamaralogeecom · 2025-12-29T08:03:04Z

What is the goal?

Add a button for webhook re-registration on the Connection page.

References

Issue: LIS-90

How is it being implemented?

Added an action bar in ElementGenerator to allow multiple buttons to be displayed in the same row
Added buttons for webhook re-registration and disconnection using the new ElementGenerator method
Added a success response handler in ResponseService to process successful responses
Implemented the logic to handle webhook re-registration

How is it tested?

Manual tests
- Follow the README instructions for building the resources
- Follow the README instructions for copying resources into the Shopify integration
- Install the SeQura Marketing app in Shopify
- Check the look and feel on the Connection settings page

ISSUE: LIS-90

Copilot

Pull request overview

Adds UI support on the Connection settings page to trigger webhook re-registration, including new layout helpers and localized messaging, and commits the corresponding built dist/ artifacts.

Changes:

Add a new “actions bar” layout helper to place multiple buttons on the same row (and style it).
Add a webhook re-registration button and request/payload handling on the Connection settings form, with success/error flash messaging.
Add new i18n strings for webhook re-registration across supported languages (and mirrored dist/ updates).

Reviewed changes

Copilot reviewed 13 out of 26 changed files in this pull request and generated 5 comments.

Show a summary per file

File	Description
src/services/ResponseService.js	Adds a new `successHandler` for rendering success flash messages.
src/services/ElementGenerator.js	Adds `createActionsBar` helper and exports it for UI composition.
src/forms/ConnectionSettingsForm.js	Renders the new re-register + disconnect buttons row and implements re-registration call/payload.
src/design/components/field-wrapper.scss	Styles the new `.sqm--actions-bar` container (flex + gap).
src/lang/en.json	Adds webhook re-registration title/success/error strings.
src/lang/es.json	Adds webhook re-registration title/success/error strings.
src/lang/fr.json	Adds webhook re-registration title/success/error strings.
src/lang/it.json	Adds webhook re-registration title/success/error strings.
src/lang/pt.json	Adds webhook re-registration title/success/error strings.
src/forms/GeneralSettingsForm.js	Minor formatting/semicolon consistency adjustments.
src/controllers/StateController.js	Minor formatting/semicolon consistency adjustment.
src/controllers/OnboardingController.js	Removes an unused parameter/doc entry for widget settings render function.
src/controllers/AdvancedController.js	Minor formatting/semicolon consistency adjustment.
dist/resources/js/ResponseService.js	Built artifact mirroring `src/services/ResponseService.js` changes.
dist/resources/js/ElementGenerator.js	Built artifact mirroring `src/services/ElementGenerator.js` changes.
dist/resources/js/ConnectionSettingsForm.js	Built artifact mirroring `src/forms/ConnectionSettingsForm.js` changes.
dist/resources/js/GeneralSettingsForm.js	Built artifact mirroring `src/forms/GeneralSettingsForm.js` changes.
dist/resources/js/StateController.js	Built artifact mirroring `src/controllers/StateController.js` changes.
dist/resources/js/OnboardingController.js	Built artifact mirroring `src/controllers/OnboardingController.js` changes.
dist/resources/js/AdvancedController.js	Built artifact mirroring `src/controllers/AdvancedController.js` changes.
dist/resources/lang/en.json	Built artifact mirroring `src/lang/en.json` changes.
dist/resources/lang/es.json	Built artifact mirroring `src/lang/es.json` changes.
dist/resources/lang/fr.json	Built artifact mirroring `src/lang/fr.json` changes.
dist/resources/lang/it.json	Built artifact mirroring `src/lang/it.json` changes.
dist/resources/lang/pt.json	Built artifact mirroring `src/lang/pt.json` changes.
dist/resources/css/sequra-core.css	Built artifact mirroring the SCSS actions bar styling changes.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2026-03-08T09:55:27Z

+            if (response.successMessage) {
+                container.prepend(utilities.createFlashMessage(response.successMessage, 'success'));
+            }
+
+            return Promise.reject(response);
+        };


issue (blocking): successHandler rejects the promise even on success
Returning Promise.reject(...) here makes every call site treat a successful response as an error (and can create unhandled rejection warnings if callers don’t .catch). Return a resolved promise (or no promise) after rendering the flash message, and update the JSDoc accordingly.

Copilot · 2026-03-08T09:55:27Z

+                size: 'medium',
+                className: '',
+                onClick: handleReRegister,
+                label: 'Re-register webhooks'


issue (blocking): Button label bypasses i18n keys
createButton expects a translation key (it runs the label through translationService.translate). Using the hard-coded string 'Re-register webhooks' means the new connection.webhookReRegistration.title translations won’t be used and non-English locales will still show English. Use the translation key instead (and keep button labels consistently key-based).

Suggested change

label: 'Re-register webhooks'

label: 'connection.webhookReRegistration.title'

Copilot · 2026-03-08T09:55:28Z

+                    SequraFE.responseService.errorHandler(
+                        {errorMessage: error}


issue (blocking): Passing a non-string error object to errorHandler can throw
In the .catch, error is likely an object (e.g., the JSON error body or a thrown Error). Wrapping it as { errorMessage: error } causes createFlashMessage to eventually call .split on a non-string, which will throw and prevent any feedback from being shown. Pass through the original error shape if it already has errorCode/errorMessage, or map to a safe string key like general.errors.unknown (and optionally console.error(error) for debugging).

Suggested change

SequraFE.responseService.errorHandler(

{errorMessage: error}

// Log raw error for debugging while keeping user-facing message safe.

if (typeof console !== 'undefined' && typeof console.error === 'function') {

console.error(error);

}

const normalizedError =

error &&

typeof error === 'object' &&

(typeof error.errorMessage === 'string' || typeof error.errorCode === 'string')

? error

: { errorMessage: 'general.errors.unknown' };

SequraFE.responseService.errorHandler(

normalizedError

Copilot · 2026-03-08T09:55:28Z

+            const username = getSettingsForActiveDeployment(changedSettings).username ?? '';
+            const password = getSettingsForActiveDeployment(changedSettings).password ?? '';
+            const deployment = getSettingsForActiveDeployment(changedSettings).deployment ?? '';


suggestion (non-blocking): Avoid repeated getSettingsForActiveDeployment calls
createReRegisterPayload calls getSettingsForActiveDeployment(changedSettings) three times. Store the result once (e.g., const active = ...) to reduce duplication and keep the payload construction easier to maintain.

Suggested change

const username = getSettingsForActiveDeployment(changedSettings).username ?? '';

const password = getSettingsForActiveDeployment(changedSettings).password ?? '';

const deployment = getSettingsForActiveDeployment(changedSettings).deployment ?? '';

const activeSettings = getSettingsForActiveDeployment(changedSettings);

const username = activeSettings.username ?? '';

const password = activeSettings.password ?? '';

const deployment = activeSettings.deployment ?? '';

Copilot · 2026-03-08T09:55:28Z

+     * @returns HTMLElement
+     */
+    const createActionsBar = (className, children) => {
+        const fieldWrapper = createElement('div', 'sq-field-wrapper ' + className)


suggestion (non-blocking): JSDoc and semicolon consistency for createActionsBar
createActionsBar’s JSDoc omits parameter descriptions/types (className, children), and the fieldWrapper assignment is missing a trailing semicolon, which is inconsistent with the repo’s Prettier config (semi: true). Adding the params to the doc and formatting this block will keep ElementGenerator consistent with the rest of the helpers.

Suggested change

* @returns HTMLElement

*/

const createActionsBar = (className, children) => {

const fieldWrapper = createElement('div', 'sq-field-wrapper ' + className)

* @param {string} className Additional CSS classes for the wrapper element.

* @param {HTMLElement[]} children Child elements (typically action buttons) to include in the bar.

* @returns {HTMLElement}

*/

const createActionsBar = (className, children) => {

const fieldWrapper = createElement('div', 'sq-field-wrapper ' + className);

m1k3lm · 2026-03-13T11:15:45Z

@tamaralogeecom @AleksandarBoljanovic could you review copilot's comments?

ISSUE: LIS-90

Add button for webhook re-registration on the Connection page

8d0de30

ISSUE: LIS-90

tamaralogeecom requested review from m1k3lm and mescalantea December 29, 2025 08:03

Tamara Vukovic and others added 9 commits December 29, 2025 13:32

Fix undefined available payment methods

77ef8c7

ISSUE: LIS-90

Add translations for webhook re-registration on the Connection page

85e6b43

ISSUE: LIS-90

chore: Update dist

23360a9

Fix Copilot issues

46a7726

ISSUE: LIS-90

chore: Update dist

32b5a2b

Fix Copilot issues

7b31473

ISSUE: LIS-90

chore: Update dist

406aab5

Fix Copilot issues

373c79f

ISSUE: LIS-90

chore: Update dist

c4ca71a

m1k3lm requested a review from Copilot March 8, 2026 09:50

Copilot started reviewing on behalf of m1k3lm March 8, 2026 09:51 View session

m1k3lm marked this pull request as ready for review March 8, 2026 09:51

Copilot AI reviewed Mar 8, 2026

View reviewed changes

Tamara Vukovic and others added 4 commits March 16, 2026 22:55

Resolve copilot issues

f8bf8c4

ISSUE: LIS-90

chore: Update dist

06f10a6

Merge branch 'master' into feature/LIS-90

73ba726

Release 2.3.0

7b22234

ISSUE: LIS-90

tamaralogeecom merged commit 7b22234 into master Mar 17, 2026
4 checks passed

tamaralogeecom deleted the feature/LIS-90 branch March 17, 2026 11:05

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add button for webhook re-registration on the Connection page#11

Add button for webhook re-registration on the Connection page#11
tamaralogeecom merged 14 commits into
masterfrom
feature/LIS-90

tamaralogeecom commented Dec 29, 2025

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Mar 8, 2026

Uh oh!

Copilot AI Mar 8, 2026

Uh oh!

Copilot AI Mar 8, 2026

Uh oh!

Copilot AI Mar 8, 2026

Uh oh!

Copilot AI Mar 8, 2026

Uh oh!

m1k3lm commented Mar 13, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

	label: 'Re-register webhooks'
	label: 'connection.webhookReRegistration.title'

-                    SequraFE.responseService.errorHandler(
-                        {errorMessage: error}
+                    // Log raw error for debugging while keeping user-facing message safe.
+                    if (typeof console !== 'undefined' && typeof console.error === 'function') {
+                        console.error(error);
+                    }
+                    const normalizedError =
+                        error &&
+                        typeof error === 'object' &&
+                        (typeof error.errorMessage === 'string' || typeof error.errorCode === 'string')
+                            ? error
+                            : { errorMessage: 'general.errors.unknown' };
+                    SequraFE.responseService.errorHandler(
+                        normalizedError

-            const username = getSettingsForActiveDeployment(changedSettings).username ?? '';
-            const password = getSettingsForActiveDeployment(changedSettings).password ?? '';
-            const deployment = getSettingsForActiveDeployment(changedSettings).deployment ?? '';
+            const activeSettings = getSettingsForActiveDeployment(changedSettings);
+            const username = activeSettings.username ?? '';
+            const password = activeSettings.password ?? '';
+            const deployment = activeSettings.deployment ?? '';

Conversation

tamaralogeecom commented Dec 29, 2025

What is the goal?

References

How is it being implemented?

How is it tested?

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Mar 8, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 8, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 8, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 8, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 8, 2026

Choose a reason for hiding this comment

Uh oh!

m1k3lm commented Mar 13, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants