From 5d6a208a77c2f77a2b3e57a87ef4564a113962fd Mon Sep 17 00:00:00 2001
From: anamotaadyen <ana.mota@adyen.com>
Date: Thu, 6 Oct 2022 16:59:35 +0100
Subject: [PATCH] working dynamic css

---
 app/static/css/application.css        | 19 +++++++++++++++
 app/static/js/adyen-implementation.js | 34 +++++++++++++++++++++++----
 app/templates/component.html          |  9 ++++---
 3 files changed, 54 insertions(+), 8 deletions(-)

diff --git a/app/static/css/application.css b/app/static/css/application.css
index 53387f8..5d8101a 100644
--- a/app/static/css/application.css
+++ b/app/static/css/application.css
@@ -623,5 +623,24 @@ a:hover {
 		-moz-transform: rotateY(0deg);
 	}
 
+	/* :root {
+		--back-rotate : rotateY(0deg);
+		--back-tran: rotateY(0deg);
+		--front-rotate: rotateY(180deg);
+		--front-tran: rotateY(180deg);
+	} */
+
+	:root {
+		--background-color: purple;
+	}
+
+	.test {
+		background: var(--background-color);
+	}
+
+
+	.adyen-checkout__button {
+		background: var(--background-color) !important;
+	}
 	/* Copy button */
 	
diff --git a/app/static/js/adyen-implementation.js b/app/static/js/adyen-implementation.js
index a88a609..2c50305 100644
--- a/app/static/js/adyen-implementation.js
+++ b/app/static/js/adyen-implementation.js
@@ -72,12 +72,14 @@ function changeSelect(el) {
 		const newDiv =  document.createElement('div');
 		oldDiv.replaceWith(newDiv)
 		newDiv.setAttribute("id", "dropin-container");
+		newDiv.setAttribute("class", "payment p-5")
 		initCheckout()
 	} else if (document.getElementById("dropin-container")) {
 		const oldDiv = document.getElementById("dropin-container");
 		const newDiv =  document.createElement('div');
 		oldDiv.replaceWith(newDiv)
 		newDiv.setAttribute("id", "dropin-container");
+		newDiv.setAttribute("class", "payment p-5")
 		initCheckout()
 	}
 }
@@ -108,6 +110,7 @@ document.getElementById('firstPayBox').parentNode.addEventListener('click', func
 		openFirst = true
 		oldDiv.replaceWith(newDiv)
 		newDiv.setAttribute("id", "dropin-container")
+		newDiv.setAttribute("class", "payment p-5")
 		initCheckout()
 	}
 	else {
@@ -116,6 +119,7 @@ document.getElementById('firstPayBox').parentNode.addEventListener('click', func
 		openFirst = false
 		oldDiv.replaceWith(newDiv)
 		newDiv.setAttribute("id", "dropin-container")
+		newDiv.setAttribute("class", "payment p-5")
 		initCheckout()
 	}
   })
@@ -130,6 +134,7 @@ document.getElementById('billAdd').parentNode.addEventListener('click', function
 		billAdd = true
 		oldDiv.replaceWith(newDiv)
 		newDiv.setAttribute("id", "dropin-container")
+		newDiv.setAttribute("class", "payment p-5")
 		initCheckout()
 	}
 	else {
@@ -138,6 +143,7 @@ document.getElementById('billAdd').parentNode.addEventListener('click', function
 		billAdd = false
 		oldDiv.replaceWith(newDiv)
 		newDiv.setAttribute("id", "dropin-container")
+		newDiv.setAttribute("class", "payment p-5")
 		initCheckout()
 	}
   })
@@ -153,6 +159,7 @@ document.getElementById('onlyStored').parentNode.addEventListener('click', funct
 		onlyStored = false
 		oldDiv.replaceWith(newDiv)
 		newDiv.setAttribute("id", "dropin-container")
+		newDiv.setAttribute("class", "payment p-5")
 		initCheckout()
 	}
 	else {
@@ -161,6 +168,7 @@ document.getElementById('onlyStored').parentNode.addEventListener('click', funct
 		onlyStored = true
 		oldDiv.replaceWith(newDiv)
 		newDiv.setAttribute("id", "dropin-container")
+		newDiv.setAttribute("class", "payment p-5")
 		initCheckout()
 	}
   })
@@ -175,6 +183,7 @@ document.getElementById('holderName').parentNode.addEventListener('click', funct
 		holderName = true
 		oldDiv.replaceWith(newDiv)
 		newDiv.setAttribute("id", "dropin-container")
+		newDiv.setAttribute("class", "payment p-5")
 		initCheckout()
 	}
 	else {
@@ -183,6 +192,7 @@ document.getElementById('holderName').parentNode.addEventListener('click', funct
 		holderName = false
 		oldDiv.replaceWith(newDiv)
 		newDiv.setAttribute("id", "dropin-container")
+		newDiv.setAttribute("class", "payment p-5")
 		initCheckout()
 	}
   })
@@ -198,6 +208,7 @@ document.getElementById('showPayMethod').parentNode.addEventListener('click', fu
 		showPayMethod = false
 		oldDiv.replaceWith(newDiv)
 		newDiv.setAttribute("id", "dropin-container")
+		newDiv.setAttribute("class", "payment p-5")
 		initCheckout()
 	}
 	else {
@@ -206,6 +217,7 @@ document.getElementById('showPayMethod').parentNode.addEventListener('click', fu
 		showPayMethod = true
 		oldDiv.replaceWith(newDiv)
 		newDiv.setAttribute("id", "dropin-container")
+		newDiv.setAttribute("class", "payment p-5")
 		initCheckout()
 	}
   })
@@ -220,6 +232,7 @@ document.getElementById('hideCVC').parentNode.addEventListener('click', function
 		hideCVC = true
 		oldDiv.replaceWith(newDiv)
 		newDiv.setAttribute("id", "dropin-container")
+		newDiv.setAttribute("class", "payment p-5")
 		initCheckout()
 	}
 	else {
@@ -228,6 +241,7 @@ document.getElementById('hideCVC').parentNode.addEventListener('click', function
 		hideCVC = false
 		oldDiv.replaceWith(newDiv)
 		newDiv.setAttribute("id", "dropin-container")
+		newDiv.setAttribute("class", "payment p-5")
 		initCheckout()
 	}
   })
@@ -253,6 +267,7 @@ document.getElementById('placeholderData').parentNode.addEventListener('click',
 		console.log (countrySettings)
 		oldDiv.replaceWith(newDiv)
 		newDiv.setAttribute("id", "dropin-container")
+		newDiv.setAttribute("class", "payment p-5")
 		initCheckout()
 	}
 	else {
@@ -261,6 +276,7 @@ document.getElementById('placeholderData').parentNode.addEventListener('click',
 		placeholderData = false
 		oldDiv.replaceWith(newDiv)
 		newDiv.setAttribute("id", "dropin-container")
+		newDiv.setAttribute("class", "payment p-5")
 		initCheckout()
 	}
   })
@@ -476,17 +492,25 @@ function handleServerResponse(res, dropin) {
 // Test cards JS
 function copyToClipboard() {
 	// Get the text field
-	var copyPAN = document.getElementById("cardNumber");
+	let copyPAN = document.getElementById('cardNumber').textContent;
+	console.log(copyPAN)
   
 	// Select the text field
-	copyPAN.select();
-	copyPAN.setSelectionRange(0, 99999); // For mobile devices
+	// copyPAN.select();
+	// copyPAN.setSelectionRange(0, 99999); // For mobile devices
   
 	 // Copy the text inside the text field
-	navigator.clipboard.writeText(copyText.value);
+	navigator.clipboard.write(copyPAN);
   
 	// Alert the copied text
-	alert("Copied the text: " + copyText.value);
+	alert("Copied the text: " + copyPAN);
   }
+let r = document.querySelector(':root');
 
+function setDynamicCSS () {
+	r.style.setProperty('--background-color', 'green');
+}
+function resetDynamicCSS () {
+	r.style.setProperty('--background-color', null);
+}
 initCheckout();
diff --git a/app/templates/component.html b/app/templates/component.html
index c53efc3..3f29acc 100644
--- a/app/templates/component.html
+++ b/app/templates/component.html
@@ -43,7 +43,7 @@
 
 	<div id="payment-page" class="row">
 		<div class="checkout col">
-				<div id="dropin-container" class="payment">
+				<div id="dropin-container" class="payment p-5">
 					<!-- Component will be rendered here -->
 				</div>
 		</div>
@@ -92,8 +92,11 @@
           </div>
           <div class="custom-control custom-switch">
             <input type="checkbox" class="custom-control-input" id="placeholderData" data-toggle="toggle">
-            <label class="custom-control-label" for="placeholderData">Include placeholder data</label>
+            <label class="custom-control-label test" for="placeholderData">Include placeholder data</label>
           </div>
+          <button type="button" onclick="setDynamicCSS()">change</button>
+          <input type="color" name="" id="" onchange="setDynamicCSS()">
+          <button type="button" onclick="resetDynamicCSS()">reset</button>
         </div>
     </div>
     <div class="card">
@@ -121,7 +124,7 @@
         </div>
       </div>
     </div>
-    <button type="button" class="btn btn-info btn-clipboard" data-clipboard-action="copy" data-clipboard-target="#cardNumber" onclick="copyToClipboard()">Copy</button>
+    <button type="button" class="btn btn-info btn-clipboard" toggle="tooltip" data-clipboard-action="copy" data-clipboard-target="#cardNumber" onclick="copyToClipboard('cardNumber')" title="Copy to clipboard">Copy</button>
 	<!-- Adyen JS from TEST environment (change to live for production)-->
 	<script src="https://checkoutshopper-live.adyen.com/checkoutshopper/sdk/5.15.0/adyen.js"
 	integrity="sha384-vMZOl6V83EY2UXaXsPUxH5Pt5VpyLeHpSFnANBVjcH5l7yZmJO0QBl3s6XbKwjiN"