Change phone placeholder when country changes

mollie · Jul 31, 2024 · ae98d4d · ae98d4d
1 parent e9534af
commit ae98d4d
Show file tree

Hide file tree

Showing 7 changed files with 92 additions and 35 deletions.
diff --git a/resources/js/blocks/molliePaymentMethod.js b/resources/js/blocks/molliePaymentMethod.js
@@ -197,17 +197,17 @@ const MollieComponent = (props) => {
     }, [activePaymentMethod, onCheckoutValidation, billing.billingData, shippingData.shippingAddress, item, phoneString, inputBirthdate, inputPhone]);
 
     onSubmitLocal = onSubmit
-    const updateIssuer = ( changeEvent ) => {
-        selectIssuer( changeEvent.target.value )
-    };
-    const updateCompany = ( changeEvent ) => {
-        selectCompany( changeEvent.target.value )
-    };
-    const updatePhone = ( changeEvent ) => {
-        selectPhone( changeEvent.target.value )
-    }
-    const updateBirthdate = ( changeEvent ) => {
-        selectBirthdate( changeEvent.target.value )
+    const updateIssuer = (e) => selectIssuer(e.target.value);
+    const updateCompany = (e) => selectCompany(e.target.value);
+    const updatePhone = (e) => selectPhone(e.target.value);
+    const updateBirthdate = (e) => selectBirthdate( e.target.value );
+
+    function fieldMarkup(id, fieldType, label, action, value, placeholder = null) {
+        const className = "wc-block-components-text-input wc-block-components-address-form__" + id;
+        return <div class="custom-input">
+            <label htmlFor={id} dangerouslySetInnerHTML={{__html: label}}></label>
+            <input type={fieldType} name={id} id={id} value={value} onChange={action} placeholder={placeholder}></input>
+        </div>
     }
 
     if (item.issuers && item.name !== "mollie_wc_gateway_creditcard"){
@@ -218,14 +218,6 @@ const MollieComponent = (props) => {
         return <div dangerouslySetInnerHTML={ {__html: item.content} }></div>;
     }
 
-    function fieldMarkup(id, fieldType, label, action, value) {
-        const className = "wc-block-components-text-input wc-block-components-address-form__" + id;
-        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) {
            return;
@@ -234,22 +226,44 @@ const MollieComponent = (props) => {
         return fieldMarkup("billing-company","text", companyField, updateCompany, inputCompany);
     }
 
-    if (item.name === "mollie_wc_gateway_in3"){
-        let fields = [];
-        const birthdateField = item.birthdatePlaceholder ? item.birthdatePlaceholder : "Birthdate";
-        fields.push(fieldMarkup("billing-birthdate", "date", birthdateField, updateBirthdate, inputBirthdate));
-        if (isPhoneFieldVisible === false) {
-            const phoneField = item.phonePlaceholder ? item.phonePlaceholder : "Phone";
-            fields.push(fieldMarkup("billing-phone-in3", "tel", phoneField, updatePhone, inputPhone));
-        }
+    useEffect(() => {
+        const countryCodes = {
+            BE: '+32xxxxxxxxx',
+            NL: '+316xxxxxxxx',
+            DE: '+49xxxxxxxxx',
+            AT: '+43xxxxxxxxx',
+        };
+        const country = billing.billingData.country;
+        item.phonePlaceholder = countryCodes[country] || countryCodes['NL'];
+    }, [billing.billingData.country]);
+
+    if (item.name === "mollie_wc_gateway_in3") {
+        const birthdateField = item.birthdatePlaceholder || "Birthdate";
+        const phoneField = item.phonePlaceholder || "+316xxxxxxxx";
+        const phoneLabel = item.phoneLabel || "Phone";
+        return (
+            <>
+                {fieldMarkup("billing-birthdate", "date", birthdateField, updateBirthdate, inputBirthdate)}
+                {!isPhoneFieldVisible && fieldMarkup("billing-phone-in3", "tel",phoneLabel, updatePhone, inputPhone, phoneField)}
+            </>
+        );
+    }
 
-        return <>{fields}</>;
+    if (item.name === "mollie_wc_gateway_riverty") {
+        const birthdateField = item.birthdatePlaceholder || "Birthdate";
+        const phoneField = item.phonePlaceholder || "+316xxxxxxxx";
+        const phoneLabel = item.phoneLabel || "Phone";
+        return (
+            <>
+                {fieldMarkup("billing-birthdate", "date", birthdateField, updateBirthdate, inputBirthdate)}
+                {!isPhoneFieldVisible && fieldMarkup("billing-phone-riverty", "tel", phoneLabel, updatePhone, inputPhone, phoneField)}
+            </>
+        );
     }
 
     return <div><p>{item.content}</p></div>
 }
 
-
 const molliePaymentMethod = (useEffect, ajaxUrl, filters, gatewayData, availableGateways, item, jQuery, requiredFields, isCompanyFieldVisible, isPhoneFieldVisible) =>{
     let billingCountry = filters.billingCountry
     let cartTotal = filters.cartTotal

diff --git a/resources/js/rivertyCountryPlaceholder.js b/resources/js/rivertyCountryPlaceholder.js
@@ -0,0 +1,13 @@
+(
+    function ({jQuery}) {
+        jQuery(function ($) {
+            $('body').on('change', '#billing_country', function () {
+                if ($('input[name="payment_method"]:checked').val() === 'mollie_wc_gateway_riverty') {
+                    $('body').trigger('update_checkout');
+                }
+            });
+        });
+    })(window)
+
+
+
diff --git a/src/Assets/AssetsModule.php b/src/Assets/AssetsModule.php
@@ -277,6 +277,13 @@ protected function registerFrontendScripts(string $pluginUrl, string $pluginPath
             (string) filemtime($this->getPluginPath($pluginPath, '/public/js/gatewaySurcharge.min.js')),
             true
         );
+        wp_register_script(
+            'mollie-riverty-classic-handles',
+            $this->getPluginUrl($pluginUrl, '/public/js/rivertyCountryPlaceholder.min.js'),
+            ['jquery'],
+            (string) filemtime($this->getPluginPath($pluginPath, '/public/js/rivertyCountryPlaceholder.min.js')),
+            true
+        );
     }
 
     public function registerBlockScripts(string $pluginUrl, string $pluginPath): void
@@ -310,11 +317,11 @@ public function enqueueFrontendScripts($container)
             return;
         }
         wp_enqueue_style('mollie-gateway-icons');
-        $isBillieEnabled = mollieWooCommerceIsGatewayEnabled('mollie_wc_gateway_billie_settings', 'enabled');
         $allMethodsEnabledAtMollie = $container->get('gateway.paymentMethodsEnabledAtMollie');
-        $isBillieEnabledAtMollie = in_array('billie', $allMethodsEnabledAtMollie, true);
-        if ($isBillieEnabled && $isBillieEnabledAtMollie) {
-            wp_enqueue_script('mollie-billie-classic-handles');
+        $isRivertyEnabled = mollieWooCommerceIsGatewayEnabled('mollie_wc_gateway_riverty_settings', 'enabled');
+        $isRivertyEnabledAtMollie = in_array('riverty', $allMethodsEnabledAtMollie, true);
+        if ($isRivertyEnabled && $isRivertyEnabledAtMollie) {
+            wp_enqueue_script('mollie-riverty-classic-handles');
         }
 
         $applePayGatewayEnabled = mollieWooCommerceIsGatewayEnabled('mollie_wc_gateway_applepay_settings', 'enabled');

diff --git a/src/Assets/MollieCheckoutBlocksSupport.php b/src/Assets/MollieCheckoutBlocksSupport.php
@@ -76,6 +76,9 @@ public static function localizeWCBlocksData($dataService, $gatewayInstances)
 
     public static function gatewayDataForWCBlocks(Data $dataService, array $gatewayInstances): array
     {
+        if (is_admin() && !is_ajax()) {
+            return [];
+        }
         $filters = $dataService->wooCommerceFiltersForCheckout();
         $availableGateways = WC()->payment_gateways()->get_available_payment_gateways();
         $availablePaymentMethods = [];
@@ -132,6 +135,14 @@ public static function gatewayDataForWCBlocks(Data $dataService, array $gatewayI
             $title = $gateway->paymentMethod()->title();
             $labelMarkup = "<span style='margin-right: 1em'>{$title}</span>{$gateway->icon}";
             $hasSurcharge = $gateway->paymentMethod()->hasSurcharge();
+            $countryCodes = [
+                'BE' => '+32xxxxxxxxx',
+                'NL' => '+316xxxxxxxx',
+                'DE' => '+49xxxxxxxxx',
+                'AT' => '+43xxxxxxxxx',
+            ];
+            $country = WC()->customer->get_billing_country();
+            $phonePlaceholder = in_array($country, array_keys($countryCodes)) ? $countryCodes[$country] : $countryCodes['NL'];
             $gatewayData[] = [
                 'name' => $gatewayKey,
                 'label' => $labelMarkup,
@@ -152,7 +163,8 @@ public static function gatewayDataForWCBlocks(Data $dataService, array $gatewayI
                 'supports' => self::gatewaySupportsFeatures($gateway->paymentMethod(), $isSepaEnabled),
                 'errorMessage' => $gateway->paymentMethod()->getProperty('errorMessage'),
                 'companyPlaceholder' => $gateway->paymentMethod()->getProperty('companyPlaceholder'),
-                'phonePlaceholder' => $gateway->paymentMethod()->getProperty('phonePlaceholder'),
+                'phoneLabel' => $gateway->paymentMethod()->getProperty('phoneLabel'),
+                'phonePlaceholder' => $phonePlaceholder,
                 'birthdatePlaceholder' => $gateway->paymentMethod()->getProperty('birthdatePlaceholder'),
             ];
         }

diff --git a/src/PaymentMethods/PaymentFieldsStrategies/RivertyFieldsStrategy.php b/src/PaymentMethods/PaymentFieldsStrategies/RivertyFieldsStrategy.php
@@ -63,13 +63,21 @@ protected function dateOfBirth()
     protected function phoneNumber($phoneValue)
     {
         $phoneValue = $phoneValue ?: '';
+        $country = WC()->customer->get_billing_country();
+        $countryCodes = [
+            'BE' => '+32xxxxxxxxx',
+            'NL' => '+316xxxxxxxx',
+            'DE' => '+49xxxxxxxxx',
+            'AT' => '+43xxxxxxxxx',
+        ];
+        $placeholder = in_array($country, array_keys($countryCodes)) ? $countryCodes[$country] : $countryCodes['NL'];
         ?>
         <p class="form-row form-row-wide" id="billing_phone_field">
             <label for="<?= esc_attr(self::FIELD_PHONE); ?>" class=""><?= esc_html__('Phone', 'mollie-payments-for-woocommerce'); ?>
             </label>
             <span class="woocommerce-input-wrapper">
         <input type="tel" class="input-text " name="<?= esc_attr(self::FIELD_PHONE); ?>" id="<?= esc_attr(self::FIELD_PHONE); ?>"
-               placeholder="+316xxxxxxxx"
+               placeholder="<?= esc_attr($placeholder); ?>"
                value="<?= esc_attr($phoneValue); ?>" autocomplete="phone">
         </span>
         </p>

diff --git a/src/PaymentMethods/Riverty.php b/src/PaymentMethods/Riverty.php
@@ -29,6 +29,8 @@ protected function getConfig(): array
             'confirmationDelayed' => false,
             'SEPA' => false,
             'orderMandatory' => true,
+            'phonePlaceholder' => __('Please enter your phone here. +316xxxxxxxx', 'mollie-payments-for-woocommerce'),
+            'birthdatePlaceholder' => __('Please enter your birthdate here.', 'mollie-payments-for-woocommerce'),
         ];
     }
 

diff --git a/webpack.config.js b/webpack.config.js
@@ -30,6 +30,7 @@ function configJavaScript ({ basePath })
     .addEntry('mollieBlockIndex.min', './resources/js/mollieBlockIndex.js')
     .addEntry('paypalButtonBlockComponent.min', './resources/js/paypalButtonBlockComponent.js')
     .addEntry('applepayButtonBlockComponent.min', './resources/js/applepayButtonBlockComponent.js')
+    .addEntry('rivertyCountryPlaceholder.min', './resources/js/rivertyCountryPlaceholder.js')
     .enableSourceMaps(!Encore.isProduction())
 
   return extractEncoreConfig('javascript-configuration')