[WAUM] Integrate Whatsapp Utility Messaging for WooCommerce Order Update Notifications

assets/css/admin/facebook-for-woocommerce-whatsapp-utility.css

@@ -0,0 +1,249 @@
+.onboarding-card {
+    background-color: #f7f7f7;
+    border: 1px solid #ccc;
+    border-radius: 10px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+    width: 680px;
+    margin: 40px auto 0; /* Top margin 5px, horizontal centering */
+}
+.custom-dashicon-check {
+    position: relative;
+    display: inline-block;
+    width: 26px; /* Set the size of the circle */
+    height: 26px; /* Set the size of the circle */
+    background-color: #1a805b; /* Fill the circle with green */
+    border-radius: 50%; /* Make it a circle */
+    margin-right: 20px;
+    top: 50%;
+    transform: translateY(-50%);
+}
+.custom-dashicon-check::before {
+    content: '\f147'; /* Unicode for dashicons-yes-alt */
+    font-family: 'Dashicons';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-55%, -45%) scale(1.2); /* Center and slightly enlarge the checkmark */
+    font-size: 20px; /* Set the size of the checkmark */
+    color: white; /* Make the checkmark white */
+    text-shadow:
+        -4px 0 #1a805b,
+        4px 0 #1a805b,
+        0 -2px #1a805b,
+        0 2px #1a805b; /* Increase shadow offsets to thin the checkmark more */
+}
+
+.custom-dashicon-circle {
+    position: relative;
+    display: inline-block;
+    width: 20px; /* Set the size of the circle */
+    height: 20px; /* Set the size of the circle */
+    border-radius: 50%; /* Make it a circle */
+    margin-right: 20px;
+    border: 3px solid #222121ab;
+    top: 50%;
+    transform: translateY(-50%);
+}
+.custom-dashicon-halfcircle {
+    position: relative;
+    display: inline-block;
+    width: 20px; /* Set the size of the circle */
+    height: 20px; /* Set the size of the circle */
+    border-radius: 50%; /* Make it a circle */
+    margin-right: 20px;
+    border: 3px solid #222121ab;
+    background-image: linear-gradient(to left, #222121ab 50%, transparent 50%);
+    background-clip: padding-box; /* Add this line */
+    top: 50%;
+    transform: translateY(-50%);
+}
+.card-content-icon {
+    display: flex;
+}
+.card-item {
+    padding: 10px 24px;
+    justify-content: space-between;
+    display: flex;
+}
+.divider {
+    border-bottom: 1px solid #ccc;
+}
+.review-payment-content {
+    padding: 20px;
+    margin-bottom: 10px;
+}
+.whatsapp-onboarding-button {
+    margin-left: auto;
+    position: relative;
+    top: 50%;
+    margin: auto 0; /* Ensure button is centered */
+}
+.whatsapp-onboarding-done-button {
+    margin-left: auto;
+    padding: 6px 0;
+}
+.card-content {
+    max-width: 90%;
+}
+.card-content-icon h2 {
+    top: 50%;
+}
+.card-content-icon p {
+    margin-top: -10px; /* Remove margin top */
+}
+.event-config {
+    display: flex;
+    flex-direction: row;
+    padding-top: 10px;
+}
+.event-config-heading-container {
+    display: flex;
+    flex-direction: row;
+}
+.event-config-manage-button {
+    position: relative;
+    margin-left: auto;
+    top: 50%;
+    padding-left: 20px;
+    padding-right: 10px;
+}
+.event-config-status {
+    background-color: #FFFFFF;
+    border: 1px solid #9f9f9f;
+    color: #9f9f9f;
+    padding: 4px 10px;
+    text-align: center;
+    display: inline-block;
+    border-radius: 16px;
+    margin-left: 10px;
+    font-size: small;
+    align-self: center;
+}
+.on-status {
+    background-color: #00A32A;
+    color: #FFFFFF;
+    border:none;
+}
+.manage-event-card-item {
+    padding: 20px;
+    justify-content: space-between;
+}
+.manage-event-selector {
+    min-width: 100%;
+}
+.manage-event-template-block {
+    border: 1px solid #c4c3c3;
+    margin-bottom: 20px;
+}
+.manage-event-template-header {
+    position: relative;
+    display: block;
+    padding: 20px;
+    font-size: medium;
+}
+.manage-event-template-footer {
+    padding: 20px;
+    display: flex;
+    flex-direction: row-reverse;
+    justify-content: flex-start;
+}
+.manage-event-button {
+    margin-left: 20px;
+}
+.fbwa-hidden-element {
+    display: none;
+}
+.error-notice-wrapper {
+    justify-content: left;
+    padding-left: 20px;
+    padding-bottom: 10px;
+    margin-right: 20px; /* Add the right margin */
+}
+.notice-error {
+    background-color: #f7f7f7;
+    border: 1px solid #EF0000; /* Red border */
+    border-radius: 0; /* No curvature */
+    border-left-width: 5px; /* Thicker left border */
+    width: 100%; /* Take up full width */
+}
+.notice-error p {
+    margin: 5px;
+}
+.warning-custom-modal {
+    display: none; /* Hidden by default */
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0,0,0,0.4); /* Black with opacity */
+}
+/* Modal content */
+.warning-modal-content {
+    background-color: #fefefe;
+    margin: 25% auto;
+    padding: 20px;
+    border: 1px solid #ddd;
+    top: 10%;
+    width: 50%;
+    max-width: 500px;
+    border-radius: 10px;
+    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
+}
+/* Modal body */
+.warning-modal-body {
+    padding: 20px 0;
+}
+/* Modal footer */
+.warning-modal-footer {
+    padding: 10px 0;
+    text-align: right;
+}
+/* Close button */
+.warning-modal-close {
+    color: #aaa;
+    float: right;
+    font-size: 28px;
+    font-weight: bold;
+    cursor: pointer;
+    position: absolute;
+    right: 0;
+    top: 0;
+}
+.warning-modal-close:hover {
+    color: #000;
+}
+.whatsapp-icon {
+    width: 45px;
+    height: 40px;
+    flex-shrink: 0; /* Prevents icon from shrinking */
+}
+.contact-info {
+    padding-left: 10px;
+    display: flex;
+    flex-direction: column;
+}
+.contact-info h3 {
+    margin: 0;
+    font-size: 1.1em;
+}
+.contact-info p {
+    margin: 0;
+    font-size: 1.1em;
+    color: #666;
+}
+.disconnect-footer-left {
+    display: flex;
+    padding: 25px;
+}
+.disconnect-footer-right-separator {
+    margin-right:10px;
+}
+.disconnect-footer-right {
+    padding: 30px;
+    margin-left: auto;
+}
+.disconnect-footer {
+    display: flex;
+    position: relative;
+}

assets/js/admin/whatsapp-billing.js

@@ -0,0 +1,50 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates. All Rights Reserved
+ *
+ * This source code is licensed under the license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @package FacebookCommerce
+ */
+
+jQuery( document ).ready( function( $ ) {
+  	var $billingStepInProgress = $('#wc-fb-whatsapp-billing-inprogress');
+  	var $billingStepNotStarted = $('#wc-fb-whatsapp-billing-notstarted');
+	var $billingStepSuccess = $('#wc-fb-whatsapp-billing-success');
+	var $billingSubcontent = $('#wc-fb-whatsapp-billing-subcontent');
+	var $billingButtonWrapper = $('#wc-fb-whatsapp-billing-button-wrapper');
+	var $whatsappOnboardingDoneButton = $('#whatsapp-onboarding-done-button');
+	if (facebook_for_woocommerce_whatsapp_billing.consent_collection_enabled) {
+		facebook_for_woocommerce_whatsapp_billing.is_payment_setup ? $billingStepSuccess.show() : $billingStepInProgress.show();
+		$whatsappOnboardingDoneButton.show();
+		$billingStepNotStarted.hide();
+	} else {
+		$billingStepInProgress.hide();
+		$billingStepNotStarted.show();
+		$billingSubcontent.hide();
+		$whatsappOnboardingDoneButton.hide();
+		$billingButtonWrapper.hide()
+	}
+
+    // handle the whatsapp add payment button click should open billing flow in Meta
+    $('#wc-whatsapp-add-payment').click(function(event) {
+
+        $.post( facebook_for_woocommerce_whatsapp_billing.ajax_url, {
+			action: 'wc_facebook_whatsapp_fetch_url_info',
+			nonce:  facebook_for_woocommerce_whatsapp_billing.nonce
+		}, function ( response ) {
+            if ( response.success ) {
+				console.log( 'Whatsapp Billing Url Info Fetched Successfully', response );
+                var  business_id = response.data.business_id;
+                var asset_id = response.data.waba_id;
+				const BILLING_URL = `https://business.facebook.com/billing_hub/accounts/details/?business_id=${business_id}&asset_id=${asset_id}&account_type=whatsapp-business-account`;
+                window.open( BILLING_URL);
+			} else {
+				console.log( 'Whatsapp Billing Url Info Fetch Failure', response );
+			}
+		} );
+
+
+    });
+
+} );

assets/js/admin/whatsapp-connection.js

@@ -0,0 +1,73 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates. All Rights Reserved
+ *
+ * This source code is licensed under the license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @package FacebookCommerce
+ */
+
+jQuery( document ).ready( function( $ ) {
+    var $connectSuccess = $('#wc-fb-whatsapp-connect-success');
+    var $connectInProgress = $('#wc-fb-whatsapp-connect-inprogress');
+    var $connectSubcontent = $('#wc-fb-whatsapp-onboarding-subcontent');
+    var $connectButtonWrapper = $('#wc-fb-whatsapp-onboarding-button-wrapper');
+    if (facebook_for_woocommerce_whatsapp_onboarding_progress.whatsapp_onboarding_complete) {
+        $connectSuccess.show();
+        $connectInProgress.hide();
+        $connectSubcontent.hide();
+        $connectButtonWrapper.hide();
+    } else {
+        $connectSuccess.hide();
+        $connectInProgress.show();
+    }
+
+    // handle the whatsapp connect button click should open hosted ES flow
+	$( '#woocommerce-whatsapp-connection' ).click( function( event ) {
+        const APP_ID = '474166926521348'; // WOO_COMMERCE_APP_ID
+        const CONFIG_ID = '1237758981048330'; // WOO_COMMERCE_WHATSAPP_CONFIG_ID
+        const HOSTED_ES_URL = `https://business.facebook.com/messaging/whatsapp/onboard/?app_id=${APP_ID}&config_id=${CONFIG_ID}`;
+        window.open( HOSTED_ES_URL);
+        updateProgress(0,1800000); // retry for 30 minutes
+    });
+
+    function updateProgress(retryCount = 0, pollingTimeout = 1800000) {
+        $.post( facebook_for_woocommerce_whatsapp_onboarding_progress.ajax_url, {
+			action: 'wc_facebook_whatsapp_onboarding_progress_check',
+			nonce:  facebook_for_woocommerce_whatsapp_onboarding_progress.nonce
+		}, function ( response ) {
+
+            // check if the response is success (i.e. onboarding is completed)
+            if ( response.success ) {
+				console.log( 'Whatsapp Connection is Complete', response );
+                // update the progress for connect whatsapp step
+                $connectInProgress.remove();
+                $connectSuccess.show();
+                 // collapse whatsapp onboarding step subcontect and button on success
+                $connectSubcontent.hide();
+                $connectButtonWrapper.hide();
+                // update the progress for collect consent step and show button and subcontent
+                $('#wc-fb-whatsapp-consent-collection-inprogress').show();
+                $('#wc-fb-whatsapp-consent-collection-notstarted').hide();
+                $('#wc-fb-whatsapp-consent-subcontent').show();
+	            $('#wc-fb-whatsapp-consent-button-wrapper').show();
+
+                // update the progress of payment step if payment already setup
+                if(response.data['is_payment_setup'] === true) {
+                    $('#wc-fb-whatsapp-billing-inprogress').hide();
+                    $('#wc-fb-whatsapp-billing-notstarted').hide();
+                    $('#wc-fb-whatsapp-billing-success').show();
+                }
+			} else {
+                console.log('Whatsapp connection is not complete. Checking again in 5 seconds:', response, ', retry attempt:', retryCount, 'pollingTimeout', pollingTimeout);
+                if(retryCount >= pollingTimeout) {
+                    console.log('Max retries reached. Aborting.');
+                    return;
+                }
+                setTimeout( function() { updateProgress(retryCount + 1, pollingTimeout); }, 5000 );
+            }
+		} );
+
+    }
+
+} );