Show phone field only if hidden

Added some style to block custom field
mollie · May 19, 2024 · 698f28d · 698f28d
1 parent aec8840
commit 698f28d
Show file tree

Hide file tree

Showing 6 changed files with 54 additions and 16 deletions.
diff --git a/resources/js/blocks/molliePaymentMethod.js b/resources/js/blocks/molliePaymentMethod.js
@@ -185,12 +185,14 @@ const MollieComponent = (props) => {
 
     function fieldMarkup(id, fieldType, label, action, value) {
         const className = "wc-block-components-text-input wc-block-components-address-form__" + id;
-        return <div>
-            <input type={fieldType} name={id} id={id} value={value} onChange={action}></input><label htmlFor={id} dangerouslySetInnerHTML={{ __html: label }}></label></div>
+        return <div class="custom-input">
+            <label htmlFor={id} dangerouslySetInnerHTML={{__html: label}}></label>
+            <input type={fieldType} name={id} id={id} value={value} onChange={action}></input>
+        </div>
     }
 
-    if (item.name === "mollie_wc_gateway_billie"){
-        if(isCompanyFieldVisible) {
+    if (item.name === "mollie_wc_gateway_billie") {
+        if (isCompanyFieldVisible) {
            return;
         }
         const companyField = item.companyPlaceholder ? item.companyPlaceholder : "Company name";
@@ -201,7 +203,7 @@ const MollieComponent = (props) => {
         let fields = [];
         const birthdateField = item.birthdatePlaceholder ? item.birthdatePlaceholder : "Birthdate";
         fields.push(fieldMarkup("billing-birthdate", "date", birthdateField, updateBirthdate, inputBirthdate));
-        if (!isPhoneFieldVisible) {
+        if (isPhoneFieldVisible === false) {
             const phoneField = item.phonePlaceholder ? item.phonePlaceholder : "Phone";
             fields.push(fieldMarkup("billing-phone-in3", "tel", phoneField, updatePhone, inputPhone));
         }

diff --git a/resources/js/mollieBlockIndex.js b/resources/js/mollieBlockIndex.js
@@ -22,9 +22,11 @@ import molliePaymentMethod from './blocks/molliePaymentMethod'
 
             function getPhoneField()
             {
-                const shippingPhone = shipping_address.phone ?? false;
-                const billingPhone = billing_address.phone ?? false
-                return billingPhone || shippingPhone;
+                const phoneFieldDataset = document.querySelector('[data-show-phone-field]');
+                if (!phoneFieldDataset) {
+                    return true;
+                }
+                return phoneFieldDataset.dataset.showPhoneField !== "false"
             }
 
             const isCompanyFieldVisible = getCompanyField();

diff --git a/resources/scss/mollie-block-custom-field.scss b/resources/scss/mollie-block-custom-field.scss
@@ -0,0 +1,28 @@
+/* Style the container to match WooCommerce styling */
+.custom-input {
+  margin-bottom: 1.5em;
+  display: flex;
+  flex-direction: column;
+}
+
+.custom-input label {
+  margin-bottom: 0.5em;
+  font-weight: bold;
+}
+
+#billing-birthdate,
+#billing-phone-in3 {
+  width: 100%;
+  padding: 0.75em;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  box-sizing: border-box;
+  font-size: 1em;
+  margin-bottom: 1.25em;
+}
+
+#billing-birthdate {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+}
diff --git a/src/Assets/AssetsModule.php b/src/Assets/AssetsModule.php
@@ -34,6 +34,7 @@ public function enqueueBlockCheckoutScripts(Data $dataService, array $gatewayIns
         }
         wp_enqueue_script(MollieCheckoutBlocksSupport::getScriptHandle());
         wp_enqueue_style('mollie-gateway-icons');
+        wp_enqueue_style('mollie-block-custom-field');
 
         MollieCheckoutBlocksSupport::localizeWCBlocksData($dataService, $gatewayInstances);
     }
@@ -288,6 +289,13 @@ public function registerBlockScripts(string $pluginUrl, string $pluginPath): voi
             (string) filemtime($this->getPluginPath($pluginPath, '/public/js/mollieBlockIndex.min.js')),
             true
         );
+        wp_register_style(
+            'mollie-block-custom-field',
+            $this->getPluginUrl($pluginUrl, '/public/css/mollie-block-custom-field.min.css'),
+            [],
+            (string) filemtime($this->getPluginPath($pluginPath, '/public/css/mollie-block-custom-field.min.css')),
+            'screen'
+        );
     }
 
     /**

diff --git a/src/Gateway/GatewayModule.php b/src/Gateway/GatewayModule.php
@@ -327,16 +327,13 @@ static function ($paymentContext) {
             }
         );
         add_action('add_meta_boxes_woocommerce_page_wc-orders', [$this, 'addShopOrderMetabox'], 10);
-        add_filter('woocommerce_form_field_args', static function ($args, $key, $value) use ($container) {
-            if ($key !== 'billing_phone') {
-                return $args;
-            }
-            if ($args['required'] === true) {
-                update_option('mollie_wc_is_phone_required_flag', true);
-            } else {
+        add_filter('woocommerce_checkout_fields', static function ($fields) use ($container) {
+            if (!isset($fields['billing']['billing_phone'])) {
                 update_option('mollie_wc_is_phone_required_flag', false);
+            } else {
+                update_option('mollie_wc_is_phone_required_flag', true);
             }
-            return $args;
+            return $fields;
         }, 10, 3);
         return true;
     }

diff --git a/webpack.config.js b/webpack.config.js
@@ -46,6 +46,7 @@ function configCss ({ basePath })
     .addStyleEntry('mollie-gateway-icons.min', './resources/scss/mollie-gateway-icons.scss')
     .addStyleEntry('unabledButton.min', './resources/scss/unabledButton.scss')
     .addStyleEntry('mollie-applepaydirect.min', './resources/scss/mollie-applepaydirect.scss')
+    .addStyleEntry('mollie-block-custom-field.min', './resources/scss/mollie-block-custom-field.scss')
     .enableSourceMaps(!Encore.isProduction())
 
   return extractEncoreConfig('css-configuration')