Skip to content

Feature: Redesign and refactor admin settings#332

Open
justelis22 wants to merge 72 commits into
masterfrom
feature/react-admin-settings
Open

Feature: Redesign and refactor admin settings#332
justelis22 wants to merge 72 commits into
masterfrom
feature/react-admin-settings

Conversation

@justelis22

Copy link
Copy Markdown
Collaborator

Self-Checks

  • I have performed a self-review of my code.
  • I have updated/added necessary technical documentation in the README file.

JIRA task link

Summary

QA Checklist Labels

  • Bug fix?
  • New feature?
  • Improvement?
  • Technical debt?
  • Reusable?
  • Covered by tests?

QA Checklist

Additional Context

Frontend Changes

Justas and others added 30 commits February 24, 2026 13:52
Adds discernible accessible names to interactive controls that
were unlabelled at narrow viewports, resolving 33 of the 36 axe-core
violations found during SL-346 QA.

- Payment Methods mobile cards: add aria-label to "Logos" and
  "Custom form" switches (28 violations). Desktop layout was already
  labelled; only the md:sp-hidden mobile block was missing labels.
- Settings tab triggers: add aria-label to all five TabsTrigger
  buttons (5 violations). Visible text labels are wrapped in
  sp-hidden sm:sp-inline so on mobile only the icon shows; without
  aria-label the buttons had no accessible name.
- Darken --sp-muted-foreground from 46% to 38% lightness (4.31:1 -> ~6.4:1)
- Replace sp-text-emerald-600 with sp-text-emerald-700 in API Credentials
  (3.76:1 -> 5.27:1 on white, 3.57:1 -> ~5:1 on emerald-50)

Resolves 3 axe-core color-contrast violations across all 5 settings tabs.
Verified: 0 contrast issues remain inside #saferpay-settings-root.
Radix Label component does not auto-wire to SelectTrigger; without
an explicit aria-label, screen readers announced only the selected
value. Resolves last open finding in TC-346.1.
Previously Tab could escape the modal into background page content
violating WCAG 2.1.2 (Focus Order) for modal dialogs. Tab/Shift+Tab
now cycle within the modal's focusable elements.

Resolves TC-346.7.
PrestaShop core .btn-primary teal (#25b9d7) on white was 2.6:1 — fails
WCAG 2.1 AA (requires 4.5:1). Scoped override on #saferpay-admin-form
only, so other admin pages keep their PS theme. Refund/Capture buttons
now use the module brand teal #1c7c80 (5.27:1).
Without scope, screen readers cannot reliably associate header cells
with their data column. Resolves TC-346.10 (FO saved credit cards).
The PS Classic theme rendered the Remove link in teal #24b9d7 on white
(2.6:1) which fails WCAG 2.1 AA. Use brand teal #1c7c80 (5.27:1) via
inline color so the override does not bleed to other theme buttons.
The .btn-primary (BO admin order) and .btn-default (FO saved cards)
contrast issues originate in PrestaShop core/theme CSS, not in our
module. Overriding them at module level was the wrong layer:
- fragile against theme updates
- could clash with merchant theme customizations
- inconsistent with our decision to scope SL-346 to module-owned UI

These now match the same out-of-scope category as the BO breadcrumb,
help button, and submenu tabs. Module-owned a11y fixes (React Settings
app contrast, aria-labels, scope=col, focus trap, etc.) remain in PR.
- Disable Save Changes button when username/password empty, credential
  check is in flight, or inline credential error is shown
- Mark JSON API Username and Password as required (visual asterisk +
  aria-required) to surface the requirement before user clicks Save
The Saferpay Fields section was driven by a single hasBusinessLicense
flag derived from the active environment's stored license at page load.
Switching environments client-side did not re-evaluate it, so the
section stayed visible after switching to an environment with no
validated business license.

Expose testHasBusinessLicense and liveHasBusinessLicense separately
from the controller (initial payload and save response), and pick the
active one in api-credentials.tsx based on testMode.
When the Saferpay Management API license lookup fails during credentials
save, the previous flow showed a misleading green success toast that
asked merchants to verify credentials they had just successfully validated.

- Log the underlying error to the SaferPay module Logs tab via LoggerInterface
- Return a 'warning' flag in the save credentials response
- Render an amber warning toast with a clearer message that points to the Logs
…ntials

Disable Save Changes when API credentials empty or invalid
…nse-visibility

Fix Saferpay Fields visibility per active environment license
…toast

Log license fetch failures and surface honest warning toast on save
The polling script in saferpay_wait.tpl navigated the iframe itself via
window.location.href, leaving the parent window stuck on the SaferPay
iframe controller URL while the cart or order-confirmation page rendered
nested inside the iframe.

Use window.top so the redirect targets the parent window and the user
lands at /cart or /order-confirmation with the proper top-level chrome.
Address review feedback on PR #325:
- Use location.replace() so the polling page is not stored in history
  (Back from order-confirmation should not return to the spinner).
- Wrap window.top access in try/catch with an in-iframe fallback in
  case sandboxing or browser policy blocks the breakout.
SL-358: add ConfigSet field validation, move hosted field style to general settings
…cription

SL-356: add Order reference on payment page toggle to control Descripton
SL-355: add Capture option to 3D Secure failure behavior setting
SL-353/SL-354: fields settings block logic
SL-350: fixing styles and credentials saving logic
SL-351 translations and customer id parsing

@gemini-code-assist gemini-code-assist Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Code Review

This pull request migrates the Saferpay admin settings to a React-based single-page application, consolidating the fields and payment controllers into a unified settings controller driven by AJAX. It also introduces a new capture behavior when 3D Secure fails, improves accessibility across front-end templates, and adds explicit credential-based API methods. The review identified a critical security vulnerability where AJAX actions bypass PrestaShop's native permission checks, an undefined variable bug in the notification controller, and a regression in API error logging that suppresses HTTP error responses. Additionally, an optimization was suggested for the build process to exclude all React development files from the production ZIP.

Important

The consumer version of Gemini Code Assist on GitHub is being sunset. Starting June 18, 2026, new organization installations will be blocked, and all code review activity will officially cease on July 17, 2026.
For more details on the timeline and next steps, please review the Help Documentation.

Comment on lines +107 to +116
if (!$this->validateAjaxToken()) {
$this->ajaxResponse(false, $this->module->l('Invalid security token', self::FILE_NAME));
return;
}

$action = Tools::getValue('action');
if (!$action || !in_array($action, self::ALLOWED_AJAX_ACTIONS)) {
$this->ajaxResponse(false, $this->module->l('Invalid action', self::FILE_NAME));
return;
}

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

security-high high

By bypassing parent::postProcess() for AJAX requests, the controller completely skips PrestaShop's native permission checks (such as verifying if the logged-in employee has edit permissions for this controller). This allows any employee with basic view access to perform state-changing actions like saving credentials, changing payment methods, or deleting saved credit cards.

Please explicitly verify that the employee has edit permissions before executing any state-changing AJAX actions.

        if (!$this->validateAjaxToken()) {
            $this->ajaxResponse(false, $this->module->l('Invalid security token', self::FILE_NAME));
            return;
        }

        $action = Tools::getValue('action');
        if (!$action || !in_array($action, self::ALLOWED_AJAX_ACTIONS)) {
            $this->ajaxResponse(false, $this->module->l('Invalid action', self::FILE_NAME));
            return;
        }

        // State-changing actions require 'edit' permission
        $stateChangingActions = [
            'saveCredentials',
            'savePaymentProcessing',
            'saveEmailSettings',
            'saveGeneralSettings',
            'savePaymentMethods',
            'generateFieldAccessToken',
        ];
        if (in_array($action, $stateChangingActions) && !$this->access('edit')) {
            $this->ajaxResponse(false, $this->module->l('You do not have permission to edit these settings.', self::FILE_NAME));
            return;
        }

Comment on lines +143 to +144
$paymentBehaviorWithout3D = (int) Configuration::get(SaferPayConfig::PAYMENT_BEHAVIOR_WITHOUT_3D);

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

high

The variable $transactionStatus is used on line 175, but it is never defined in this controller. This will trigger an Undefined variable notice/error in PHP and break the notification callback when the payment behavior is set to capture without 3D Secure.

Please retrieve the transaction status from $assertResponseBody before using it.

            $paymentBehaviorWithout3D = (int) Configuration::get(SaferPayConfig::PAYMENT_BEHAVIOR_WITHOUT_3D);
            $transactionStatus = $assertResponseBody->getTransaction()->getStatus();

Comment thread src/Api/ApiRequest.php
Comment on lines +117 to +126
if ($response === null) {
$this->logger->error($exception->getMessage(), [
'context' => [
'headers' => $this->getHeaders(),
],
'request' => $params,
'response' => null,
'exceptions' => ExceptionUtility::getExceptions($exception),
]);
}

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

By wrapping the error logging in if ($response === null), any API errors where a response was actually received (e.g., HTTP 400 or 500 errors) will no longer be logged. This is a major regression in error monitoring.

To prevent the original null pointer exception while preserving full error logging, safely check if $response is not null when decoding the body.

            $this->logger->error($exception->getMessage(), [
                'context' => [
                    'headers' => $this->getHeaders(),
                ],
                'request' => $params,
                'response' => $response ? json_decode($response->raw_body) : null,
                'exceptions' => ExceptionUtility::getExceptions($exception),
            ]);

Comment thread src/Api/ApiRequest.php
Comment on lines +175 to +182
if ($response === null) {
$this->logger->error($exception->getMessage(), [
'context' => [],
'request' => $params,
'response' => null,
'exceptions' => ExceptionUtility::getExceptions($exception),
]);
}

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

Similar to the get method, wrapping the error logging in if ($response === null) disables logging for all API errors where a response was received. Please log the error in both cases, safely handling the response.

            $this->logger->error($exception->getMessage(), [
                'context' => [],
                'request' => $params,
                'response' => $response ? json_decode($response->raw_body) : null,
                'exceptions' => ExceptionUtility::getExceptions($exception),
            ]);

Comment thread src/Api/ApiRequest.php
Comment on lines +233 to +240
if ($response === null) {
$this->logger->error($exception->getMessage(), [
'context' => [],
'request' => $params,
'response' => null,
'exceptions' => ExceptionUtility::getExceptions($exception),
]);
}

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

Similar to the other methods, wrapping the error logging in if ($response === null) disables logging for all API errors where a response was received. Please log the error in both cases, safely handling the response.

            $this->logger->error($exception->getMessage(), [
                'context' => [],
                'request' => $params,
                'response' => $response ? json_decode($response->raw_body) : null,
                'exceptions' => ExceptionUtility::getExceptions($exception),
            ]);

Comment thread Makefile Outdated
Comment on lines +168 to +169
rm -rf views/js/admin/settings-app/node_modules && \
rm -rf views/js/admin/settings-app/src && \

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

Instead of deleting only node_modules and src directories, the entire views/js/admin/settings-app directory should be deleted during prepare-zip. The production module ZIP only needs the built assets in views/js/admin/dist/ and does not require any of the development configuration files (such as package.json, tsconfig.json, vite.config.ts, etc.). This keeps the production package clean and reduces the ZIP size.

	rm -rf views/js/admin/settings-app && \

Justas and others added 23 commits July 9, 2026 10:07
- SL-368: deep-link Saferpay Fields library docs anchor
- SL-369: reword 3DS liability-shift setting labels
- SL-373: clarify Email Sending toggle descriptions; fold merchant-email pointer into section description
- SL-372: correct misleading Hosted field style info box
- SL-365: add credentials hint with env-based Backoffice link + JSON API Basic auth docs link

Compiled bundle (views/js/admin/dist) is gitignored and built in CI.
- SL-367: filter MPO/SPG terminals from selection (defensive Type/TerminalType read, case-insensitive) + unit test
- SL-366: hide password show/hide toggle until a new password is typed; keep saved secret masked
- SL-370: split 'Card Display & Saving' into 'Card Display' and 'Card Saving for Customers' sections

Stored config keys and save flow unchanged. Compiled bundle is gitignored (built in CI).
- Reconcile stored payment methods against the account on page open (persisted, enabled flags preserved, new methods disabled by default) instead of only on save
- On API failure, fall back to the last-known stored list instead of an empty page; never wipes stored config (new SaferPayPaymentRepository::getAllPaymentMethodsNames)
- Unit test for the refresh reconcile behavior (preserve/added-disabled/removed-dropped + early-return)
Custom Form OFF (or non-Business) cards now fall through to the Saferpay
Payment Page; Custom Form ON keeps Saferpay Fields. The Transaction
Interface (iframe) is no longer selectable at checkout.

Routing-only step. Removal of the now-dead Transaction Interface
controllers/templates/return-flow branches and SL-375 (inline Fields)
follow after live verification on a TEST account.
…word hosted-field info box

- Remove hosted-field style option 3 (Inline Layout with Card) from the admin selector and preview
- Clamp stored SAFERPAY_HOSTED_FIELDS_TEMPLATE to 1-2 on save and on display (legacy value 3 degrades to default)
- Reposition the info box next to the Hosted field style selector and apply final wording (verified live)

Verified on the test store: General Settings renders, selector shows Classic/Labeled only, info box repositioned. Inline Fields runtime conversion + hostedIframe retirement tracked separately.
Add a single shared Saferpay Fields form (the SDK binds to fixed element IDs and has
no re-init, so only one form may exist) that is placed once below the payment options
and shown under whichever Custom-Form card is selected. Place-once + show/hide avoids
reparenting the SDK iframes (which would reload them). Submit is intercepted and routed
through the existing submitHostedFields AJAX flow.

Verified live on the test store: Fields render inline under Visa/Mastercard, SDK
initialises, new-card payment + 3-D Secure completes (order confirmed), and switching
between card options keeps the fields working.

The hosted iframe page remains as a no-JS fallback for now; its retirement + the
Transaction Interface file removal follow.
…ields page

The card fields now render inline in the checkout, so the redirect targets are gone:
- Delete the Transaction Interface flow: iframe controller, saferpay_iframe template/CSS/JS,
  successIFrame/failIFrame controllers, and the PaymentType::IFRAME / ControllerName IFRAME
  success/fail branches in return.php, ajax.php and failValidation.php.
- Retire the hosted Fields page: hostedIframe controller + template1/2/3 (tpl/js/css) +
  example-card assets + template_submit.js. The shared checkout hosted_fields.js (saved-card
  handling) is kept.
- The no-JS redirect fallback for every method is now the Saferpay Payment Page.

Verified live: inline Fields new-card + 3-D Secure still completes end to end (order confirmed)
after the removals.
When card grouping is on (Business licence), the single 'Cards' option now renders the
inline Saferpay Fields form and accepts all card brands, instead of redirecting to the
Payment Page. Individual cards continue to use Fields per their Custom Form toggle.

Verified live: grouped 'Cards' checkout with a Mastercard test card + 3-D Secure completed
(order confirmed).
…ab name

Address review feedback:
- Combine the split credentials-hint keys into one translatable string with
  [backoffice_link]/[more_info_link] placeholders, parsed in the component (avoids the
  i18n sentence-splitting anti-pattern).
- Refer to the 'API Credentials' tab by its actual name in the Email Sending description.
Address review feedback: verify Type/TerminalType are scalar before casting to string,
so an unexpected array/object in the API response can't trigger a TypeError.
Address review feedback: refreshPayments() already persists the account's methods, so read
the list back from storage instead of calling obtainPaymentMethodsNamesAsArray() a second
time. Falls back to a live fetch only when nothing was persisted (fresh setup / no-active
early return). Removes the redundant back-to-back API request.
Address review feedback:
- Handle an already-parsed AJAX response defensively (don't blindly JSON.parse an object).
- Reveal the shared Fields form for a payment option that is already selected on page load
  by triggering change on the checked option after binding.
- Fall back to a safe holder-name label if the global is undefined.

Verified live: new-card Visa + 3-D Secure completes end to end (order confirmed).
- Block place-order submit until all card fields (incl. holder name) are
  valid and show a clear, field-specific message instead of the raw SDK
  'cannot store data' error
- Render the Fields form under the selected card option, rebuilding and
  re-initialising when switching options
- Re-enable the place-order button after a blocked/failed submit
- Normalise field height, vertically centre the input text and add
  focus/invalid highlighting on the field iframes
- Add localized validation strings and version-tag the checkout assets
SL-350 Settings copy & link fixes (SL-365/368/369/372/373)
…to SL-350/settings-ux-fixes

# Conflicts:
#	views/js/admin/settings-app/src/components/settings/api-credentials.tsx
SL-350 Settings UX/logic fixes (SL-366/367/370)
SL-371 Auto-refresh account payment methods when settings open
SL-374/SL-375 Card flow rework: inline Fields, Payment Page routing, remove Transaction Interface
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants