ref #72067

Adding pop-up windows to view loyalty program terms and conditions

resources/pot/retailcrm-ru_RU.pot

@@ -555,3 +555,6 @@ msgstr "Ошибка при активации программы лояльно
 
 msgid "Enter the correct phone number"
 msgstr "Введите корректный номер телефона"
+
+msgid "Close"
+msgstr "Закрыть"

src/assets/css/retailcrm-loyalty-style.css

@@ -0,0 +1,34 @@
+.popup-fade-loyalty {
+    display: none;
+}
+.popup-fade-loyalty:before {
+    content: '';
+    background: #000;
+    position: fixed;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    opacity: 0.7;
+    z-index: 9999;
+}
+.popup-loyalty {
+    position: fixed;
+    top: 20%;
+    left: 50%;
+    padding: 20px;
+    width: 1000px;
+    margin-left: -500px;
+    height: 50%;
+    background: #fff;
+    border: 1px solid orange;
+    border-radius: 4px;
+    z-index: 99999;
+    opacity: 1;
+    overflow: auto;
+}
+.popup-close-loyalty {
+    position: absolute;
+    top: 10px;
+    right: 10px;
+}

src/assets/js/retailcrm-loyalty-actions.js

@@ -79,4 +79,33 @@ jQuery(function() {
 
         event.preventDefault();
     });
+
+    jQuery('.popup-open-loyalty').click(function() {
+        if (jQuery(this).attr('id') === 'terms-popup') {
+            jQuery('#popup-loyalty-text').html(termsLoyalty);
+        } else {
+            jQuery('#popup-loyalty-text').html(privacyLoyalty);
+        }
+
+        jQuery('.popup-fade-loyalty').fadeIn();
+        return false;
+    });
+
+    jQuery('.popup-close-loyalty').click(function() {
+        jQuery(this).parents('.popup-fade-loyalty').fadeOut();
+        return false;
+    });
+
+    jQuery(document).keydown(function(e) {
+        if (e.keyCode === 27) {
+            e.stopPropagation();
+            jQuery('.popup-fade-loyalty').fadeOut();
+        }
+    });
+
+    jQuery('.popup-fade-loyalty').click(function(e) {
+        if (jQuery(e.target).closest('.popup-loyalty').length == 0) {
+            jQuery(this).fadeOut();
+        }
+    });
 });

src/include/class-wc-retailcrm-base.php

@@ -109,7 +109,6 @@ if (!class_exists('WC_Retailcrm_Base')) {
             add_action('init', [$this, 'add_loyalty_endpoint'], 11, 1);
             add_action('woocommerce_account_menu_items', [$this, 'add_loyalty_item'], 11, 1);
             add_action('woocommerce_account_loyalty_endpoint', [$this, 'show_loyalty'], 11, 1);
-            /*add_action('woocommerce_account_')*/
 
             // Subscribed hooks
             add_action('register_form', [$this, 'subscribe_register_form'], 99);
@@ -898,6 +897,7 @@ if (!class_exists('WC_Retailcrm_Base')) {
             $jsScript = 'retailcrm-loyalty-actions';
             $loyaltyUrl = ['url' => get_admin_url()];
             $jsScriptsPath =  plugins_url() . '/woo-retailcrm/assets/js/';
+            $cssPath = plugins_url() . '/woo-retailcrm/assets/css/';
             $messagePhone = __('Enter the correct phone number', 'retailcrm');
 
             wp_register_script($jsScript, $jsScriptsPath . $jsScript . '.js', false, '0.1');
@@ -905,6 +905,11 @@ if (!class_exists('WC_Retailcrm_Base')) {
             wp_localize_script($jsScript, 'LoyaltyUrl', $loyaltyUrl);
             wp_localize_script($jsScript, 'customerId', $userId);
             wp_localize_script($jsScript, 'messagePhone', $messagePhone);
+            wp_localize_script($jsScript, 'termsLoyalty', $this->settings['loyalty_terms']);
+            wp_localize_script($jsScript, 'privacyLoyalty',  $this->settings['loyalty_personal']);
+
+            wp_register_style('retailcrm-loyalty-style', $cssPath . 'retailcrm-loyalty-style.css', false, '0.1');
+            wp_enqueue_style('retailcrm-loyalty-style');
 
             $result = $this->loyalty->getForm($userId);
 
@@ -916,6 +921,7 @@ if (!class_exists('WC_Retailcrm_Base')) {
             }
         }
 
+
         /**
          * Get custom fields with CRM
          *

src/include/class-wc-retailcrm-loyalty.php

@@ -74,18 +74,27 @@ if (!class_exists('WC_Retailcrm_Loyalty')) :
                     '
                     <form id="loyaltyRegisterForm" method="post">
                         <p>%s</p>
-                        <p><input type="checkbox" name="terms" id="termsLoyalty" required>%s<a href="terms.html">%s</a>.</p>
-                        <p><input type="checkbox" name="privacy" id="privacyLoyalty" required>%s<a href="privacy.html">%s</a>.</p>
+                        <p><input type="checkbox" name="terms" id="termsLoyalty" required>%s<a id="terms-popup" class="popup-open-loyalty" href="#">%s</a>.</p>
+                        <p><input type="checkbox" name="privacy" id="privacyLoyalty" required>%s<a id="privacy-popup" class="popup-open-loyalty" href="#">%s</a>.</p>
                         <p><input type="text" name="phone" id="phoneLoyalty" placeholder="%s" required></p>
                         <p><input type="submit" value="%s"></p>
-                    </form>',
+                    </form>
+                    <div class="popup-fade-loyalty">
+                        <div class="popup-loyalty">
+                            <a class="popup-close-loyalty" href="#">%s</a>
+                            <br>
+                            <div id="popup-loyalty-text"></div>
+                        </div>		
+                    </div>
+                    ',
                     __('To register in the loyalty program, fill in the form:', 'retailcrm'),
                     __(' I agree with ', 'retailcrm'),
                     __('loyalty program terms', 'retailcrm'),
                     __(' I agree with ', 'retailcrm'),
                     __('terms of personal data processing', 'retailcrm'),
                     __('Phone', 'retailcrm'),
-                    __('Send', 'retailcrm')
+                    __('Send', 'retailcrm'),
+                    __('Close', 'retailcrm')
                 );
             }