feat: add paylater messaging configurator

Dreamvention · Dec 9, 2023 · eb0af9f · eb0af9f
1 parent e02c441
commit eb0af9f
Show file tree

Hide file tree

Showing 16 changed files with 226 additions and 441 deletions.
diff --git a/admin/controller/payment/paypal.php b/admin/controller/payment/paypal.php
@@ -1090,6 +1090,7 @@ public function message(): void {
 
 		$this->document->addScript('../extension/paypal/admin/view/javascript/paypal.js');
 		$this->document->addScript('../extension/paypal/admin/view/javascript/bootstrap-switch.js');
+		$this->document->addScript('https://www.paypalobjects.com/merchant-library/merchant-configurator.js');
 
 		$this->document->setTitle($this->language->get('heading_title_main'));
 
@@ -1138,6 +1139,7 @@ public function message(): void {
 		$data['merchant_id'] = $this->config->get('payment_paypal_merchant_id');
 		$data['webhook_id'] = $this->config->get('payment_paypal_webhook_id');
 		$data['environment'] = $this->config->get('payment_paypal_environment');
+		$data['partner_client_id'] = $data['setting']['partner'][$data['environment']]['client_id'];
 		$data['partner_attribution_id'] = $data['setting']['partner'][$data['environment']]['partner_attribution_id'];
 
 		$country = $this->model_extension_paypal_payment_paypal->getCountryByCode($data['setting']['general']['country_code']);

diff --git a/admin/view/javascript/paypal.js b/admin/view/javascript/paypal.js
@@ -34,12 +34,7 @@ var PayPalAPI = (function () {
 			$('#paypal_card_container').find('iframe').remove();
 			$('#paypal_card_container').addClass('paypal-spinner');
 		}
-
-		if (paypal_data['components'].includes('messages')) {
-			$('#paypal_message_' + paypal_data['page_code'] + '_container').html('');
-			$('#paypal_message_' + paypal_data['page_code'] + '_container').addClass('paypal-spinner');
-		}
-
+
 		var src_data = {};
 
 		src_data['components'] = paypal_data['components'].join(',');
@@ -313,54 +308,7 @@ var PayPalAPI = (function () {
 
 			$('#paypal_card_container').removeClass('paypal-spinner');
 		}
-
-		if (paypal_data['components'].includes('messages') && $('#paypal_message_' + paypal_data['page_code']).length) {
-			$('#paypal_message_' + paypal_data['page_code']).css('text-align', paypal_data['message_align']);
-
-			if (paypal_data['message_width']) {
-				$('#paypal_message_' + paypal_data['page_code'] + '_container').css('display', 'inline-block');
-				$('#paypal_message_' + paypal_data['page_code'] + '_container').css('width', paypal_data['message_width']);
-			} else {
-				$('#paypal_message_' + paypal_data['page_code'] + '_container').css('display', 'block');
-				$('#paypal_message_' + paypal_data['page_code'] + '_container').css('width', 'auto');
-			}
-
-			var paypal_message = document.createElement('div');
-
-			paypal_message.setAttribute('data-pp-message', '');
-
-			if (paypal_data['page_code'] == 'home') {
-				paypal_message.setAttribute('data-pp-placement', 'home');
-			}
-
-			if (paypal_data['page_code'] == 'product') {
-				paypal_message.setAttribute('data-pp-placement', 'product');
-			}
-
-			if (paypal_data['page_code'] == 'cart') {
-				paypal_message.setAttribute('data-pp-placement', 'cart');
-			}
-
-			if (paypal_data['page_code'] == 'checkout') {
-				paypal_message.setAttribute('data-pp-placement', 'payment');
-			}
-
-			paypal_message.setAttribute('data-pp-amount', '33.00');
-			paypal_message.setAttribute('data-pp-style-layout', paypal_data['message_layout']);
-
-			if (paypal_data['message_layout'] == 'text') {
-				paypal_message.setAttribute('data-pp-style-text-color', paypal_data['message_text_color']);
-				paypal_message.setAttribute('data-pp-style-text-size', paypal_data['message_text_size']);
-			} else {
-				paypal_message.setAttribute('data-pp-style-color', paypal_data['message_flex_color']);
-				paypal_message.setAttribute('data-pp-style-ratio', paypal_data['message_flex_ratio']);
-			}
-
-			document.querySelector('#paypal_message_' + paypal_data['page_code'] + '_container').appendChild(paypal_message);
-
-			$('#paypal_message_' + paypal_data['page_code'] + '_container').removeClass('paypal-spinner');
-		}
-
+
 		if (paypal_callback && typeof paypal_callback == 'function') {
 			paypal_callback();
 		}

diff --git a/admin/view/stylesheet/paypal.css b/admin/view/stylesheet/paypal.css
@@ -1,3 +1,16 @@
+html, body {
+	font-size: 13px;
+}
+.breadcrumb-item {
+	font-size: 14px;
+}
+.btn {
+	font-size: 14px;
+	padding: 8px 12px;
+}
+.tooltip {
+	font-size: 12px;
+}
 .payment-paypal {
 	font-size: 13px;
 	line-height: 1.4;
@@ -126,6 +139,7 @@
 	box-shadow: none;
 }
 .payment-paypal .card .card-header {
+	font-size: 16px;
 	color: #FFFFFF;
 }
 .payment-paypal .card .card-body {
@@ -668,6 +682,12 @@
 	background-size: contain;
 	background-repeat: no-repeat;
 }
+.payment-paypal .panel-default #messaging-configurator input {
+	position: absolute;
+}
+.payment-paypal .panel-default #messaging-configurator .css-15yf9ku {
+	height: auto;
+}
 @media (max-width: 767px) {
 	.payment-paypal .card .section-cart .table-cart .table-row .table-col-product-image,
 	.payment-paypal .card .section-cart .table-cart .table-row .table-col-product-model,
@@ -776,9 +796,6 @@
 		width: 100% !important;
 	}
 }
-.payment-paypal .card .paypal-message {
-	position: relative;
-}
 .payment-paypal .card .paypal-spinner {
 	position: relative;
 	min-height: 20px;

diff --git a/admin/view/template/payment/applepay_button.twig b/admin/view/template/payment/applepay_button.twig
@@ -3,7 +3,7 @@
 	<div class="page-header">
 		<div class="container-fluid">
 			<div class="float-end">
-				<button type="submit" form="form_payment" data-bs-toggle="tooltip" title="{{ button_save }}" class="btn btn-primary"><i class="fas fa-save"></i></button>
+				<button type="submit" form="form_payment" data-bs-toggle="tooltip" title="{{ button_save }}" class="btn btn-primary button-save"><i class="fas fa-save"></i></button>
 				<a href="{{ back }}" data-bs-toggle="tooltip" title="{{ button_back }}" class="btn btn-light"><i class="fas fa-reply"></i></a>
 			</div>
 			<h1>{{ heading_title_main }}</h1>

diff --git a/admin/view/template/payment/button.twig b/admin/view/template/payment/button.twig
@@ -3,7 +3,7 @@
 	<div class="page-header">
 		<div class="container-fluid">
 			<div class="float-end">
-				<button type="submit" form="form_payment" data-bs-toggle="tooltip" title="{{ button_save }}" class="btn btn-primary"><i class="fas fa-save"></i></button>
+				<button type="submit" form="form_payment" data-bs-toggle="tooltip" title="{{ button_save }}" class="btn btn-primary button-save"><i class="fas fa-save"></i></button>
 				<a href="{{ back }}" data-bs-toggle="tooltip" title="{{ button_back }}" class="btn btn-light"><i class="fas fa-reply"></i></a>
 			</div>
 			<h1>{{ heading_title_main }}</h1>

diff --git a/admin/view/template/payment/card.twig b/admin/view/template/payment/card.twig
@@ -3,7 +3,7 @@
 	<div class="page-header">
 		<div class="container-fluid">
 			<div class="float-end">
-				<button type="submit" form="form_payment" data-bs-toggle="tooltip" title="{{ button_save }}" class="btn btn-primary"><i class="fas fa-save"></i></button>
+				<button type="submit" form="form_payment" data-bs-toggle="tooltip" title="{{ button_save }}" class="btn btn-primary button-save"><i class="fas fa-save"></i></button>
 				<a href="{{ back }}" data-bs-toggle="tooltip" title="{{ button_back }}" class="btn btn-light"><i class="fas fa-reply"></i></a>
 			</div>
 			<h1>{{ heading_title_main }}</h1>

diff --git a/admin/view/template/payment/contact.twig b/admin/view/template/payment/contact.twig
@@ -3,7 +3,7 @@
 	<div class="page-header">
 		<div class="container-fluid">
 			<div class="float-end">
-				<button type="submit" form="form_payment" data-bs-toggle="tooltip" title="{{ button_save }}" class="btn btn-primary"><i class="fas fa-save"></i></button>
+				<button type="submit" form="form_payment" data-bs-toggle="tooltip" title="{{ button_save }}" class="btn btn-primary button-save"><i class="fas fa-save"></i></button>
 				<a href="{{ back }}" data-bs-toggle="tooltip" title="{{ button_back }}" class="btn btn-light"><i class="fas fa-reply"></i></a>
 			</div>
 			<h1>{{ heading_title_main }}</h1>

diff --git a/admin/view/template/payment/dashboard.twig b/admin/view/template/payment/dashboard.twig
@@ -3,7 +3,7 @@
 	<div class="page-header">
 		<div class="container-fluid">
 			<div class="float-end">
-				<button type="submit" form="form_payment" data-bs-toggle="tooltip" title="{{ button_save }}" class="btn btn-primary"><i class="fas fa-save"></i></button>
+				<button type="submit" form="form_payment" data-bs-toggle="tooltip" title="{{ button_save }}" class="btn btn-primary button-save"><i class="fas fa-save"></i></button>
 				<a href="{{ back }}" data-bs-toggle="tooltip" title="{{ button_back }}" class="btn btn-light"><i class="fas fa-reply"></i></a>
 			</div>
 			<h1>{{ heading_title_main }}</h1>

diff --git a/admin/view/template/payment/general.twig b/admin/view/template/payment/general.twig
@@ -3,7 +3,7 @@
 	<div class="page-header">
 		<div class="container-fluid">
 			<div class="float-end">
-				<button type="submit" form="form_payment" data-bs-toggle="tooltip" title="{{ button_save }}" class="btn btn-primary"><i class="fas fa-save"></i></button>
+				<button type="submit" form="form_payment" data-bs-toggle="tooltip" title="{{ button_save }}" class="btn btn-primary button-save"><i class="fas fa-save"></i></button>
 				<a href="{{ back }}" data-bs-toggle="tooltip" title="{{ button_back }}" class="btn btn-light"><i class="fas fa-reply"></i></a>
 			</div>
 			<h1>{{ heading_title_main }}</h1>

diff --git a/admin/view/template/payment/googlepay_button.twig b/admin/view/template/payment/googlepay_button.twig
@@ -3,7 +3,7 @@
 	<div class="page-header">
 		<div class="container-fluid">
 			<div class="float-end">
-				<button type="submit" form="form_payment" data-bs-toggle="tooltip" title="{{ button_save }}" class="btn btn-primary"><i class="fas fa-save"></i></button>
+				<button type="submit" form="form_payment" data-bs-toggle="tooltip" title="{{ button_save }}" class="btn btn-primary button-save"><i class="fas fa-save"></i></button>
 				<a href="{{ back }}" data-bs-toggle="tooltip" title="{{ button_back }}" class="btn btn-light"><i class="fas fa-reply"></i></a>
 			</div>
 			<h1>{{ heading_title_main }}</h1>