From 44308c9b3c29c6b53e6e27767409f393d41b13de Mon Sep 17 00:00:00 2001 From: Vahid Kay Date: Thu, 30 Jan 2025 15:46:27 +0000 Subject: [PATCH] Added the changes for managing UI --- js/fbe_allinone.js | 29 +++++++++++++++++++++++++++-- js/lib/fbe.js | 29 +++++++++++++++++++++++++++-- 2 files changed, 54 insertions(+), 4 deletions(-) diff --git a/js/fbe_allinone.js b/js/fbe_allinone.js index 36425e1d..a729709b 100644 --- a/js/fbe_allinone.js +++ b/js/fbe_allinone.js @@ -215,10 +215,12 @@ var FBEFlowContainer = React.createClass({ if(action != null && action === 'delete') { // Delete asset ids stored in db instance. _this.consoleLog("Successfully uninstalled FBE"); - _this.deleteFBAssets(); + _this.deleteFBAssets(); + _this.hideAdsPlugin(); }else if(action != null && action === 'create') { _this.saveSettings(pixelId, accessToken, window.facebookBusinessExtensionConfig.externalBusinessId); _this.setState({installed: 'true'}); + _this.showAdsPlugin(); } }else { _this.consoleLog("No response received after setup"); @@ -253,6 +255,7 @@ var FBEFlowContainer = React.createClass({ let msg = ''; if (response.success) { _this.setState({pixelId: pixelId}); + _this.showEventsManagerSection(pixelId); msg = "The Meta Pixel with ID: " + pixelId + " is now installed on your website."; } else { msg = "There was a problem saving the pixel. Please try again"; @@ -273,6 +276,7 @@ var FBEFlowContainer = React.createClass({ let msg = ''; if(data.success) { msg = data.message; + _this.hideEventsManagerSection(); }else { msg = data.error_message; } @@ -284,6 +288,12 @@ var FBEFlowContainer = React.createClass({ } }); }, + showAdsPlugin: function showAdsPlugin() { + jQuery("#meta-ads-plugin").show(); + }, + hideAdsPlugin: function hideAdsPlugin() { + jQuery("#meta-ads-plugin").hide(); + }, componentDidMount: function componentDidMount() { this.bindMessageEvents(); }, @@ -302,7 +312,8 @@ var FBEFlowContainer = React.createClass({ '&version='+window.facebookBusinessExtensionConfig.version+ '¤cy='+ window.facebookBusinessExtensionConfig.currency + '&business_name='+ window.facebookBusinessExtensionConfig.businessName + - '&channel=' + window.facebookBusinessExtensionConfig.channel; + '&channel=' + window.facebookBusinessExtensionConfig.channel + + '&hide_create_ad_button=' + true; }, render: function render() { var _this = this; @@ -318,6 +329,20 @@ var FBEFlowContainer = React.createClass({ } catch (err) { console.error(err); } + }, + hideEventsManagerSection: function hideEventsManagerSection() { + jQuery(".events-manager-wrapper").hide(); + jQuery('#ad-creation-plugin').hide(); + jQuery('#ad-insights-plugin').hide(); + jQuery("#fb-adv-conf").hide(); + jQuery(".events-manager-wrapper input#pixel-id").val(''); + }, + showEventsManagerSection: function showEventsManagerSection(pixelId) { + jQuery(".events-manager-wrapper").show(); + jQuery('#ad-creation-plugin').show(); + jQuery('#ad-insights-plugin').show(); + jQuery("#fb-adv-conf").show(); + jQuery(".events-manager-wrapper input#pixel-id").val(pixelId); } }); diff --git a/js/lib/fbe.js b/js/lib/fbe.js index 42c437ce..d036379a 100644 --- a/js/lib/fbe.js +++ b/js/lib/fbe.js @@ -77,10 +77,12 @@ var FBEFlowContainer = React.createClass({ if(action != null && action === 'delete') { // Delete asset ids stored in db instance. _this.consoleLog("Successfully uninstalled FBE"); - _this.deleteFBAssets(); + _this.deleteFBAssets(); + _this.hideAdsPlugin(); }else if(action != null && action === 'create') { _this.saveSettings(pixelId, accessToken, window.facebookBusinessExtensionConfig.externalBusinessId); _this.setState({installed: 'true'}); + _this.showAdsPlugin(); } }else { _this.consoleLog("No response received after setup"); @@ -115,6 +117,7 @@ var FBEFlowContainer = React.createClass({ let msg = ''; if (response.success) { _this.setState({pixelId: pixelId}); + _this.showEventsManagerSection(pixelId); msg = "The Meta Pixel with ID: " + pixelId + " is now installed on your website."; } else { msg = "There was a problem saving the pixel. Please try again"; @@ -135,6 +138,7 @@ var FBEFlowContainer = React.createClass({ let msg = ''; if(data.success) { msg = data.message; + _this.hideEventsManagerSection(); }else { msg = data.error_message; } @@ -146,6 +150,12 @@ var FBEFlowContainer = React.createClass({ } }); }, + showAdsPlugin: function showAdsPlugin() { + jQuery("#meta-ads-plugin").show(); + }, + hideAdsPlugin: function hideAdsPlugin() { + jQuery("#meta-ads-plugin").hide(); + }, componentDidMount: function componentDidMount() { this.bindMessageEvents(); }, @@ -164,7 +174,8 @@ var FBEFlowContainer = React.createClass({ '&version='+window.facebookBusinessExtensionConfig.version+ '¤cy='+ window.facebookBusinessExtensionConfig.currency + '&business_name='+ window.facebookBusinessExtensionConfig.businessName + - '&channel=' + window.facebookBusinessExtensionConfig.channel; + '&channel=' + window.facebookBusinessExtensionConfig.channel + + '&hide_create_ad_button=' + true; }, render: function render() { var _this = this; @@ -180,6 +191,20 @@ var FBEFlowContainer = React.createClass({ } catch (err) { console.error(err); } + }, + hideEventsManagerSection: function hideEventsManagerSection() { + jQuery(".events-manager-wrapper").hide(); + jQuery('#ad-creation-plugin').hide(); + jQuery('#ad-insights-plugin').hide(); + jQuery("#fb-adv-conf").hide(); + jQuery(".events-manager-wrapper input#pixel-id").val(''); + }, + showEventsManagerSection: function showEventsManagerSection(pixelId) { + jQuery(".events-manager-wrapper").show(); + jQuery('#ad-creation-plugin').show(); + jQuery('#ad-insights-plugin').show(); + jQuery("#fb-adv-conf").show(); + jQuery(".events-manager-wrapper input#pixel-id").val(pixelId); } });