Apply styles from settings

This commit is contained in:
Emili Castells Guasch 2024-05-01 14:54:59 +02:00
parent 27835fc51a
commit 5615994128
3 changed files with 62 additions and 16 deletions

View file

@ -94,6 +94,7 @@ return array(
->action_visible( 'axo_style_root_bg_color' )
->action_visible( 'axo_style_root_error_color' )
->action_visible( 'axo_style_root_font_family' )
->action_visible( 'axo_style_root_text_color_base' )
->action_visible( 'axo_style_root_font_size_base' )
->action_visible( 'axo_style_root_padding' )
->action_visible( 'axo_style_root_primary_color' )
@ -201,7 +202,7 @@ return array(
'title' => __( 'Background Color', 'woocommerce-paypal-payments' ),
'type' => 'text',
'classes' => array( 'ppcp-field-indent' ),
'default' => '#ffffff',
'default' => '',
'screens' => array(
State::STATE_ONBOARDED,
),
@ -212,7 +213,7 @@ return array(
'title' => __( 'Error Color', 'woocommerce-paypal-payments' ),
'type' => 'text',
'classes' => array( 'ppcp-field-indent' ),
'default' => '#d9360b',
'default' => '',
'screens' => array(
State::STATE_ONBOARDED,
),
@ -223,7 +224,18 @@ return array(
'title' => __( 'Font Family', 'woocommerce-paypal-payments' ),
'type' => 'text',
'classes' => array( 'ppcp-field-indent' ),
'default' => 'PayPal Open',
'default' => '',
'screens' => array(
State::STATE_ONBOARDED,
),
'requirements' => array( 'axo' ),
'gateway' => array( 'dcc', 'axo' ),
),
'axo_style_root_text_color_base' => array(
'title' => __( 'Text Color Base', 'woocommerce-paypal-payments' ),
'type' => 'text',
'classes' => array( 'ppcp-field-indent' ),
'default' => '',
'screens' => array(
State::STATE_ONBOARDED,
),
@ -234,7 +246,7 @@ return array(
'title' => __( 'Font Size Base', 'woocommerce-paypal-payments' ),
'type' => 'text',
'classes' => array( 'ppcp-field-indent' ),
'default' => '16px',
'default' => '',
'screens' => array(
State::STATE_ONBOARDED,
),
@ -245,7 +257,7 @@ return array(
'title' => __( 'Padding', 'woocommerce-paypal-payments' ),
'type' => 'text',
'classes' => array( 'ppcp-field-indent' ),
'default' => '4px',
'default' => '',
'screens' => array(
State::STATE_ONBOARDED,
),
@ -256,7 +268,7 @@ return array(
'title' => __( 'Primary Color', 'woocommerce-paypal-payments' ),
'type' => 'text',
'classes' => array( 'ppcp-field-indent' ),
'default' => '#0057ff',
'default' => '',
'screens' => array(
State::STATE_ONBOARDED,
),
@ -279,7 +291,7 @@ return array(
'title' => __( 'Background Color', 'woocommerce-paypal-payments' ),
'type' => 'text',
'classes' => array( 'ppcp-field-indent' ),
'default' => '#ffffff',
'default' => '',
'screens' => array(
State::STATE_ONBOARDED,
),
@ -290,7 +302,7 @@ return array(
'title' => __( 'Border Radius', 'woocommerce-paypal-payments' ),
'type' => 'text',
'classes' => array( 'ppcp-field-indent' ),
'default' => '0.25em',
'default' => '',
'screens' => array(
State::STATE_ONBOARDED,
),
@ -301,7 +313,7 @@ return array(
'title' => __( 'Border Color', 'woocommerce-paypal-payments' ),
'type' => 'text',
'classes' => array( 'ppcp-field-indent' ),
'default' => '#dadddd',
'default' => '',
'screens' => array(
State::STATE_ONBOARDED,
),
@ -312,7 +324,7 @@ return array(
'title' => __( 'Border Width', 'woocommerce-paypal-payments' ),
'type' => 'text',
'classes' => array( 'ppcp-field-indent' ),
'default' => '1px',
'default' => '',
'screens' => array(
State::STATE_ONBOARDED,
),
@ -323,7 +335,7 @@ return array(
'title' => __( 'Text Color Base', 'woocommerce-paypal-payments' ),
'type' => 'text',
'classes' => array( 'ppcp-field-indent' ),
'default' => '#010b0d',
'default' => '',
'screens' => array(
State::STATE_ONBOARDED,
),
@ -334,7 +346,7 @@ return array(
'title' => __( 'Focus Border Color', 'woocommerce-paypal-payments' ),
'type' => 'text',
'classes' => array( 'ppcp-field-indent' ),
'default' => '#0057ff',
'default' => '',
'screens' => array(
State::STATE_ONBOARDED,
),

View file

@ -642,7 +642,8 @@ class AxoManager {
return {
fields: {
cardholderName: {} // optionally pass this to show the card holder name
}
},
styles: this.remove_keys_with_empty_string(this.axoConfig.style_options)
}
}
@ -743,6 +744,20 @@ class AxoManager {
return this.axoConfig?.widgets?.email === 'use_widget';
}
remove_keys_with_empty_string = (obj) => {
for(let key of Object.keys(obj)){
if (obj[key] === ''){
delete obj[key];
}
else if (typeof obj[key] === 'object'){
obj[key] = this.remove_keys_with_empty_string(obj[key]);
if (Object.keys(obj[key]).length === 0 ) delete obj[key];
}
}
return Array.isArray(obj) ? obj.filter(val => val) : obj;
}
}
export default AxoManager;

View file

@ -151,13 +151,13 @@ class AxoManager {
*/
private function script_data() {
return array(
'environment' => array(
'environment' => array(
'is_sandbox' => $this->environment->current_environment() === 'sandbox',
),
'widgets' => array(
'widgets' => array(
'email' => 'render',
),
'insights' => array(
'insights' => array(
'enabled' => true,
'client_id' => ( $this->settings->has( 'client_id' ) ? $this->settings->get( 'client_id' ) : null ),
'session_id' =>
@ -171,6 +171,25 @@ class AxoManager {
'value' => WC()->cart->get_total( 'numeric' ),
),
),
'style_options' => array(
'root' => array(
'backgroundColor' => $this->settings->has( 'axo_style_root_bg_color' ) ? $this->settings->get( 'axo_style_root_bg_color' ) : '',
'errorColor' => $this->settings->has( 'axo_style_root_error_color' ) ? $this->settings->get( 'axo_style_root_error_color' ) : '',
'fontFamily' => $this->settings->has( 'axo_style_root_font_family' ) ? $this->settings->get( 'axo_style_root_font_family' ) : '',
'textColorBase' => $this->settings->has( 'axo_style_root_text_color_base' ) ? $this->settings->get( 'axo_style_root_text_color_base' ) : '',
'fontSizeBase' => $this->settings->has( 'axo_style_root_font_size_base' ) ? $this->settings->get( 'axo_style_root_font_size_base' ) : '',
'padding' => $this->settings->has( 'axo_style_root_padding' ) ? $this->settings->get( 'axo_style_root_padding' ) : '',
'primaryColor' => $this->settings->has( 'axo_style_root_primary_color' ) ? $this->settings->get( 'axo_style_root_primary_color' ) : '',
),
'input' => array(
'backgroundColor' => $this->settings->has( 'axo_style_input_bg_color' ) ? $this->settings->get( 'axo_style_input_bg_color' ) : '',
'borderRadius' => $this->settings->has( 'axo_style_input_border_radius' ) ? $this->settings->get( 'axo_style_input_border_radius' ) : '',
'borderColor' => $this->settings->has( 'axo_style_input_border_color' ) ? $this->settings->get( 'axo_style_input_border_color' ) : '',
'borderWidth' => $this->settings->has( 'axo_style_input_border_width' ) ? $this->settings->get( 'axo_style_input_border_width' ) : '',
'textColorBase' => $this->settings->has( 'axo_style_input_text_color_base' ) ? $this->settings->get( 'axo_style_input_text_color_base' ) : '',
'focusBorderColor' => $this->settings->has( 'axo_style_input_focus_border_color' ) ? $this->settings->get( 'axo_style_input_focus_border_color' ) : '',
),
),
);
}