Remove live preview and generate JS configuration on backend

- Remove Advanced Configuration section from admin UI
- Remove all live preview functionality from admin.js
- Update config endpoint to generate complete HTML script tags
- Include SDK loading and configuration in generated script
- Remove duplicate order tracking (already handled by Frak_WooCommerce)
- Clean up unused custom_config option handling
- Update frontend to load complete script from endpoint

The JS is now generated entirely on the backend, similar to the PrestaShop plugin implementation.

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>

Author: KONFeature

admin/class-frak-admin.php

@@ -36,11 +36,6 @@ public function add_admin_menu() {
     public function register_settings() {
         register_setting('frak_settings', 'frak_app_name');
         register_setting('frak_settings', 'frak_logo_url');
-        register_setting('frak_settings', 'frak_custom_config', array(
-            'sanitize_callback' => function($input) {
-                return stripslashes($input);
-            }
-        ));
         register_setting('frak_settings', 'frak_enable_purchase_tracking');
         register_setting('frak_settings', 'frak_enable_floating_button');
         register_setting('frak_settings', 'frak_show_reward');
@@ -178,7 +173,6 @@ private function save_settings() {
             }
         }
 
-        $custom_config = stripslashes($_POST['frak_custom_config']);
         $enable_tracking = isset($_POST['frak_enable_purchase_tracking']) ? 1 : 0;
         $enable_button = isset($_POST['frak_enable_floating_button']) ? 1 : 0;
         $show_reward = isset($_POST['frak_show_reward']) ? 1 : 0;
@@ -196,7 +190,6 @@ private function save_settings() {
 
         update_option('frak_app_name', $app_name);
         update_option('frak_logo_url', $logo_url);
-        update_option('frak_custom_config', $custom_config);
         update_option('frak_enable_purchase_tracking', $enable_tracking);
         update_option('frak_enable_floating_button', $enable_button);
         update_option('frak_show_reward', $show_reward);
@@ -219,7 +212,6 @@ private function render_settings_page() {
 
         $app_name = get_option('frak_app_name', $default_app_name);
         $logo_url = get_option('frak_logo_url', $default_logo_url);
-        $custom_config = get_option('frak_custom_config', '');
         // Auto-enable WooCommerce tracking if WooCommerce is active and setting hasn't been configured yet
         $enable_tracking_option = get_option('frak_enable_purchase_tracking', null);
         if ($enable_tracking_option === null && class_exists('WooCommerce')) {
@@ -235,10 +227,6 @@ private function render_settings_page() {
         $modal_language = get_option('frak_modal_language', 'default');
         $modal_i18n = json_decode(get_option('frak_modal_i18n', '{}'), true);
 
-        if (empty($custom_config)) {
-            $custom_config = $this->get_default_config($app_name, $logo_url);
-        }
-        
         include FRAK_PLUGIN_DIR . 'admin/views/settings-page.php';
     }
 
@@ -263,66 +251,6 @@ private function get_site_icon_url() {
         return '';
     }
 
-    private function get_default_config($app_name, $logo_url) {
-        $modal_language = get_option('frak_modal_language', 'default');
-        $floating_button_position = get_option('frak_floating_button_position', 'right');
-        $modal_i18n = get_option('frak_modal_i18n', '{}');
-        
-        // Handle language setting
-        $lang_code = $modal_language === 'default' ? 'undefined' : "'{$modal_language}'";
-        
-        return <<<JS
-let logoUrl = '{$logo_url}';
-const lang = {$lang_code};
-
-let i18n = {};
-try {
-    i18n = JSON.parse('{$modal_i18n}'.replace(
-        /&amp;|&lt;|&gt;|&#39;|&quot;/g,
-        tag =>
-          ({
-            '&amp;': '&',
-            '&lt;': '<',
-            '&gt;': '>',
-            '&#39;': "'",
-            '&quot;': '"'
-          }[tag] || tag)
-    )) || {};
-} catch (error) {
-    console.error('Error parsing i18n customizations:', error);
-}
-
-window.FrakSetup = {
-    config: { 
-        walletUrl: 'https://wallet.frak.id', 
-        metadata: { 
-            name: '{$app_name}', 
-            lang, 
-            logoUrl 
-        }, 
-        customizations: { i18n }, 
-        domain: window.location.host 
-    },
-    modalConfig: { 
-        login: { 
-            allowSso: true, 
-            ssoMetadata: { 
-                logoUrl, 
-                homepageLink: window.location.host 
-            } 
-        } 
-    },
-    modalShareConfig: { 
-        link: window.location.href 
-    },
-    modalWalletConfig: { 
-        metadata: { 
-            position: '{$floating_button_position}' 
-        } 
-    },
-};
-JS;
-    }
 
     private function handle_logo_upload($file) {
         // Check file type

admin/css/admin.css

@@ -131,11 +131,6 @@
     color: #dc3232;
 }
 
-/* Advanced configuration textarea */
-#frak_custom_config {
-    background: #f0f0f1;
-    border: 1px solid #8c8f94;
-}
 
 /* Button spacing */
 .button + .button {

admin/js/admin.js

@@ -1,91 +1,4 @@
 jQuery(document).ready(function($) {
-    var editor;
-    
-    // Initialize code editor if available
-    if (typeof wp.codeEditor !== 'undefined' && $('#frak_custom_config').length) {
-        var editorSettings = wp.codeEditor.defaultSettings ? _.clone(wp.codeEditor.defaultSettings) : {};
-        editorSettings.codemirror = _.extend({}, editorSettings.codemirror, {
-            indentUnit: 4,
-            tabSize: 4,
-            mode: 'javascript',
-            lineNumbers: true,
-            matchBrackets: true,
-            autoCloseBrackets: true,
-            extraKeys: {"Ctrl-Space": "autocomplete"},
-            theme: 'default'
-        });
-        editor = wp.codeEditor.initialize($('#frak_custom_config'), editorSettings);
-    }
-    
-    // Update config function
-    function updateConfig() {
-        if (!editor) return;
-        
-        var appName = $('#frak_app_name').val();
-        var logoUrl = $('#frak_logo_url').val();
-        var position = $('#frak_floating_button_position').val();
-        var modalLang = $('#frak_modal_language').val();
-        var currentConfig = editor.codemirror.getValue();
-        
-        // Collect i18n values
-        var i18nValues = {};
-        $('.frak-i18n-table input').each(function() {
-            var $input = $(this);
-            var key = $input.attr('name').replace('frak_modal_i18n[', '').replace(']', '');
-            var value = $input.val();
-            if (value) {
-                i18nValues[key] = value;
-            }
-        });
-        
-        // Update app name
-        currentConfig = currentConfig.replace(
-            /(metadata:\s*{\s*name:\s*")[^"]*(")/,
-            '$1' + appName + '$2'
-        );
-        
-        // Update logo URL - both in let declaration and in objects
-        currentConfig = currentConfig.replace(
-            /(let logoUrl = ')[^']*(')/,
-            '$1' + logoUrl + '$2'
-        );
-        
-        // Update language - handle both string and variable format
-        if (modalLang === 'default') {
-            // Replace with undefined (variable)
-            currentConfig = currentConfig.replace(
-                /(const lang = )[^;]+/,
-                '$1undefined'
-            );
-        } else {
-            // Replace with quoted string
-            currentConfig = currentConfig.replace(
-                /(const lang = )[^;]+/,
-                "$1'" + modalLang + "'"
-            );
-        }
-        
-        // Update i18n object
-        var i18nJson = JSON.stringify(i18nValues, null, 0);
-        // Find the i18n parsing section and update it
-        var i18nMatch = currentConfig.match(/let i18n = {};\s*try {[\s\S]*?} catch/);
-        if (i18nMatch) {
-            // Replace the entire i18n section
-            var newI18nSection = "let i18n = {};\ntry {\n    i18n = JSON.parse('" + 
-                i18nJson.replace(/'/g, "\\'") + 
-                "'.replace(\n        /&amp;|&lt;|&gt;|&#39;|&quot;/g,\n        tag =>\n          ({\n            '&amp;': '&',\n            '&lt;': '<',\n            '&gt;': '>',\n            '&#39;': \"'\",\n            '&quot;': '"'\n          }[tag] || tag)\n    )) || {};\n} catch";
-            currentConfig = currentConfig.replace(/let i18n = {};\s*try {[\s\S]*?} catch/, newI18nSection);
-        }
-        
-        // Update floating button position
-        currentConfig = currentConfig.replace(
-            /(modalWalletConfig:\s*{[\s\S]*?metadata:\s*{[\s\S]*?position:\s*")[^"]*(")/,
-            '$1' + position + '$2'
-        );
-        
-        editor.codemirror.setValue(currentConfig);
-    }
-    
     // Toggle floating button settings
     function toggleFloatingButtonSettings() {
         var enabled = $('#frak_enable_floating_button').is(':checked');
@@ -140,14 +53,10 @@ jQuery(document).ready(function($) {
     });
 
     // Bind events
-    $('#frak_app_name, #frak_logo_url, #frak_floating_button_position, #frak_modal_language').on('input change', updateConfig);
     $('#frak_enable_floating_button').on('change', toggleFloatingButtonSettings);
     $('#frak_logo_file').on('change', handleLogoFileSelect);
     $('#frak_logo_url').on('input', handleLogoUrlChange);
 
-    // Bind i18n input events
-    $('.frak-i18n-table input').on('input', updateConfig);
-    
     // Initialize toggles
     toggleFloatingButtonSettings();
 

admin/views/settings-page.php

@@ -186,16 +186,6 @@ class="regular-text"></td>
                 </table>
             </div>
         </div>
-        
-        <!-- Advanced Configuration Section -->
-        <div class="frak-section">
-            <h2>Advanced Configuration</h2>
-            <p>Customize your Frak configuration below:</p>
-            <textarea id="frak_custom_config" name="frak_custom_config" 
-                      style="width: 100%; height: 400px; font-family: monospace;"
-            ><?php echo $custom_config; ?></textarea>
-        </div>
-        
         <!-- Purchase Tracking Section -->
         <div class="frak-section">
             <h2>Purchase Tracking</h2>