Payment settings design changes

Lib/WeDevs_Settings_API.php

@@ -36,7 +36,7 @@
     function admin_enqueue_scripts() {
         wp_enqueue_script( 'jquery' );
 
         if ( isset( $_GET['page'] ) && ( $_GET['page'] == 'wpuf-settings' || $_GET['page'] == 'wpuf-post-forms' || $_GET['page'] == 'wpuf-modules' || $_GET['page'] == 'wpuf-profile-forms' ) ) {
             wp_enqueue_media();
             wp_enqueue_style( 'wp-color-picker' );
             wp_enqueue_script( 'wp-color-picker' );
@@ -345,11 +345,15 @@
     }
 
     /**
-     * Displays a Texty-style card grid for selecting payment gateways
+     * Displays a card grid for selecting payment gateways.
      *
-     * Renders each gateway as a clickable card with icon and name.
-     * Multiple cards can be checked (multi-select). Clicking a card
-     * also reveals that gateway's settings panel below the grid.
+     * Each gateway renders as a focusable card. Clicking (or pressing
+     * Enter/Space on) a card opens its settings panel; settings rows for
+     * non-focused gateways stay hidden. The hidden card checkbox is driven
+     * by an "Enable Gateway" toggle injected at the top of each panel by
+     * the settings JS — that is the only control that enables/disables
+     * the gateway. Pro-preview gateways are filtered out before reaching
+     * this callback (see wpuf_get_gateways() with 'gateway_selector' context).
      *
      * @since 4.3.1
      *
@@ -361,58 +365,45 @@
         $value = $this->get_option( $args['id'], $args['section'], $args['std'] );
         $value = $value ? $value : [];
 
-        // Inline SVG fallback icons (no image files exist for these)
-        $bank_svg    = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="48" height="48" fill="none" stroke="#787c82" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 21h18"/><path d="M3 10h18"/><path d="M12 3l9 7H3l9-7z"/><path d="M5 10v8"/><path d="M9 10v8"/><path d="M15 10v8"/><path d="M19 10v8"/></svg>';
+        // Generic fallback icon for unknown gateways without a registered icon URL.
+        // Known gateways (paypal/bank/stripe) get branded icons via assets/css/admin/settings.css.
         $generic_svg = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="48" height="48" fill="none" stroke="#787c82" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="1" y="4" width="22" height="16" rx="2" ry="2"/><line x1="1" y1="10" x2="23" y2="10"/></svg>';
         ?>
         <fieldset>
             <input type="hidden" name="<?php echo esc_attr( $args['section'] ); ?>[<?php echo esc_attr( $args['id'] ); ?>]" value="" />
 
             <div class="wpuf-gateway-cards">
                 <?php foreach ( $args['options'] as $key => $gateway ) :
-                    $is_checked    = in_array( $key, $value, true );
-                    $is_pro        = ! empty( $gateway['is_pro_preview'] ) && $gateway['is_pro_preview'];
-                    $disabled      = $is_pro ? 'disabled' : '';
-                    $active_class  = $is_checked ? ' wpuf-gateway-card--active' : '';
-                    $pro_class     = $is_pro ? ' wpuf-gateway-card--pro-locked' : '';
-                    $icon          = ! empty( $gateway['icon'] ) ? $gateway['icon'] : '';
-                    $admin_label   = $gateway['admin_label'];
+                    $is_checked   = in_array( $key, $value, true );
+                    $active_class = $is_checked ? ' wpuf-gateway-card--active' : '';
+                    $icon         = ! empty( $gateway['icon'] ) ? $gateway['icon'] : '';
+                    // Strip any HTML embedded in the registered admin_label so it cannot
+                    // leak markup into the card name or downstream JS read of textContent.
+                    $admin_label  = wp_strip_all_tags( $gateway['admin_label'] );
                     ?>
-                    <div class="wpuf-gateway-card<?php echo esc_attr( $active_class . $pro_class ); ?>"
-                         data-gateway="<?php echo esc_attr( $key ); ?>">
+                    <div class="wpuf-gateway-card<?php echo esc_attr( $active_class ); ?>"
+                         data-gateway="<?php echo esc_attr( $key ); ?>"
+                         role="button"
+                         tabindex="0"
+                         aria-label="<?php echo esc_attr( $admin_label ); ?>">
 
                         <input type="checkbox"
                                class="wpuf-gateway-card__checkbox"
                                id="wpuf-<?php echo esc_attr( $args['section'] ); ?>[<?php echo esc_attr( $args['id'] ); ?>][<?php echo esc_attr( $key ); ?>]"
                                name="<?php echo esc_attr( $args['section'] ); ?>[<?php echo esc_attr( $args['id'] ); ?>][<?php echo esc_attr( $key ); ?>]"
                                value="<?php echo esc_attr( $key ); ?>"
-                               <?php checked( $is_checked, true ); ?>
-                               <?php echo esc_attr( $disabled ); ?> />
-
-                        <label class="wpuf-gateway-card__toggle"
-                               for="wpuf-<?php echo esc_attr( $args['section'] ); ?>[<?php echo esc_attr( $args['id'] ); ?>][<?php echo esc_attr( $key ); ?>]"
-                               title="<?php echo esc_attr( sprintf( __( 'Enable %s', 'wp-user-frontend' ), $admin_label ) ); ?>">
-                            <svg class="wpuf-gateway-card__check-on" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="22" height="22">
-                                <circle cx="12" cy="12" r="12" fill="#00a32a"/>
-                                <path d="M9 12l2 2 4-4" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
-                            </svg>
-                            <svg class="wpuf-gateway-card__check-off" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="22" height="22">
-                                <circle cx="12" cy="12" r="11" fill="none" stroke="#c3c4c7" stroke-width="2"/>
-                            </svg>
-                        </label>
+                               <?php checked( $is_checked, true ); ?> />
 
                         <div class="wpuf-gateway-card__icon">
                             <?php if ( $icon ) : ?>
                                 <img src="<?php echo esc_url( $icon ); ?>" alt="<?php echo esc_attr( $admin_label ); ?>" />
-                            <?php elseif ( 'bank' === $key ) : ?>
-                                <?php echo $bank_svg; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- Hardcoded SVG ?>
                             <?php else : ?>
                                 <?php echo $generic_svg; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- Hardcoded SVG ?>
                             <?php endif; ?>
                         </div>
 
                         <div class="wpuf-gateway-card__name">
-                            <?php echo esc_html( $admin_label ); ?>
+                            <span class="wpuf-gateway-card__label"><?php echo esc_html( $admin_label ); ?></span>
                         </div>
                     </div>
                 <?php endforeach; ?>

assets/css/admin.css

@@ -676,7 +676,7 @@ tr.pro-preview .pro-field-overlay,
   top: 0;
   left: 0;
   display: none;
-  border: 1px dashed #10b981;
+  border: 1px dashed #059669;
 }
 tr.pro-preview-html th {
   width: 50%;
@@ -723,7 +723,7 @@ tr.pro-preview td .wp-picker-container input {
   background: rgba(236, 253, 245, 0.5);
   border-radius: 5px;
   display: none;
-  border: 1px dashed #10b981;
+  border: 1px dashed #059669;
   z-index: 10;
   pointer-events: auto;
 }
@@ -759,7 +759,7 @@ a.wpuf-button.button-upgrade-to-pro {
 }
 .wpuf-subscription-pack-settings nav .tab-current a.wpuf-button.button-upgrade-to-pro:hover,
 a.wpuf-button.button-upgrade-to-pro:hover {
-  background: #10b981;
+  background: #059669;
 }
 span.pro-icon {
   display: inline-flex;
@@ -782,12 +782,6 @@ span.pro-icon img {
   position: relative;
   top: -1px;
 }
-/* span.pro-icon.icon-white svg path {
-    fill: #fff;
-} */
-/* label span.pro-icon svg path {
-    fill: #10b981;
-} */
 img.profile-header,
 img.user-listing {
   display: block;
@@ -1526,18 +1520,14 @@ body.wpuf-modal-open {
   box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
 }
 .wpuf-gateway-card--active:hover {
-  border-color: #10b981;
+  border-color: #059669;
 }
 .wpuf-gateway-card--focused {
-  border-color: #10b981;
-  box-shadow: 0 0 0 1px #10b981;
+  border-color: #059669;
+  box-shadow: 0 0 0 1px #059669;
 }
 .wpuf-gateway-card--focused:hover {
-  border-color: #10b981;
-}
-.wpuf-gateway-card--pro-locked {
-  opacity: 0.6;
-  cursor: not-allowed;
+  border-color: #059669;
 }
 .wpuf-gateway-card__checkbox {
   position: absolute;
@@ -1546,30 +1536,6 @@ body.wpuf-modal-open {
   height: 0;
   pointer-events: none;
 }
-.wpuf-gateway-card__toggle {
-  position: absolute;
-  top: 4px;
-  right: 4px;
-  cursor: pointer;
-  line-height: 1;
-  padding: 4px;
-  z-index: 2;
-}
-.wpuf-gateway-card__toggle:hover {
-  opacity: 0.8;
-}
-.wpuf-gateway-card__check-on {
-  display: none;
-}
-.wpuf-gateway-card__check-off {
-  display: block;
-}
-.wpuf-gateway-card--active .wpuf-gateway-card__check-on {
-  display: block;
-}
-.wpuf-gateway-card--active .wpuf-gateway-card__check-off {
-  display: none;
-}
 .wpuf-gateway-card__icon {
   display: flex;
   align-items: center;

assets/css/admin/settings.css

@@ -0,0 +1,81 @@
+/* Gateway selector cards — settings-page sizing + brand SVG icons */
+.wpuf-gateway-card {
+    width: 140px !important;
+    padding: 18px 14px 14px !important;
+    border-width: 1px !important;
+}
+.wpuf-gateway-card:focus-visible {
+    outline: 2px solid #059669;
+    outline-offset: 2px;
+}
+.wpuf-gateway-card__icon {
+    height: 44px !important;
+    margin-bottom: 8px !important;
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: 56px auto !important;
+    overflow: visible;
+}
+.wpuf-gateway-card__name {
+    font-size: 13px !important;
+}
+
+/* Enable Gateway toggle switch (in per-gateway settings panel) */
+.wpuf-gateway-toggle {
+    position: relative;
+    display: inline-block;
+    width: 44px;
+    height: 24px;
+    vertical-align: middle;
+}
+.wpuf-gateway-toggle__input {
+    opacity: 0;
+    width: 0;
+    height: 0;
+    position: absolute;
+}
+.wpuf-gateway-toggle__slider {
+    position: absolute;
+    cursor: pointer;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: #ccc;
+    transition: background-color 0.2s ease;
+    border-radius: 24px;
+}
+.wpuf-gateway-toggle__slider::before {
+    position: absolute;
+    content: "";
+    height: 18px;
+    width: 18px;
+    left: 3px;
+    bottom: 3px;
+    background-color: #fff;
+    border-radius: 50%;
+    transition: transform 0.2s ease;
+}
+.wpuf-gateway-toggle__input:checked + .wpuf-gateway-toggle__slider {
+    background-color: #0073aa;
+}
+.wpuf-gateway-toggle__input:checked + .wpuf-gateway-toggle__slider::before {
+    transform: translateX(20px);
+}
+.wpuf-gateway-toggle__input:focus-visible + .wpuf-gateway-toggle__slider {
+    box-shadow: 0 0 0 2px rgba(0, 115, 170, 0.35);
+}
+.wpuf-gateway-card[data-gateway="paypal"] .wpuf-gateway-card__icon > *,
+.wpuf-gateway-card[data-gateway="bank"] .wpuf-gateway-card__icon > *,
+.wpuf-gateway-card[data-gateway="stripe"] .wpuf-gateway-card__icon > * {
+    display: none !important;
+}
+.wpuf-gateway-card[data-gateway="paypal"] .wpuf-gateway-card__icon {
+    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><rect width='512' height='512' rx='15%25' fill='%23ffffff'/><path fill='%23002c8a' d='M377 184.8L180.7 399h-72c-5 0-9-5-8-10l48-304c1-7 7-12 14-12h122c84 3 107 46 92 112z'/><path fill='%23009be1' d='M380.2 165c30 16 37 46 27 86-13 59-52 84-109 85l-16 1c-6 0-10 4-11 10l-13 79c-1 7-7 12-14 12h-60c-5 0-9-5-8-10l22-143c1-5 182-120 182-120z'/><path fill='%23001f6b' d='M197 292l20-127a14 14 0 0 1 13-11h96c23 0 40 4 54 11-5 44-26 115-128 117h-44c-5 0-10 4-11 10z'/></svg>");
+}
+.wpuf-gateway-card[data-gateway="bank"] .wpuf-gateway-card__icon {
+    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-5.76 -5.76 35.52 35.52' fill='none'><rect x='-5.76' y='-5.76' width='35.52' height='35.52' rx='17.76' fill='%23ffffff'/><path d='M22 19V22H2V19C2 18.45 2.45 18 3 18H21C21.55 18 22 18.45 22 19Z' fill='%23059669' stroke='%23059669' stroke-width='1.5' stroke-miterlimit='10' stroke-linecap='round' stroke-linejoin='round'/><path opacity='0.6' d='M8 11H4V18H8V11Z' fill='%23059669'/><path opacity='0.4' d='M12 11H8V18H12V11Z' fill='%23059669'/><path opacity='0.6' d='M16 11H12V18H16V11Z' fill='%23059669'/><path opacity='0.4' d='M20 11H16V18H20V11Z' fill='%23059669'/><path d='M23 22.75H1C0.59 22.75 0.25 22.41 0.25 22C0.25 21.59 0.59 21.25 1 21.25H23C23.41 21.25 23.75 21.59 23.75 22C23.75 22.41 23.41 22.75 23 22.75Z' fill='%23059669'/><path d='M21.37 5.74982L12.37 2.14984C12.17 2.06984 11.83 2.06984 11.63 2.14984L2.63 5.74982C2.28 5.88982 2 6.29981 2 6.67981V9.99982C2 10.5498 2.45 10.9998 3 10.9998H21C21.55 10.9998 22 10.5498 22 9.99982V6.67981C22 6.29981 21.72 5.88982 21.37 5.74982ZM12 8.49982C11.17 8.49982 10.5 7.82982 10.5 6.99982C10.5 6.16982 11.17 5.49982 12 5.49982C12.83 5.49982 13.5 6.16982 13.5 6.99982C13.5 7.82982 12.83 8.49982 12 8.49982Z' fill='%23059669'/></svg>");
+}
+.wpuf-gateway-card[data-gateway="stripe"] .wpuf-gateway-card__icon {
+    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23949494'><path d='M0 4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V4zm2.5 1a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h2a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5h-2zm0 3a.5.5 0 0 0 0 1h5a.5.5 0 0 0 0-1h-5zm0 2a.5.5 0 0 0 0 1h1a.5.5 0 0 0 0-1h-1zm3 0a.5.5 0 0 0 0 1h1a.5.5 0 0 0 0-1h-1zm3 0a.5.5 0 0 0 0 1h1a.5.5 0 0 0 0-1h-1zm3 0a.5.5 0 0 0 0 1h1a.5.5 0 0 0 0-1h-1z'/></svg>");
+}