notifier / views / admin-dashboard.php

admin-dashboard.php in WANotifier for Forms and Actions 0.1.1, at views/admin-dashboard.php

331 lines 17.4 KB

Raw Download Zip

1	<?php
2	/**
3	* Admin View: Dashboard
4	*
5	* @package Notifier
6	*/
7
8	if ( ! defined( 'ABSPATH' ) ) {
9	exit;
10	}
11	$disclaimer = get_option(NOTIFIER_PREFIX . 'disclaimer');
12	$verify_token = get_option(NOTIFIER_PREFIX . 'verify_token');
13	$api_credentials_validated = get_option(NOTIFIER_PREFIX . 'api_credentials_validated');
14	$show_disclaimer = ( isset($_GET['show']) && $_GET['show'] == 'disclaimer' ) ? true : false;
15	$phone_number_id = get_option( NOTIFIER_PREFIX . 'phone_number_id' );
16	$phone_number_details = get_option( NOTIFIER_PREFIX . 'phone_number_details');
17	?>
18	<div class="wrap notifier">
19
20	<h1>Dashboard</h1>
21
22	<div class="notifier-wrapper">
23
24	<?php if ('accepted' != $disclaimer \|\| $show_disclaimer) : ?>
25
26	<div class="onboarding">
27	<div class="onboarding-head">
28	<h3>!!! [IMPORTANT DISCLAIMER] DO NOT SKIP WITHOUT READING !!!</h3>
29	<p>Please read and accept the following 3 points before you start using this plugin.</p>
30	</div>
31	<div class="onboarding-body">
32	<div class="onboarding-disclaimer">
33	<h4>1. PHONE NUMBER WILL RESTRICTION</h4>
34	<p>This plugin uses WhatsApp's official <a href="https://developers.facebook.com/docs/whatsapp/cloud-api/overview" target="_blank">Cloud API</a> to send notifications from your WordPress backend. In order to use the API, you need to register your phone number with them to be able to send notifications.</p>
35	<p>Once the phone number is setup in their app to use with this plugin, you will <b>not be able to use the number</b> on the <a href="https://business.whatsapp.com/products/business-app" target="_blank">WhastApp Business mobile app</a>.</p>
36	<p>If you want to use your phone number that you were earlier using on the WhatsApp phone app, WhatsApp <a href="https://developers.facebook.com/docs/whatsapp/phone-numbers" target="_blank">requires you</a> to <b>delete that account from phone</b> (along with it's message history) to be able to use it via the API.</p>
37	<p>If you're using a different number that's not used in the mobile app or if you're okay to delete the phone app account, you can proceed with using this plugin.</p>
38	<hr />
39	<h4>2. ONE-WAY COMMUNICATION ONLY</h4>
40	<p>Note that this plugin currently allows only <b>one-way communication</b>, that is, you can only <b>send notifications</b> on WhatsApp but <b>can not receive / read replies</b>.</p>
41	<p>If you want to use your phone number for two-way communication with your customers, we suggest using their mobile app. But if you're okay with the one-way communication restriction, you can proceed with using this plugin.</p>
42	<p>Note that we have plans to introduce <b>full-fledged WhatsApp inbox system</b> with this plugin that'll allow you <b>two-way communication</b> from WordPress dashbaord. But that'll take time to launch so be thoughtful about the phone number that you use with this plugin.</p>
43	<hr />
44	<h4>3. METERED BILLING BY WHATSAPP</h4>
45	<p>Notifications you send from the app are <a href="https://developers.facebook.com/docs/whatsapp/pricing" target="_blank">metered by WhatsApp</a>. <b>First 1000 messages per month are <em>free</em></b> to send but you're charged for the messages you send post that. The billing is handled by WhatsApp on their site and not by this plugin.</p>
46	<hr />
47	<p>If you understand and accept these points, click on button below to get started.</p>
48	</div>
49	</div>
50	<div class="onboarding-footer">
51	<?php if ('accepted' != $disclaimer) : ?>
52	<form method="POST" action="" enctype="multipart/form-data">
53	<button name="disclaimer" class="button-primary" type="submit" value="">I Understand & Accept</button>
54	<?php wp_nonce_field( NOTIFIER_NAME . '-disclaimer' ); ?>
55	</form>
56	<?php else : ?>
57	<button class="button" disabled="disabled">Already accepted</button>
58	<a class="button-primary" href="admin.php?page=notifier">Back to Dashboard</a>
59	<?php endif; ?>
60	</div>
61	</div>
62
63	<?php elseif (!$api_credentials_validated) : ?>
64
65	<div class="onboarding">
66	<div class="onboarding-head">
67	<h3>Let's Configure The Plugin!</h3>
68	<p>Follow the steps below to configure the plugin to start sending WhatsApp notifications. Estimated time: 8 to 10 minutes.</p>
69	</div>
70	<div class="onboarding-body">
71	<div class="step active">
72	<div class="step-head">
73	<div class="step-title text-uppercase"><b>Step 1: Create Meta account and an app for WhastApp Cloud API</b></div>
74	<button class="toggle-step"></button>
75	</div>
76	<div class="step-body">
77	<ol>
78	<li>Create a free <a href="https://developers.facebook.com/async/registration/" target="_blank">Meta developer account</a>, if you don't already have one.</li>
79	<li>Login to the Meta developer portal and click on <a href="https://developers.facebook.com/apps/create/" target="_blank">Create App</a> button to create a new app.</li>
80	<li>On this page, select the <b>Business</b> option and click on the <b>Next</b> button at the bottom.</li>
81	<li>On the next <b>Provide basic information</b> page, fill in the details and click on <b>Create App</b> when done.</li>
82	<li>This will redirect you to app page where you need to <b>Add products to your app</b>. Scroll to the bottom to find "WhatsApp" product and click <b>Set up</b>.</li>
83	<li>Next, you will see the option to select an existing Business Manager (if you have one) or, if you would like, the onboarding process will create one automatically for you (you can customize your business later, if needed). Make a selection and click <b>Continue</b>.</li>
84	<li>You will be redirected to the <b>Get Started</b> page.</li>
85	</ol>
86	</div>
87	</div>
88	<div class="step">
89	<div class="step-head">
90	<div class="step-title text-uppercase"><b>Step 2: Setup your phone number in WhastApp Cloud API</b></div>
91	<button class="toggle-step"></button>
92	</div>
93	<div class="step-body">
94	<ol>
95	<li>Scroll down on the <b>Get Started</b> screen and click on <b>Add phone number</b> button.</li>
96	<li>Fill in your business information and click <b>Next</b>.</li>
97	<li>On the next screen, you'll be prompted to create a WhatsApp Business profile. Enter the details and click <b>Next</b>.</li>
98	<li>Next, you'll need to add your phone number. Enter your phone number and select a verification method to verify the number.</li>
99	<li>Enter the verfication code and click <b>Next</b>.</li>
100	<li>Once the phone number is added, scroll up on the <b>Get Started</b> page and select your added number from the dropdown under <b>Send and receive messages</b>.</li>
101	<li>After selecting your phone number the <b>Phone number ID</b> and <b>WhatsApp Business Account ID</b> values will get updated below it. Copy those values and add them on the <a href="<?php echo esc_url( get_admin_url( null, 'admin.php?page=' . NOTIFIER_NAME . '-settings') ); ?>" target="_blank">Settings</a> page.</li>
102	<li>Do not save the page, just keep it open. We'll add <b>Permanent Access Token</b> in the next step.</li>
103	</ol>
104	</div>
105	</div>
106	<div class="step">
107	<div class="step-head">
108	<div class="step-title text-uppercase"><b>Step 3: Configure webhook and permanent token</b></div>
109	<button class="toggle-step"></button>
110	</div>
111	<div class="step-body">
112	<p>In this step, we'll setup the Webhook and Permanent Token.</p>
113	<b>Webhook:</b>
114	<ol>
115	<li>From the <b>Get Started</b> screen's left sidebar, click on <b>Whatsapp > Configuration</b> link.</li>
116	<li>Click on the <b>Edit</b> button. That'll open a popup.</li>
117	<li>Enter the following in the <b>Callback URL</b> field: <code><?php echo esc_url (site_url('/?notifier') ); ?></code>. Note that if you have any kind of firewall set on your website the verification will fail.</li>
118	<li>In the <b>Verify Token</b> field enter: <code><?php echo esc_html($verify_token); ?></code> and click <b>Verify</b>.</li>
119	<li>Under <b>Webhook fields:</b> click on <b>Manage</b>.</li>
120	<li>Click on <b>Subscribe</b> button in front of all fields and then click on <b>Done</b>.</li>
121	</ol>
122
123	<b>Permanent Token:</b>
124	<ol>
125	<li><a href="https://business.facebook.com/settings" target="_blank">Click here</a> to open <b>Business Settings</b> for your <b>Business Manager</b> account and select your account.</li>
126	<li>Under <b>Users</b> in left sidebar, click on <b>System users</b>. Click on <b>Add</b> to add a new user.</li>
127	<li>Click on <b>I Accept</b> button if you see non-discrimation policy popup.</li>
128	<li>Enter a name for your <b>System user name</b> (you can keep it admin or system, this will not be shown to your users). Select <b>System user role</b> as <b>Administrator</b> and click on <b>Create system user</b>.</li>
129	<li>Click on <b>Add Assets</b> button. Under <b>Select asset type</b> click on <b>Apps</b>, select your app from <b>Select assets</b> column and then enable <b>Full control > Manage App</b>. Click on <b>Save Changes</b>.</li>
130	<li>Now click on <b>Generate Token</b> button. Select your app from the dropdown and click on <b>Generate Token</b>. From the list of permissions under <b>Available Permissions:</b> select <em>whatsapp_business_messaging</em> and <em>whatsapp_business_management</em> and then click on <b>Generate Token</b>.</li>
131	<li>Copy the <b>Access token</b>. Open this plugin's <a href="<?php echo esc_url(get_admin_url( null, 'admin.php?page=' . NOTIFIER_NAME . '-settings&tab=api') ); ?>" target="_blank">Settings</a> page, add it in the <b>Permanent Access Token</b> field and save.</li>
132	</ol>
133
134	</div>
135	</div>
136	<div class="step">
137	<div class="step-head">
138	<div class="step-title text-uppercase"><b>Step 4: Validate and complete</b></div>
139	<button class="toggle-step"></button>
140	</div>
141	<div class="step-body">
142	<p>After you've completed the steps above and added the <b>WhastApp Phone Number ID</b>, <b>WhastApp Business Account ID</b> and the <b>Permanent Access Token</b>, click on the link below to validate.</p>
143	<p>Once you click the button below, the plugin will connect to your account via Cloud API to validate the details. Once validated, it'll create draft <b>Message Templates</b> for you to start sending notifications.</p>
144	<form method="POST" action="" enctype="multipart/form-data">
145	<button name="validate" class="button-primary" type="submit" value="">Validate and Complete Setup</button>
146	<?php wp_nonce_field( NOTIFIER_NAME . '-validate' ); ?>
147	</form>
148	</div>
149	</div>
150	</div>
151	</div>
152
153	<?php else : ?>
154	<div class="dashboard-boxes">
155	<div class="col w-100">
156	<div class="dashboard-box dashboard-box-top">
157	<div class="dashboard-box-body d-flex w-100">
158	<div class="w-25">
159	<b>Phone Number:</b>
160	<?php echo esc_html($phone_number_details[$phone_number_id]['display_num']); ?>
161	</div>
162	<div class="w-25">
163	<b>Display Name:</b>
164	<?php echo esc_html($phone_number_details[$phone_number_id]['display_name']); ?>
165	</div>
166	<div class="w-25">
167	<b>Status:</b>
168	<?php echo esc_html($phone_number_details[$phone_number_id]['phone_num_status']); ?>
169	</div>
170	<div class="w-25">
171	<b>Qaulity Rating:</b>
172	<span class="quantity-rating quantity-rating-<?php echo esc_attr( strtolower($phone_number_details[$phone_number_id]['quality_rating']) ); ?>"></span>
173	</div>
174	</div>
175	</div>
176	</div>
177	<?php
178	$message_templates = get_posts(
179	array (
180	'post_type' => 'wa_message_template',
181	'post_status' => 'publish',
182	'numberposts' => 5,
183	)
184	);
185	$message_templates_count = count($message_templates);
186
187	$contacts = get_posts(
188	array (
189	'post_type' => 'wa_contact',
190	'post_status' => 'publish',
191	'numberposts' => 5,
192	)
193	);
194	$contacts_count = count($contacts);
195
196	$notifications = get_posts(
197	array (
198	'post_type' => 'wa_notification',
199	'post_status' => 'publish',
200	'numberposts' => 5,
201	)
202	);
203	$notifications_count = count($notifications);
204	?>
205	<?php if ($message_templates_count == 0 \|\| $contacts_count == 0 \|\| $notifications_count == 0) : ?>
206	<div class="col w-33">
207	<div class="dashboard-box">
208	<div class="dashboard-box-head">
209	<h2>You're all set! Here are the next steps...</h2>
210	</div>
211	<div class="dashboard-box-body">
212	<p>
213	<span class="dashicons <?php echo ($message_templates_count == 0) ? 'dashicons-marker' : 'dashicons-yes-alt'; ?>"> </span>
214	<b>STEP 1</b> - Create your first <a href="<?php echo esc_url(admin_url( 'edit.php?post_type=wa_message_template' )); ?>" target="_blank">Message Template</a>.
215	</p>
216	<p>
217	<span class="dashicons <?php echo ($contacts_count == 0) ? 'dashicons-marker' : 'dashicons-yes-alt'; ?>"> </span>
218	<b>STEP 2</b> - Add / import <a href="<?php echo esc_url(admin_url( 'edit.php?post_type=wa_contact' )); ?>" target="_blank">Contacts</a>.
219	</p>
220	<p>
221	<span class="dashicons <?php echo ($notifications_count == 0) ? 'dashicons-marker' : 'dashicons-yes-alt'; ?>"> </span>
222	<b>STEP 3</b> - Create and send your first <a href="<?php echo esc_url( admin_url( 'edit.php?post_type=wa_notification' ) ); ?>" target="_blank">Notification</a>.
223	</p>
224	</div>
225	</div>
226	</div>
227	<?php endif; ?>
228	<?php if ($message_templates_count > 0) : ?>
229	<div class="col w-33">
230	<div class="dashboard-box">
231	<div class="dashboard-box-head">
232	<h2>Message Templates</h2>
233	</div>
234	<div class="dashboard-box-body">
235	<table>
236	<tr>
237	<th>Name</th>
238	<th>Status</th>
239	</tr>
240	<?php
241	foreach ($message_templates as $template) {
242	$status = get_post_meta( $template->ID, NOTIFIER_PREFIX . 'status', true);
243	$status_text = ($status) ? '<span class="status status-' . esc_attr(strtolower($status)) . '">' . esc_html($status) . '</span>' : '-';
244	echo '<tr><td><a href="' . esc_url(get_edit_post_link($template->ID)) . '">' . esc_html($template->post_title) . '</a></td><td>' . wp_kses_post($status_text) . '</td></tr>';
245	}
246	?>
247	</table>
248	</div>
249	<div class="dashboard-box-footer">
250	<div class="dashboard-box-buttons-wrap">
251	<a class="button" href="<?php echo esc_url(admin_url('edit.php?post_type=wa_message_template')); ?>">View All</a>
252	</div>
253	</div>
254	</div>
255	</div>
256	<?php endif; ?>
257	<?php if ($contacts_count > 0) : ?>
258	<div class="col w-33">
259	<div class="dashboard-box">
260	<div class="dashboard-box-head">
261	<h2>Contacts</h2>
262	</div>
263	<div class="dashboard-box-body">
264	<table>
265	<tr>
266	<th>First Name</th>
267	<th>Last Name</th>
268	<th>Number</th>
269	</tr>
270	<?php
271	foreach ($contacts as $contact) {
272	$first_name = get_post_meta( $contact->ID, NOTIFIER_PREFIX . 'first_name', true);
273	$last_name = get_post_meta( $contact->ID, NOTIFIER_PREFIX . 'last_name', true);
274	$wa_number = get_post_meta( $contact->ID, NOTIFIER_PREFIX . 'wa_number', true);
275	echo '<tr><td><a href="' . esc_url( get_edit_post_link($contact->ID) ) . '">' . esc_html($first_name) . '</a></td><td>' . esc_html($last_name) . '</td><td>' . esc_html($wa_number) . '</td></tr>';
276	}
277	?>
278	</table>
279	</div>
280	<div class="dashboard-box-footer">
281	<div class="dashboard-box-buttons-wrap">
282	<a class="button" href="<?php echo esc_url(admin_url('edit.php?post_type=wa_contact')); ?>">View All</a>
283	</div>
284	</div>
285	</div>
286	</div>
287	<?php endif; ?>
288	<?php if ($notifications_count > 0) : ?>
289	<div class="col w-33">
290	<div class="dashboard-box">
291	<div class="dashboard-box-head">
292	<h2>Notifications</h2>
293	</div>
294	<div class="dashboard-box-body">
295	<table>
296	<tr>
297	<th>Name</th>
298	<th>Status</th>
299	<th>Stats</th>
300	</tr>
301	<?php
302	foreach ($notifications as $notification) {
303	$status = get_post_meta( $notification->ID, NOTIFIER_PREFIX . 'notification_status', true);
304	$sent = get_post_meta( $notification->ID, NOTIFIER_PREFIX . 'notification_sent_contact_ids', true);
305	$sent_count = ($sent && is_array($sent)) ? count($sent) : '0';
306	$unsent = get_post_meta( $notification->ID, NOTIFIER_PREFIX . 'notification_unsent_contact_ids', true);
307	$unsent_count = ($unsent && is_array($unsent)) ? count($unsent) : '0';
308	echo '<tr>';
309	echo '<td><a href="' . esc_url( get_edit_post_link($notification->ID) ) . '">' . esc_html($notification->post_title) . '</a></td>';
310	echo '<td>' . esc_html($status) . '</td>';
311	echo '<td>Sent: ' . esc_html($sent_count) . ' / Failed: ' . esc_html($unsent_count) . '</td>';
312	echo '</tr>';
313	}
314	?>
315	</table>
316	</div>
317	<div class="dashboard-box-footer">
318	<div class="dashboard-box-buttons-wrap">
319	<a class="button" href="<?php echo esc_url( admin_url('edit.php?post_type=wa_notification') ); ?>">View All</a>
320	</div>
321	</div>
322	</div>
323	</div>
324	<?php endif; ?>
325	</div>
326
327	<?php endif; ?>
328
329	</div>
330	</div>
331