From e8cace201a1453706b38c948da2afcf415d7703b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Alda=20Vigd=C3=ADs=20Skarph=C3=A9=C3=B0insd=C3=B3ttir?= Date: Mon, 4 Mar 2024 23:46:21 +0100 Subject: [PATCH] Adding draft UI and endpoints for settings --- js/ninteen-eighty-woo.js | 84 +++++++++++++++++++++ src/Admin.php | 76 +++++++++++++++++++ src/Rest/Settings.php | 41 ++++++++++ style/1984-logo-semitrans.svg | 2 + style/ninteen-eighty-woo.css | 131 ++++++++++++++++++++++++++++++++ views/admin.php | 138 ++++++++++++++++++++++++++++++++++ 6 files changed, 472 insertions(+) create mode 100644 js/ninteen-eighty-woo.js create mode 100644 src/Admin.php create mode 100644 src/Rest/Settings.php create mode 100644 style/1984-logo-semitrans.svg create mode 100644 style/ninteen-eighty-woo.css create mode 100644 views/admin.php diff --git a/js/ninteen-eighty-woo.js b/js/ninteen-eighty-woo.js new file mode 100644 index 0000000..5364c2a --- /dev/null +++ b/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 + ); + } + } +}); diff --git a/src/Admin.php b/src/Admin.php new file mode 100644 index 0000000..108dd91 --- /dev/null +++ b/src/Admin.php @@ -0,0 +1,76 @@ + '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' ); + } +} diff --git a/style/1984-logo-semitrans.svg b/style/1984-logo-semitrans.svg new file mode 100644 index 0000000..376f37b --- /dev/null +++ b/style/1984-logo-semitrans.svg @@ -0,0 +1,2 @@ + + diff --git a/style/ninteen-eighty-woo.css b/style/ninteen-eighty-woo.css new file mode 100644 index 0000000..50291f5 --- /dev/null +++ b/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); + } +} diff --git a/views/admin.php b/views/admin.php new file mode 100644 index 0000000..3a24151 --- /dev/null +++ b/views/admin.php @@ -0,0 +1,138 @@ + +
+
+

+ +

+
+

+ + + + + + + +
+ + + +

+ +

+
+
+ +
+

+

+ + + payment_gateways as $p ) : ?> + + + + + + + +
+ title ); ?> + enabled ) : ?> + + + + + + + + + + + + + + +
+ +

+ tag in a hyperlink to the WooCommerce Payment Settings page. + esc_html( __( 'The payment gateways themselves are handled by your WooCommerce Settings, under %1$sthe Payments Section%2$s.', 'NinteenEightyWoo' ) ), + '', + '' + ); + ?> +

+
+ +
+ + +
+
+ +
+

+ +

+ <?php esc_attr_e( 'Ninteen-Eighty-Four', 'NinteenEightyWoo' ); ?> +
+