Adding draft UI and endpoints for settings

js/ninteen-eighty-woo.js

@@ -0,0 +1,84 @@
+class NinteenEightyWoo {
+	static settingsForm() {
+		return document.querySelector('#ninteen-eighty-woo-settings-form');
+	}
+	static settingsLoader() {
+		return document.querySelector('#ninteen-eighty-woo-settings-loader');
+	}
+	static settingsSubmit() {
+		return document.querySelector('#ninteen-eighty-woo-settings-submit');
+	}
+	static rowElements() {
+		return document.querySelectorAll(
+			'#payment-gateway-id-map-table tbody tr'
+		);
+	}
+
+	static onSettingsFormSubmit(event) {
+		event.preventDefault();
+
+		const formData = new FormData(event.target);
+
+		let apiKey         = formData.get('api_key').trim();
+		let paymentIds     = formData.getAll('payment_id');
+		let paymentNames   = formData.getAll('payment_name');
+		let paymentMethods = [];
+
+		for (let i = 0; i < paymentIds.length; i++) {
+			let wooId = NinteenEightyWoo.rowElements()[i].dataset.gatewayId;
+
+			paymentMethods.push(
+				{
+					woo_id: wooId,
+					dk_id: parseInt(paymentIds[i]),
+					dk_name: paymentNames[i].trim()
+				}
+			);
+		}
+
+		const formDataObject = {
+			apiKey: apiKey,
+			paymentMethods: paymentMethods
+		}
+
+		console.log(formDataObject);
+
+		NinteenEightyWoo.settingsLoader().classList.remove('hidden');
+		NinteenEightyWoo.settingsSubmit().disabled = true;
+		NinteenEightyWoo.postSettingsData(formDataObject);
+	}
+
+	static async postSettingsData(formDataObject) {
+		const response = await fetch(
+			wpApiSettings.root + 'NinteenEightyWoo/v1/settings',
+			{
+				method: 'POST',
+				headers: {
+					'Content-Type': 'application/json;charset=UTF-8',
+					'X-WP-Nonce': wpApiSettings.nonce,
+				},
+				body: JSON.stringify(formDataObject),
+			}
+		);
+
+		if (response.ok) {
+			NinteenEightyWoo.settingsLoader().classList.add('hidden');
+			NinteenEightyWoo.settingsSubmit().disabled = false;
+		}
+	}
+}
+
+window.addEventListener('DOMContentLoaded', () => {
+	if (document.body) {
+		if (
+			document.body.classList.contains(
+				'woocommerce_page_NinteenEightyWoo'
+			)
+		) {
+			NinteenEightyWoo.settingsForm().addEventListener(
+				'submit',
+				NinteenEightyWoo.onSettingsFormSubmit
+			);
+		}
+	}
+});

src/Admin.php

@@ -0,0 +1,76 @@
+<?php
+
+declare(strict_types = 1);
+
+namespace NineteenEightyFour\NinteenEightyWoo;
+
+class Admin {
+	/**
+	 * Constructor for the Admin interface class
+	 *
+	 * Initiates any wp-admin related actions, .
+	 */
+	public function __construct() {
+		add_action(
+			'admin_menu',
+			array(
+				__CLASS__,
+				'add_menu_page',
+			)
+		);
+
+		add_action(
+			'admin_init',
+			array(
+				__CLASS__,
+				'enqueue_styles_and_scripts',
+			)
+		);
+	}
+
+	/**
+	 * Add the admin page to the wp-admin sidebar
+	 */
+	public static function add_menu_page(): void {
+		add_submenu_page(
+			'woocommerce',
+			__( '1984 dkPlus Connection', 'NinteenEightyWoo' ),
+			__( 'dkPlus Connection', 'NinteenEightyWoo' ),
+			'manage_options',
+			'NinteenEightyWoo',
+			array( get_called_class(), 'render_admin_page' )
+		);
+	}
+
+	public static function render_admin_page() {
+		require __DIR__ . '/../views/admin.php';
+	}
+
+	public static function enqueue_styles_and_scripts() {
+		wp_enqueue_style(
+			handle: 'ninteen-eighty-woo',
+			src: plugins_url( 'style/ninteen-eighty-woo.css', __DIR__ ),
+			ver: '0.1'
+		);
+
+		wp_enqueue_script(
+			handle: 'ninteen-eighty-woo',
+			src: plugins_url( 'js/ninteen-eighty-woo.js', __DIR__ ),
+			deps: array(
+				'wp-edit-post',
+				'wp-element',
+				'wp-components',
+				'wp-plugins',
+				'wp-data',
+			),
+			ver: '0.1'
+		);
+	}
+
+	public static function logo_url(): string {
+		return plugins_url(
+			'style/1984-logo-semitrans.svg',
+			__DIR__
+		);
+	}
+}

src/Rest/Settings.php

@@ -0,0 +1,41 @@
+<?php
+
+declare(strict_types = 1);
+
+namespace NineteenEightyFour\NinteenEightyWoo\Rest;
+
+use WP_REST_Request;
+use WP_REST_Response;
+
+class Settings {
+	public function __construct() {
+		add_action(
+			'rest_api_init',
+			array( __CLASS__, 'register_route' )
+		);
+	}
+
+	public static function register_route() {
+		register_rest_route(
+			'NinteenEightyWoo/v1',
+			'/settings/',
+			array(
+				'methods'             => 'POST',
+				'callback'            => array( __CLASS__, 'rest_api_callback' ),
+				'permission_callback' => array( __CLASS__, 'permission_check' ),
+			)
+		);
+	}
+
+	public static function rest_api_callback(
+		WP_REST_Request $request
+	): WP_REST_Response {
+		return new WP_REST_Response(
+			array( 'status' => 200 )
+		);
+	}
+
+	public static function permission_check(): bool {
+		return current_user_can( 'manage_options' );
+	}
+}

style/ninteen-eighty-woo.css

@@ -0,0 +1,131 @@
+body.woocommerce_page_NinteenEightyWoo .wrap {
+	width: calc(100%);
+	max-width: 60rem;
+	min-height: 100%;
+	margin: 0 auto;
+}
+
+#ninteen-eighty-woo-wrap {
+	display: flex;
+	flex-direction: column;
+	justify-content: space-between;
+	min-height: calc(100vh - 100px);
+}
+
+#ninteen-eighty-woo-wrap .form-table {
+	display: table;
+}
+
+#ninteen-eighty-woo-wrap #api-key-form-table th {
+	width: 5em;
+}
+
+#ninteen-eighty-woo-wrap table .with-padding {
+	padding: 20px 10px 20px 10px;
+}
+
+#payment-gateway-id-map-table tr th:first-child {
+	width: 10em;
+}
+
+#payment-gateway-id-map-table .payment-id {
+	width: 5em;
+}
+
+#payment-gateway-id-map-table label {
+	display: block;
+	padding-top: 0.3em;
+	margin-bottom: 0.3em;
+}
+
+#ninteen-eighty-woo-wrap #api-key-form-table td {
+	max-width: calc(100vw - 10px - 8rem);
+	width: calc(60rem - 10px - 5em - 4rem);
+}
+
+#api-key-form-table input[type=text] {
+	width: 100%;
+}
+
+#ninteen-eighty-woo-wrap .section {
+	width: calc(100% - 6rem);
+	background-color: #fff;
+	padding: 1rem 2rem;
+	margin: 2rem 0;
+	margin-bottom: 1rem;
+	border: 1px solid #c3c4c7;
+	border-radius: 5px;
+}
+
+#ninteen-eighty-woo-wrap h1 {
+	margin-bottom: 0.2em;
+	margin-top: 1em;
+	font-size: 3rem;
+	font-weight: 700;
+	line-height: 1em;
+}
+
+#ninteen-eighty-woo-wrap .submit-container {
+	width: calc(100% - 2rem);
+	display: flex;
+	align-items: center;
+	flex-wrap: wrap;
+	justify-content: flex-end;
+}
+
+#ninteen-eighty-woo-wrap .loader {
+	margin-right: 1rem;
+}
+
+#payment-gateway-id-map-table .payment-gateway-status {
+	font-weight: normal;
+}
+
+#payment-gateway-id-map-table td.method-id {
+	width: 5em;
+}
+
+#ninteen-eighty-four-logo-container {
+	display: flex;
+	margin-top: 5em;
+	max-width: calc(100% - 2em);
+	width: calc(100%);
+	justify-content: space-between;
+	align-items: flex-start;
+}
+
+#ninteen-eighty-four-logo-container p {
+	margin: 0;
+	font-size: 12px;
+}
+
+#ninteen-eighty-four-logo-container img {
+	flex: 1 1 auto;
+	height: 40px;
+	width: auto;
+	margin-left: 2em;
+}
+
+@media screen and (max-width: 782px) {
+	#ninteen-eighty-woo-wrap h1 {
+		margin-left: 21px;
+	}
+	#ninteen-eighty-woo-wrap #api-key-form-table td {
+		max-width: calc(100vw - 10px - 6rem);
+	}
+	#payment-gateway-id-map-table tr th:first-child {
+		width: 100%;
+	}
+	.payment-gateway-title {
+		display: block;
+		margin-top: 0.2em;
+		font-size: 1.3em;
+	}
+	#payment-gateway-id-map-table label {
+		padding-top: 0;
+	}
+
+	#ninteen-eighty-four-logo-container {
+		width: calc(100% - 6rem);
+	}
+}