[other] ENGMT-1985: updates to api connectivity (#1094)

# Pull Request Template

## Description

- Gives some predefined options for stage, stage_ac, prod, prod_ac like
the android and ios mobile apps
- Gives the option to specify your own endpoint
- Switches the default branch key for staging to the ones we are using
for the mobile apps
- Adds an error message if branch.init fails

<img width="1047" alt="Screenshot 2024-12-11 at 1 30 18 PM"
src="https://github.com/user-attachments/assets/1b688c9d-fef0-43c7-912a-ce433dfec9c2"
/>


Fixes # (issue)

## Type of change

Please delete options that are not relevant.

- [ ] Bug fix (non-breaking change which fixes an issue)
- [ ] New feature (non-breaking change which adds functionality)
- [ ] Breaking change (fix or feature that would cause existing
functionality to not work as expected)
- [ ] This change requires a documentation update

## How Has This Been Tested?

Please describe the tests that you ran to verify your changes. Provide
instructions so we can reproduce. Please also list any relevant details
for your test configuration

- [ ] Unit test
- [ ] Integration test

## JS Budget Check

Please mention the size in kb before abd after this PR

| Files            | Before      | After       | 
| -----------      | ----------- | ----------- |
| dist/build.js.   |             |             |
| dist/build.min.js|             |             |

## Checklist:

- [ ] My code follows the style guidelines of this project
- [ ] I have performed a self-review of my own code
- [ ] I have commented my code, particularly in hard-to-understand areas
- [ ] I have made corresponding changes to the documentation
- [ ] My changes generate no new warnings
- [ ] I have added tests that prove my fix is effective or that my
feature works
- [ ] New and existing unit tests pass locally with my changes
- [ ] Any dependent changes have been merged and published in downstream
modules
- [ ] I have checked my code and corrected any misspellings

## Mentions: 
List the person or team responsible for reviewing proposed changes.

cc @BranchMetrics/saas-sdk-devs for visibility.

deployment/deploy-qa.sh

@@ -21,8 +21,8 @@ NC='\033[0m'
   aws s3 cp --content-type="text/javascript" --content-encoding="gzip" dist/build.min.js.gz s3://branch-builds/web-sdk/branch-latest.min.js
   aws s3 cp --content-type="text/javascript" dist/build.js s3://branch-builds/web-sdk/branch.js
 
-  # Engagement Pro Staging Testing App - ID: 1359637087497768975
-  ./deployment/build-example-html.sh "key_live_bydNZt6LxLEPG6QHe9BY8gbgDFjikcY5" "https://api.stage.branch.io" "https://cdn.branch.io/branch-staging-latest.min.js"
+  # External services app - ID: 436637608899006753
+  ./deployment/build-example-html.sh "key_live_plqOidX7fW71Gzt0LdCThkemDEjCbTgx" "https://api.stage.branch.io" "https://cdn.branch.io/branch-staging-latest.min.js"
   aws s3 cp example.html s3://branch-cdn/example-staging.html
 
   echo -en "${GREEN}Pushing to CDN ...${NC}\n"

examples/example.template.html

@@ -5,27 +5,170 @@
 	<meta content="http://branch.io/img/logo_icon_black.png" property="og:image" />
 	<meta content="Branch Metrics Web SDK Example App" property="og:title" />
 	<meta content="A basic example to demonstrate some of the ways that the Web SDK can be used" property="og:description" />
-	<meta content='key_place_holder' name='branch_key'/>
 	<title>Branch Metrics Web SDK Example App</title>
 	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
 	<style type="text/css">
 		.btn {
 			margin-top: 5px;
 		}
-		.example-input {
-			width: 125px;
-			display: inline-block;
-			margin-top: 5px;
-			vertical-align: middle;
+		body {
+			font-family: Arial, sans-serif;
+			background-color: #f4f4f9;
+			color: #333;
+			margin: 0;
+			padding: 0;
+			display: flex;
+			justify-content: center;
+			align-items: center;
+			height: 100vh;
+		}
+
+		label {
+			display: block;
+			font-size: 14px;
+			margin-bottom: 6px;
+			font-weight: bold;
 		}
-		.radio-input {
-			margin-right: 10px !important;
-			margin-left: 20px !important;
+
+		.apiInput {
+			width: 100%;
+			padding: 10px;
+			margin-bottom: 15px;
+			border: 1px solid #ccc;
+			border-radius: 5px;
+			font-size: 14px;
+			outline: none;
+			box-sizing: border-box;
+			transition: border-color 0.3s ease, box-shadow 0.3s ease;
 		}
+
+		input:focus {
+			border-color: #007bff;
+			box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
+		}
+
 		.row {
 			margin-bottom: 30px;
 		}
+
+		#configButtons {
+			display: flex;
+			flex-wrap: wrap;
+			gap: 3px;
+			margin-bottom: 10px;
+		}
+
 	</style>
+	<script>
+		function getFinalValue(inputValue, documentKey) {
+			if (inputValue) return inputValue;
+			return document.getElementById(documentKey).value.trim();
+		}
+
+		function updateQueryParams(branchKey, apiUrl, script) {
+			let finalBranchKey = getFinalValue(branchKey,'branchKeyInput');
+			let finalApiUrl = getFinalValue(apiUrl,'apiUrlInput');
+
+			if (!finalBranchKey && !finalApiUrl) {
+				alert('Please provide at least one value to update.');
+				return;
+			}
+
+			const url = new URL(window.location.href);
+			if (finalBranchKey) url.searchParams.set('branch_key', finalBranchKey);
+			if (finalApiUrl) url.searchParams.set('api_url', finalApiUrl);
+
+			window.location.href = url.toString();
+		}
+
+		function getBranchKey() {
+			const queryParams = getQueryParams();
+			return queryParams['branch_key'] || "key_place_holder"
+		}
+
+		function getApiUrlLocal() {
+			const queryParams = getQueryParams();
+			return queryParams['api_url'] || "api_place_holder"
+		}
+
+		function getBranchScript() {
+			return "script_place_holder"
+		}
+
+		function getQueryParams() {
+			const params = new URLSearchParams(window.location.search);
+			const queryParams = {};
+			for (const [key, value] of params.entries()) {
+				queryParams[key] = value;
+			}
+			return queryParams;
+		}
+
+		function setLabelText() {
+			const keyLabel = document.getElementById('branchKeyLabel');
+			keyLabel.textContent = `Branch Key: ${getBranchKey()}`;
+
+			const apiLabel = document.getElementById('apiUrlLabel');
+			apiLabel.textContent = `Api Url: ${getApiUrlLocal()}`;
+		}
+
+		function onLoad() {
+			generateConfigButtons()
+			setLabelText();
+		}
+
+		window.onload = onLoad;
+	</script>
+	<script>
+		const STAGING = "Staging"
+		const PRODUCTION = "Production"
+		const STAGING_AC = "Staging AC"
+		const PRODUCTION_AC = "Production AC"
+		const apiConfigurations = {
+			STAGING_AC: {
+				name: STAGING_AC,
+				branchKey: "key_live_juoZrlpzQZvBQbwR33GO5hicszlTGnVT",
+				apiUrl: "https://protected-api.stage.branch.io",
+				appId: "1387589751543976586",
+			},
+			STAGING: {
+				name: STAGING,
+				branchKey: "key_live_plqOidX7fW71Gzt0LdCThkemDEjCbTgx",
+				apiUrl: "https://api.stage.branch.io",
+				appId: "436637608899006753",
+			},
+			PRODUCTION_AC: {
+				name: PRODUCTION_AC,
+				branchKey: "key_live_hshD4wiPK2sSxfkZqkH30ggmyBfmGmD7",
+				apiUrl: "https://protected-api.branch.io",
+				appId: "1284289243903971463",
+			},
+			PRODUCTION: {
+				name: PRODUCTION,
+				branchKey: "key_live_iDiV7ZewvDm9GIYxUnwdFdmmvrc9m3Aw",
+				apiUrl: "https://api3.branch.io",
+				appId: "1364964166783226677",
+			},
+		};
+
+		function generateConfigButtons() {
+			const configButtonsContainer = document.getElementById('configButtons');
+
+			Object.keys(apiConfigurations).forEach(key => {
+				const config = apiConfigurations[key];
+				const button = document.createElement('button');
+				button.classList.add('btn', 'btn-info');
+				button.textContent = `${config.name}`;
+
+				button.onclick = () => {
+					updateQueryParams(config.branchKey, config.apiUrl);
+				};
+
+				configButtonsContainer.appendChild(button);
+			});
+		}
+
+	</script>
 </head>
 
 <body>
@@ -36,7 +179,7 @@ <h2>Branch Metrics Web SDK Example</h2>
 		<section>
 			<div class="row col-lg-8 col-lg-offset-2">
 				<h4>Session Info</h4>
-				<pre id="info">Reading session from .init()...</pre>
+				<pre id="session-info">Reading session from .init()...</pre>
 				<br>
 				<h4>Request</h4>
 				<pre id="request">Click a button!</pre>
@@ -51,12 +194,13 @@ <h3>Methods</h3>
 				<hr>
 				<h4>Session and Identity</h4>
 				<div class="group">
-					<button id="init" class="btn btn-success">.init()</button>
 					<button id="data" class="btn btn-info">.data()</button>
+					<button id="logout" class="btn btn-info">.logout()</button>
 					<button id="first" class="btn btn-info">.first()</button>
-					<input class="example-input" type="text" id="identityID" class="form-control" placeholder="[email protected]">
+				</div>
+				<div class="group">
+					<input class="example-input" type="text" id="identityID" placeholder="[email protected]">
 					<button id="setIdentity" class="btn btn-info">.setIdentity()</button>
-					<button id="logout" class="btn btn-info">.logout()</button>
 				</div>
 			</div>
 			<div class="row col-lg-8 col-lg-offset-2">
@@ -76,14 +220,26 @@ <h4>QR Code</h4>
 				</div>
 			</div>
 			<div class="row col-lg-8 col-lg-offset-2">
+				<h4>Api Settings</h4>
+				<div class="group" id="configButtons"></div>
+
+				<label id="branchKeyLabel" for="branchKeyInput">Branch Key:</label>
+				<input type="text" id="branchKeyInput" class="apiInput">
+				<br>
+				<label id="apiUrlLabel" for="apiUrlInput">Api Url:</label>
+				<input type="text" id="apiUrlInput" class="apiInput">
+				<br>
+				<button class="btn btn-info" onclick="updateQueryParams()">
+					Update Api Settings
+				</button>
 			</div>
 		</section>
 	</div>
 	<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
 	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
 	<script type="text/javascript">
-		(function(b,r,a,n,c,h,_,s,d,k){if(!b[n]||!b[n]._q){for(;s<_.length;)c(h,_[s++]);d=r.createElement(a);d.async=1;d.src="script_place_holder";k=r.getElementsByTagName(a)[0];k.parentNode.insertBefore(d,k);b[n]=h}})(window,document,"script","branch",function(b,r){b[r]=function(){b._q.push([r,arguments])}},{_q:[],_v:1},"addListener banner closeBanner closeJourney data deepview deepviewCta first init link logout removeListener setBranchViewData setIdentity track trackCommerceEvent logEvent disableTracking getBrowserFingerprintId crossPlatformIds lastAttributedTouchData setAPIResponseCallback qrCode setRequestMetaData setAPIUrl getAPIUrl setDMAParamsForEEA".split(" "), 0);
-		branch.setAPIUrl("api_place_holder")
+		(function(b,r,a,n,c,h,_,s,d,k){if(!b[n]||!b[n]._q){for(;s<_.length;)c(h,_[s++]);d=r.createElement(a);d.async=1;d.src=getBranchScript();k=r.getElementsByTagName(a)[0];k.parentNode.insertBefore(d,k);b[n]=h}})(window,document,"script","branch",function(b,r){b[r]=function(){b._q.push([r,arguments])}},{_q:[],_v:1},"addListener banner closeBanner closeJourney data deepview deepviewCta first init link logout removeListener setBranchViewData setIdentity track trackCommerceEvent logEvent disableTracking getBrowserFingerprintId crossPlatformIds lastAttributedTouchData setAPIResponseCallback qrCode setRequestMetaData setAPIUrl getAPIUrl setDMAParamsForEEA".split(" "), 0);
+		branch.setAPIUrl(getApiUrlLocal())
 
 		branch.setAPIResponseCallback(function(url, method, requestBody, error, status, responseBody) {
 			console.log('Request: ' + method + ' ' + url + ' body=' + JSON.stringify(requestBody));
@@ -96,9 +252,16 @@ <h4>QR Code</h4>
 		});
 
 		// Take the Branch key from a meta tag
-		branch.init($('meta[name="branch_key"]').attr('content'), function(err, data) {
+		branch.init(getBranchKey(), function(err, data) {
 			// Avoid XSS by HTML escaping the data for display
-			$('#info').text(JSON.stringify(data));
+			$('#session-info').text(JSON.stringify(data));
+			if (err) {
+				let alertMessage = err.message;
+				if (getApiUrlLocal().includes('stage')) {
+					alertMessage += ". Are you connected to VPN?";
+				}
+				alert(alertMessage);
+			}
 		});
 	</script>
 	<script type="text/javascript">
@@ -129,13 +292,6 @@ <h4>QR Code</h4>
 			}
 			return DOMPurify.sanitize(inputElement.val());
 		};
-		$('#init').click(function() {
-			request.html('branch.init();');
-			// Take the Branch key from a meta tag
-			branch.init($('meta[name="branch_key"]').attr('content'), function(err, data) {
-				response.html(err || JSON.stringify(data));
-			});
-		});
 		$('#data').click(function() {
 			request.html('branch.data();');
 			branch.data(function(err, data) {
@@ -149,8 +305,8 @@ <h4>QR Code</h4>
 			});
 		});
 		$('#setIdentity').click(function() {
-			var identity = getInputVal('#identityID');
-			request.text("branch.setIdentity('" + identity + "');");
+			const identity = getInputVal('#identityID');
+			request.text(`branch.setIdentity('${identity}');`);
 			branch.setIdentity(identity, function(err, data) {
 				response.text(err || JSON.stringify(data));
 			});

startDev.js

@@ -5,8 +5,8 @@ const serve = require('koa-static');
 const path = require('path');
 
 const defaultDev = {
-    "APIEndpoint": "https://api2.branch.io",
-    "sdkKey": null,
+    "APIEndpoint": "https://api.stage.branch.io",
+    "sdkKey": 'key_live_plqOidX7fW71Gzt0LdCThkemDEjCbTgx',
     "port": "3000"
 };