From f72a214fa8a32d8f6ff3e0733b0251587ee80ec7 Mon Sep 17 00:00:00 2001
From: Brice Redmond <brice.redmond@branch.io>
Date: Mon, 16 Dec 2024 17:10:38 -0800
Subject: [PATCH] [other] [1/2] ENGMT-1983: improvements to the example page
 (#1103)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

# Pull Request Template

## Description

Updates a lot of the styling / look of the page to make it nicer to use.
I also added a convenience method enableTracking to the websdk. Finally
cleaned up a lot of stuff in the example.template.html

<img width="808" alt="Screenshot 2024-12-13 at 5 01 42 PM"
src="https://github.com/user-attachments/assets/cafc1432-d40f-4714-9ade-84e66ad8d4a7"
/>

<img width="901" alt="Screenshot 2024-12-13 at 5 01 33 PM"
src="https://github.com/user-attachments/assets/01768499-de40-43ce-869a-c83aefc55b8c"
/>

Next, i am thinking about what to do for the request and response stuff
at the top. I would love it if we could print out exactly what api
request happened but i need to think more about that

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.
---
 examples/example.template.html | 319 +++++++++++++++++----------------
 1 file changed, 160 insertions(+), 159 deletions(-)

diff --git a/examples/example.template.html b/examples/example.template.html
index 1cf93985..12bc1d5e 100644
--- a/examples/example.template.html
+++ b/examples/example.template.html
@@ -11,16 +11,11 @@
 		.btn {
 			margin-top: 5px;
 		}
+
 		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 {
@@ -191,36 +186,39 @@ <h4>Response</h4>
 		<section>
 			<div class="row col-lg-8 col-lg-offset-2">
 				<h3>Methods</h3>
+				<a>https://help.branch.io/developers-hub/docs/web-full-reference</a>
 				<hr>
-				<h4>Session and Identity</h4>
+				<h4>Session</h4>
 				<div class="group">
-					<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>
+					<button class="btn btn-info" onclick="callData()">.data()</button>
+					<button class="btn btn-info" onclick="callLogout()">Logout</button>
+					<button class="btn btn-info" onclick="callFirst()">.first()</button>
 				</div>
+				<h4>Identity</h4>
 				<div class="group">
 					<input class="example-input" type="text" id="identityID" placeholder="test@test.com">
-					<button id="setIdentity" class="btn btn-info">.setIdentity()</button>
+					<button id="setIdentity" class="btn btn-info" onclick="callSetIdentity()">Set Identity</button>
 				</div>
-			</div>
-			<div class="row col-lg-8 col-lg-offset-2">
-				<h4>Sharing and Tracking</h4>
+				<h4>Events</h4>
 				<div class="group">
-					<button id="track" class="btn btn-info">.logEvent()</button>
-					<button id="link" class="btn btn-info">.link()</button>
-					<button id="banner" class="btn btn-info">.banner()</button>
-					<button id="disable-tracking" class="btn btn-info">.disableTracking(true)</button>
-					<button id="enable-tracking" class="btn btn-info">.disableTracking(false)</button>
+					<button class="btn btn-info" onclick="callLogEvent('PURCHASE')">Create Standard Event</button>
+					<button class="btn btn-info" onclick="callLogEvent('testedCustomEvent')">Create Custom Event</button>
 				</div>
-			</div>
-			<div class="row col-lg-8 col-lg-offset-2">
-				<h4>QR Code</h4>
+				<h4>Sharing</h4>
+				<div class="group">
+					<button class="btn btn-info" onclick="callLink()">Create Link</button>
+					<button class="btn btn-info" onclick="callQrCode()">Create QrCode</button>
+					<button class="btn btn-info" onclick="callBanner()">.banner()</button>
+				</div>
+				<h4>Tracking</h4>
 				<div class="group">
-					<button id="qrCode" class="btn btn-info">.qrCode()</button>
+					<button class="btn btn-info" onclick="callDisableTracking()">Disable Tracking</button>
+					<button class="btn btn-info" onclick="callEnableTracking()">Enable Tracking</button>
 				</div>
 			</div>
 			<div class="row col-lg-8 col-lg-offset-2">
-				<h4>Api Settings</h4>
+				<h3>Api Settings</h3>
+				<hr>
 				<div class="group" id="configButtons"></div>
 
 				<label id="branchKeyLabel" for="branchKeyInput">Branch Key:</label>
@@ -265,9 +263,22 @@ <h4>Api Settings</h4>
 		});
 	</script>
 	<script type="text/javascript">
-		var request = $('#request');
-		var response = $('#response');
-		var sampleParams = {
+		function getInputVal(inputID) {
+			var inputElement = $(inputID);
+			if (!inputElement.val()) {
+				inputElement.parent().addClass('has-error');
+				return '';
+			}
+			else {
+				inputElement.parent().removeClass('has-error');
+			}
+			return DOMPurify.sanitize(inputElement.val());
+		}
+
+		const request = $('#request');
+		const response = $('#response');
+
+		const linkData = {
 			tags: [ 'tag1', 'tag2' ],
 			channel: 'sample app',
 			feature: 'create link',
@@ -281,155 +292,143 @@ <h4>Api Settings</h4>
 				'$og_image_url': 'http://branch.io/img/logo_icon_white.png'
 			}
 		};
-		var getInputVal = function(inputID) {
-			var inputElement = $(inputID);
-			if (!inputElement.val()) {
-				inputElement.parent().addClass('has-error');
-				return '';
-			}
-			else {
-				inputElement.parent().removeClass('has-error');
-			}
-			return DOMPurify.sanitize(inputElement.val());
-		};
-		$('#data').click(function() {
+
+		function callData() {
 			request.html('branch.data();');
 			branch.data(function(err, data) {
 				response.html(err || JSON.stringify(data));
 			});
-		});
-		$('#first').click(function() {
+		}
+
+		function callFirst() {
 			request.html('branch.first();');
 			branch.first(function(err, data) {
 				response.html(err || JSON.stringify(data));
 			});
-		});
-		$('#setIdentity').click(function() {
+		}
+
+		function callSetIdentity() {
 			const identity = getInputVal('#identityID');
 			request.text(`branch.setIdentity('${identity}');`);
 			branch.setIdentity(identity, function(err, data) {
 				response.text(err || JSON.stringify(data));
 			});
-		});
-		$('#logout').click(function() {
+		}
+
+		function callLogout() {
 			request.html('branch.logout();');
 			branch.logout(function(err, data) {
 				response.html(err || 'undefined');
 			});
-		});
-		$('#track').click(function() {
-			request.html('branch.logEvent(\' this event\');');
-			var event_and_custom_data = {
-   "transaction_id": "tras_Id_1232343434",
-   "currency": "USD",
-   "revenue": 180.2,
-   "shipping": 10.5,
-   "tax": 13.5,
-   "coupon": "promo-1234",
-   "affiliation": "high_fi",
-   "description": "Preferred purchase",
-   "purchase_loc": "Palo Alto",
-   "store_pickup": "unavailable"
-};
-
-var content_items = [
-{
-   "$content_schema": "COMMERCE_PRODUCT",
-   "$og_title": "Nike Shoe",
-   "$og_description": "Start loving your steps",
-   "$og_image_url": "http://example.com/img1.jpg",
-   "$canonical_identifier": "nike/1234",
-   "$publicly_indexable": false,
-   "$price": 101.2,
-   "$locally_indexable": true,
-   "$quantity": 1,
-   "$sku": "1101123445",
-   "$product_name": "Runner",
-   "$product_brand": "Nike",
-   "$product_category": "Sporting Goods",
-   "$product_variant": "XL",
-   "$rating_average": 4.2,
-   "$rating_count": 5,
-   "$rating_max": 2.2,
-   "$creation_timestamp": 1499892854966,
-   "$exp_date": 1499892854966,
-   "$keywords": [ "sneakers", "shoes" ],
-   "$address_street": "230 South LaSalle Street",
-   "$address_city": "Chicago",
-   "$address_region": "IL",
-   "$address_country": "US",
-   "$address_postal_code": "60604",
-   "$latitude": 12.07,
-   "$longitude": -97.5,
-   "$image_captions": [ "my_img_caption1", "my_img_caption_2" ],
-   "$condition": "NEW",
-   "$custom_fields": {"foo1":"bar1","foo2":"bar2"}
-},
-{
-   "$og_title": "Nike Woolen Sox",
-   "$canonical_identifier": "nike/5324",
-   "$og_description": "Fine combed woolen sox for those who love your foot",
-   "$publicly_indexable": false,
-   "$price": 80.2,
-   "$locally_indexable": true,
-   "$quantity": 5,
-   "$sku": "110112467",
-   "$product_name": "Woolen Sox",
-   "$product_brand": "Nike",
-   "$product_category": "Apparel & Accessories",
-   "$product_variant": "Xl",
-   "$rating_average": 3.3,
-   "$rating_count": 5,
-   "$rating_max": 2.8,
-   "$creation_timestamp": 1499892854966
-}];
-
-var customer_event_alias = "my custom alias";
-
-branch.logEvent(
-   "PURCHASE",
-   event_and_custom_data,
-   content_items,
-   customer_event_alias,
-   function(err) { response.html(err || 'no error'); }
-);
-		});
-		$('#link').click(function() {
-			request.html('branch.link(' + JSON.stringify(sampleParams) + ');');
-			branch.link(sampleParams, function(err, link) {
+		}
+
+		function callLogEvent(eventName) {
+			request.html(`See network tab`);
+			const eventAndCustomData = {
+				"transaction_id": "tras_Id_1232343434",
+				"currency": "USD",
+				"revenue": 180.2,
+				"shipping": 10.5,
+				"tax": 13.5,
+				"coupon": "promo-1234",
+				"affiliation": "high_fi",
+				"description": "Preferred purchase",
+				"purchase_loc": "Palo Alto",
+				"store_pickup": "unavailable"
+			};
+
+			const contentItems = [
+				{
+					"$content_schema": "COMMERCE_PRODUCT",
+					"$og_title": "Nike Shoe",
+					"$og_description": "Start loving your steps",
+					"$og_image_url": "http://example.com/img1.jpg",
+					"$canonical_identifier": "nike/1234",
+					"$publicly_indexable": false,
+					"$price": 101.2,
+					"$locally_indexable": true,
+					"$quantity": 1,
+					"$sku": "1101123445",
+					"$product_name": "Runner",
+					"$product_brand": "Nike",
+					"$product_category": "Sporting Goods",
+					"$product_variant": "XL",
+					"$rating_average": 4.2,
+					"$rating_count": 5,
+					"$rating_max": 2.2,
+					"$creation_timestamp": 1499892854966,
+					"$exp_date": 1499892854966,
+					"$keywords": [ "sneakers", "shoes" ],
+					"$address_street": "230 South LaSalle Street",
+					"$address_city": "Chicago",
+					"$address_region": "IL",
+					"$address_country": "US",
+					"$address_postal_code": "60604",
+					"$latitude": 12.07,
+					"$longitude": -97.5,
+					"$image_captions": [ "my_img_caption1", "my_img_caption_2" ],
+					"$condition": "NEW",
+					"$custom_fields": {"foo1":"bar1","foo2":"bar2"}
+				},
+				{
+					"$og_title": "Nike Woolen Sox",
+					"$canonical_identifier": "nike/5324",
+					"$og_description": "Fine combed woolen sox for those who love your foot",
+					"$publicly_indexable": false,
+					"$price": 80.2,
+					"$locally_indexable": true,
+					"$quantity": 5,
+					"$sku": "110112467",
+					"$product_name": "Woolen Sox",
+					"$product_brand": "Nike",
+					"$product_category": "Apparel & Accessories",
+					"$product_variant": "Xl",
+					"$rating_average": 3.3,
+					"$rating_count": 5,
+					"$rating_max": 2.8,
+					"$creation_timestamp": 1499892854966
+				}];
+
+			const customerEventAlias = "my custom alias";
+
+			branch.logEvent(
+					eventName,
+					eventAndCustomData,
+					contentItems,
+					customerEventAlias,
+					function(err) { response.html(err || 'no error'); }
+			);
+		}
+
+		function callLink() {
+			request.html('branch.link(' + JSON.stringify(linkData) + ');');
+			branch.link(linkData, function(err, link) {
 				response.html('<a href="' + link + '">' + link + '</a>');
 			});
-		});
-		$('#qrCode').click(function() {
-			var qrCodeSettings = {
-			        "code_color":"#000000",
-			        "background_color": "#FFFFFF",
-			        "margin": 5,
-			        "width": 1000,
-			        "image_format": "png",
-					"center_logo_url": "https://branch-assets.s3.us-west-1.amazonaws.com/branch-badge-dark.svg",
-			    };
-			var qrCodeParams = {
-				tags: [ 'tag1', 'tag2' ],
-				channel: 'sample app',
-				feature: 'create link',
-				stage: 'created link',
-				type: 1,
-				data: {
-					mydata: 'bar',
-					'$desktop_url': 'https://cdn.branch.io/example.html',
-					'$og_title': 'Branch Metrics',
-					'$og_description': 'Branch Metrics',
-					'$og_image_url': 'http://branch.io/img/logo_icon_white.png'
-				}
+		}
+
+		function callQrCode() {
+			const qrCodeSettings = {
+				"code_color":"#000000",
+				"background_color": "#FFFFFF",
+				"margin": 5,
+				"width": 1000,
+				"image_format": "png",
+				"center_logo_url": "https://branch-assets.s3.us-west-1.amazonaws.com/branch-badge-dark.svg",
 			};
-			branch.qrCode(qrCodeParams, qrCodeSettings, function(err, qrCode) {
+			const req = {
+				...linkData,
+				'qr_code_settings': qrCodeSettings,
+			}
+			request.html(`branch.qrCode('${JSON.stringify(req)}');`);
+			branch.qrCode(linkData, qrCodeSettings, function(err, qrCode) {
 				response.html('<img src="data:image/png;charset=utf-8;base64,' + qrCode.base64() + '" width="500" height="500">');
 			});
-		});
-		$('#banner').click(function() {
+		}
+
+		function callBanner() {
 			request.html(
-				'branch.banner({icon: ' +
+					'branch.banner({icon: ' +
 					'"http://icons.iconarchive.com/icons/wineass/ios7-redesign/512/Appstore-icon.png",' +
 					'title: "Branch Demo App",' +
 					'description: "The Branch demo app!",' +
@@ -458,22 +457,24 @@ <h4>Api Settings</h4>
 					disableHide: false, // false by default, just set here for an example
 					forgetHide: false // false by default, just set here for an example
 				}, // Banner Options
-				sampleParams // Link data or string of link
+				linkData // Link data or string of link
 			);
 			response.html('none');
-		});
-		$('#disable-tracking').click(function() {
+		}
+
+		function callDisableTracking() {
 			request.text('branch.disableTracking(true);');
 			branch.disableTracking(true, function() {
 				response.text('none');
 			});
-		});
-		$('#enable-tracking').click(function() {
+		}
+
+		function callEnableTracking() {
 			request.text('branch.disableTracking(false);');
 			branch.disableTracking(false, function() {
 				response.text('none');
 			});
-		});
+		}
 	</script>
 	<script src="https://cdnjs.cloudflare.com/ajax/libs/dompurify/2.4.3/purify.min.js" integrity="sha512-3dcbndbDLLWfKWevQu8C/1qVRcxx6h+eRDSnn3/pcBZHISRJgsj3u71U/Ad6nQVHrEi05hOSr6Hnb/p0pWc94w==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
 </body>