REDTWOO-69: Implement the Campaign Budget form Component

.eslintrc.js

@@ -81,6 +81,7 @@ module.exports = {
 				definedTypes: [
 					...jsdocConfig.rules[ 'jsdoc/no-undefined-types' ][ 1 ]
 						.definedTypes,
+					'rfw_documentation_link_click',
 				],
 			},
 		],

.externalized.json

@@ -1 +1 @@
-["@woocommerce/components","@woocommerce/navigation","@woocommerce/settings","@wordpress/api-fetch","@wordpress/components","@wordpress/compose","@wordpress/data","@wordpress/element","@wordpress/hooks","@wordpress/i18n","@wordpress/url","lodash","react","react/jsx-runtime"]
+["@woocommerce/components","@woocommerce/currency","@woocommerce/navigation","@woocommerce/number","@woocommerce/settings","@wordpress/api-fetch","@wordpress/components","@wordpress/compose","@wordpress/data","@wordpress/element","@wordpress/hooks","@wordpress/i18n","@wordpress/primitives","@wordpress/url","lodash","react","react/jsx-runtime"]

includes/API/AdPartner/AdAccountsApi.php

@@ -85,7 +85,7 @@ public function get() {
 		}
 
 		return $this->wcs->proxy_get(
-			'/v3/ad_accounts/' . $ad_account_id
+			'/ads/ad_accounts/' . $ad_account_id
 		);
 	}
 }

includes/API/Site/Controllers/RedditConnectionController.php

@@ -321,6 +321,7 @@ public function delete_connection() {
 		Options::delete( OptionDefaults::CATALOG_ID );
 		Options::delete( OptionDefaults::FEED_STATUS );
 		Options::delete( OptionDefaults::WCS_PRODUCTS_TOKEN );
+		Options::delete( OptionDefaults::ADS_ACCOUNT_CURRENCY );
 		Transients::delete( TransientDefaults::REDDIT_ACCOUNT_EMAIL );
 		Transients::delete( TransientDefaults::PIXEL_SCRIPT );
 
@@ -401,6 +402,14 @@ public function do_config( WP_REST_Request $request ) {
 				}
 			}
 
+			// Set the ad account currency.
+			$ad_account = $this->ad_partner_api->ad_accounts->get();
+			if ( ! is_wp_error( $ad_account ) ) {
+				$ad_account_data     = $ad_account->get_data();
+				$ad_account_currency = $ad_account_data['data']['currency'] ?? '';
+				Options::set( OptionDefaults::ADS_ACCOUNT_CURRENCY, $ad_account_currency );
+			}
+
 			/**
 			 * Triggers when the Reddit onboarding process is completed.
 			 *
@@ -420,13 +429,18 @@ public function do_config( WP_REST_Request $request ) {
 	 * @return WP_REST_Response
 	 */
 	public function get_connection_details() {
+		$currency = Options::get( OptionDefaults::ADS_ACCOUNT_CURRENCY );
+		$symbol   = html_entity_decode( get_woocommerce_currency_symbol( $currency ), ENT_QUOTES );
+
 		return rest_ensure_response(
 			array(
 				'business_id'     => Options::get( OptionDefaults::BUSINESS_ID ),
 				'business_name'   => Options::get( OptionDefaults::BUSINESS_NAME ),
 				'ad_account_id'   => Options::get( OptionDefaults::AD_ACCOUNT_ID ),
 				'ad_account_name' => Options::get( OptionDefaults::AD_ACCOUNT_NAME ),
 				'pixel_id'        => Options::get( OptionDefaults::PIXEL_ID ),
+				'currency'        => $currency,
+				'symbol'          => $symbol,
 			)
 		);
 	}

includes/Utils/Storage/OptionDefaults.php

@@ -168,6 +168,13 @@ final class OptionDefaults {
 	 */
 	public const WCS_PRODUCTS_TOKEN = 'wcs_products_token';
 
+	/**
+	 * Option key to store the Ad Partner's currency.
+	 *
+	 * @since 0.1.0
+	 */
+	public const ADS_ACCOUNT_CURRENCY = 'ad_account_currency';
+
 	/**
 	 * Returns default values for all known Ad Partner options.
 	 *
@@ -198,6 +205,7 @@ public static function get_all(): array {
 			self::EXPORT_PRODUCT_IDS    => array(),
 			self::LAST_EXPORT_TIMESTAMP => 0,
 			self::WCS_PRODUCTS_TOKEN    => '',
+			self::ADS_ACCOUNT_CURRENCY  => get_woocommerce_currency(),
 		);
 	}
 }

js/src/components/adaptive-form/adaptive-form-context.js

@@ -0,0 +1,82 @@
+/**
+ * External dependencies
+ */
+import { createContext, useContext } from '@wordpress/element';
+
+/**
+ * @typedef {import('react').React} React
+ */
+
+/**
+ * @typedef {Object} InputProps
+ * @property {*} value Form value.
+ * @property {boolean} checked Form value converted to boolean.
+ * @property {*} selected Form value.
+ * @property {(value: Event<HTMLInputElement> | *) => void} onChange Function to handle onChange event.
+ * @property {() => void} onBlur Function to handle onBlur event.
+ * @property {'has-error' | undefined} className 'has-error' if the form value is invalid and marked as touched. `undefined` otherwise.
+ * @property {string | undefined | null} help The corresponding value in form `errors` if the form value is marked as touched. `null` otherwise.
+ */
+
+/**
+ * @typedef {Object} AdaptiveFormContextAdapter
+ * @property {boolean} isSubmitting `true` if the form is currently being submitted.
+ * @property {boolean} isSubmitted Set to `true` after the form is submitted. Initial value and during submission are set to `false`.
+ * @property { HTMLElement | null} submitter Set to the element triggering the `handleSubmit` callback until the processing of `onSubmit` is completed. `null` otherwise.
+ * @property {number} validationRequestCount The current validation request count.
+ * @property {boolean} requestedShowValidation Whether have requested verification. It will be reset to false after calling hideValidation.
+ * @property {() => void} showValidation Increase the validation request count by 1.
+ * @property {() => void} hideValidation Reset the validation request count to 0.
+ */
+
+/**
+ * @typedef {Object} AdaptiveFormContext
+ * @property {Object} values Form values, e.g. `{ nickname: '' age: 0 }`.
+ * @property {Object} errors Object with key-value pairs representing errors for form values. Empty object if no errors. For example, `{ nickname: 'Nickname is required.' }`.
+ * @property {Object} touched Object with key-value pairs representing the corresponding input fields of the form values have received focus, e.g. `{ nickname: true }`.
+ * @property {boolean} isValidForm `true` if form values pass the validation.
+ * @property {boolean} isDirty `true` after any of the form values is modified.
+ * @property {(name: string, value: *) => void} setValue Function to set a form value.
+ * @property {(name: string) => InputProps} getInputProps Function to get the corresponding input props by a name of the form `values`. The returned props is usually used to assign to input field.
+ * @property {() => Promise<Object>} handleSubmit Function to trigger form submission.
+ * @property {(initialValues: Object) => void} resetForm Function to reset form with given initial values.
+ * @property {React.Dispatch<React.SetStateAction<Object>>} setTouched Function to update the `touched` state, e.g. `setTouched( { nickname: false } )`.
+ * @property {AdaptiveFormContextAdapter} adapter Additional enhancements to AdaptiveForm.
+ */
+
+export const AdaptiveFormContext = createContext( null );
+
+/**
+ * AdaptiveForm's context hook.
+ *
+ * @return {AdaptiveFormContext} AdaptiveForm's context.
+ * @throws Will throw an error if its context provider is not existing in its parents.
+ */
+export function useAdaptiveFormContext() {
+	const adaptiveFormContext = useContext( AdaptiveFormContext );
+
+	if ( adaptiveFormContext === null ) {
+		throw new Error(
+			'useAdaptiveFormContext was used outside of its context provider AdaptiveForm.'
+		);
+	}
+
+	return adaptiveFormContext;
+}
+
+/**
+ * AdaptiveForm's input props hook.
+ *
+ * @param {string} key Key of the form value.
+ * @param {string} [validationKey=key] Key of the form value to be used for validation.
+ *
+ * @return {Object} Props for an adaptive form input.
+ */
+export function useAdaptiveFormInputProps( key, validationKey = key ) {
+	const { getInputProps, adapter } = useAdaptiveFormContext();
+
+	return {
+		...getInputProps( key ),
+		helper: adapter.renderRequestedValidation( validationKey ),
+	};
+}