import { useEffect, useState } from 'react';
import { Alert, Button, Card, Form, Input, Radio, Select, Space, Spin, Typography, message } from 'antd';
import apiFetch from '@wordpress/api-fetch';
import { __, sprintf } from '@wordpress/i18n';
const defaults = {
sahcfwc_stripe_checkout_status: 'no',
sahcfwc_stripe_integration_mode: 'test-mode',
sahcfwc_stripe_admin_test_mode_status: 'no',
sahcfwc_api_key_type: 'standard',
sahcfwc_stripe_test_secret_key: '',
sahcfwc_stripe_live_secret_key: '',
sahcfwc_restricted_test_key: '',
sahcfwc_restricted_live_key: '',
sahcfwc_stripe_test_public_key: '',
sahcfwc_stripe_live_public_key: '',
sahcfwc_stripe_webhook_key: '',
sahcfwc_stripe_checkout_type: 'hosted',
sahcfwc_stripe_embedded_page_id: 0,
sahcfwc_stripe_branding_enabled: 'no',
sahcfwc_stripe_branding_settings: {
display_name: '', logo_url: '', background_color: '', button_color: '', font_family: '', border_style: '',
},
};
const fonts = [
'be_vietnam_pro', 'bitter', 'chakra_petch', 'default', 'hahmlet',
'inconsolata', 'inter', 'lato', 'lora', 'm_plus_1_code', 'montserrat',
'noto_sans', 'noto_sans_jp', 'noto_serif', 'nunito', 'open_sans',
'pridi', 'pt_sans', 'pt_serif', 'raleway', 'roboto', 'roboto_slab',
'source_sans_pro', 'titillium_web', 'ubuntu_mono', 'zen_maru_gothic',
];
function normalize( response ) {
const values = {};
Object.keys( defaults ).forEach( ( key ) => {
values[ key ] = response[ key ] === undefined ? defaults[ key ] : response[ key ];
} );
values.sahcfwc_stripe_branding_settings = {
...defaults.sahcfwc_stripe_branding_settings,
...( response.sahcfwc_stripe_branding_settings || {} ),
};
if ( values.sahcfwc_stripe_checkout_type === 'embedded' ) {
values.sahcfwc_stripe_checkout_type = 'embedded_popup';
}
return values;
}
export default function StripeSettings( { premium = false, setCheckoutType } ) {
const [ form ] = Form.useForm();
const [ loading, setLoading ] = useState( true );
const [ saving, setSaving ] = useState( false );
const [ loadError, setLoadError ] = useState( false );
const [ pages, setPages ] = useState( [] );
const [ pageError, setPageError ] = useState( false );
const enabled = Form.useWatch( 'sahcfwc_stripe_checkout_status', form ) === 'yes';
const mode = Form.useWatch( 'sahcfwc_stripe_integration_mode', form ) || 'test-mode';
const keyType = Form.useWatch( 'sahcfwc_api_key_type', form ) || 'standard';
const checkoutType = Form.useWatch( 'sahcfwc_stripe_checkout_type', form ) || 'hosted';
const branding = Form.useWatch( 'sahcfwc_stripe_branding_enabled', form ) === 'yes';
const adminTestSetting = Form.useWatch( 'sahcfwc_stripe_admin_test_mode_status', form );
const adminTesting = premium && adminTestSetting === 'yes';
const activeTest = mode === 'test-mode' || adminTesting;
const activeLive = mode === 'live-mode';
const embedded = checkoutType !== 'hosted';
const config = window.sahcfwc_customizations_localized_objects || {};
const yesNo = [
{ value: 'yes', label: __( 'Enable', 'sa-hosted-checkout-for-woocommerce' ) },
{ value: 'no', label: __( 'Disable', 'sa-hosted-checkout-for-woocommerce' ) },
];
const inherit = { value: '', label: __( 'Use Stripe Dashboard setting', 'sa-hosted-checkout-for-woocommerce' ) };
async function load() {
setLoading( true );
setLoadError( false );
try {
const response = await apiFetch( { path: '/wp/v2/settings/' } );
const values = normalize( response );
form.setFieldsValue( values );
if ( setCheckoutType ) {
setCheckoutType( values.sahcfwc_stripe_checkout_type );
}
} catch ( error ) {
setLoadError( true );
} finally {
setLoading( false );
}
}
useEffect( () => {
load();
let active = true;
apiFetch( { path: '/wp/v2/pages?context=edit&status=publish&per_page=100&_fields=id,title' } )
.then( ( response ) => {
if ( active && Array.isArray( response ) ) {
setPages( response.map( ( page ) => ( {
value: page.id,
label: page.title.raw || page.title.rendered || String( page.id ),
} ) ) );
}
} ).catch( () => {
if ( active ) {
setPageError( true );
}
} );
return () => { active = false; };
}, [] );
async function save( values ) {
setSaving( true );
try {
const data = normalize( { ...form.getFieldsValue( true ), ...values } );
if ( ! premium ) {
delete data.sahcfwc_stripe_admin_test_mode_status;
}
// Keep inactive credentials intact when changing mode or key type.
const response = await apiFetch( { path: '/wp/v2/settings/', method: 'POST', data } );
const saved = normalize( response );
form.setFieldsValue( saved );
if ( setCheckoutType ) {
setCheckoutType( saved.sahcfwc_stripe_checkout_type );
}
if ( Number( data.sahcfwc_stripe_embedded_page_id ) > 0 && Number( saved.sahcfwc_stripe_embedded_page_id ) !== Number( data.sahcfwc_stripe_embedded_page_id ) ) {
message.error( __( 'The selected payment page could not be used. Choose a published, unprotected page containing [sahcfwc_checkout], not your cart, checkout or account page.', 'sa-hosted-checkout-for-woocommerce' ) );
} else if ( saved.sahcfwc_stripe_checkout_type !== data.sahcfwc_stripe_checkout_type ||
saved.sahcfwc_stripe_checkout_status !== data.sahcfwc_stripe_checkout_status ) {
message.error( __( 'Some settings could not be saved. Check your Stripe keys and selected payment page.', 'sa-hosted-checkout-for-woocommerce' ) );
} else if ( data.sahcfwc_stripe_branding_enabled === 'yes' && Object.keys( defaults.sahcfwc_stripe_branding_settings ).some( ( key ) => String( saved.sahcfwc_stripe_branding_settings[ key ] || '' ).trim().toLowerCase() !== String( data.sahcfwc_stripe_branding_settings[ key ] || '' ).trim().toLowerCase() ) ) {
message.error( __( 'Some branding settings were not accepted. Check the public logo URL and supported color, font and shape values.', 'sa-hosted-checkout-for-woocommerce' ) );
} else {
message.success( __( 'Stripe settings saved.', 'sa-hosted-checkout-for-woocommerce' ) );
}
} catch ( error ) {
// Do not echo API errors that might include a credential or request payload.
message.error( __( 'Unable to save Stripe settings. Check the values and try again.', 'sa-hosted-checkout-for-woocommerce' ) );
} finally {
setSaving( false );
}
}
function credentialRules( prefix, required ) {
return [ {
validator: async ( rule, value ) => {
if ( ! value && required ) {
// translators: %s is the required Stripe API key prefix.
throw new Error( sprintf( __( 'Enter a key beginning with %s.', 'sa-hosted-checkout-for-woocommerce' ), prefix ) );
}
if ( value && ! new RegExp( '^' + prefix + '[A-Za-z0-9]+$' ).test( value ) ) {
// translators: %s is the required Stripe API key prefix.
throw new Error( sprintf( __( 'This field only accepts a key beginning with %s.', 'sa-hosted-checkout-for-woocommerce' ), prefix ) );
}
},
} ];
}
function credentialFields( environment, required ) {
const test = environment === 'test';
const label = test ? __( 'Test', 'sa-hosted-checkout-for-woocommerce' ) : __( 'Live', 'sa-hosted-checkout-for-woocommerce' );
const secretName = keyType === 'restricted' ? 'sahcfwc_restricted_' + environment + '_key' :
'sahcfwc_stripe_' + environment + '_secret_key';
const secretPrefix = ( keyType === 'restricted' ? 'rk_' : 'sk_' ) + environment + '_';
return (
);
}
if ( loadError ) {
return { __( 'Try again', 'sa-hosted-checkout-for-woocommerce' ) } } />;
}
return (
);
}