Get Currency and Email Address from Stores Address Form

src/OnboardingSPA/pages/Steps/Ecommerce/StepAddress/index.js

@@ -11,10 +11,11 @@ import NewfoldLargeCard from '../../../../components/NewfoldLargeCard';
 import { store as nfdOnboardingStore } from '../../../../store';
 import content from '../content.json';
 import countries from '../countries.json';
+import currencies from '../currencies.json';
 import { useWPSettings } from '../useWPSettings';
 
 const StepAddress = () => {
-	const isLargeViewport = useViewportMatch( 'medium' );
+	const isLargeViewport = useViewportMatch('medium');
 	const {
 		setDrawerActiveView,
 		setIsDrawerOpened,
@@ -44,7 +45,9 @@ const StepAddress = () => {
 			'woocommerce_store_address',
 			'woocommerce_store_city',
 			'woocommerce_store_postcode',
-			'woocommerce_default_country'
+			'woocommerce_default_country',
+			'woocommerce_currency',
+			'woocommerce_email_from_address',
 		];
 		if (settings !== null && currentData.storeDetails.address === undefined) {
 			setCurrentOnboardingData({
@@ -84,8 +87,8 @@ const StepAddress = () => {
 		if (country === defaultCountry && state === undefined) {
 			state = defaultState;
 		}
-		if ( states.length == 0 ) {
-			state = ""   // edge case to handle when the user goes back to onboarding and changes from a country with state to no state
+		if (states.length == 0) {
+			state = ''; // edge case to handle when the user goes back to onboarding and changes from a country with state to no state
 		}
 		let place = '';
 		if (['country', 'state'].includes(fieldName)) {
@@ -133,6 +136,7 @@ const StepAddress = () => {
 							// );
 							navigate('/ecommerce/step/tax');
 						}}
+						style={{ display: 'grid', justifyItems: 'center' }}
 					>
 						<div className='nfd-card-heading center onboarding-ecommerce-step'>
 							<CardHeader
@@ -145,8 +149,8 @@ const StepAddress = () => {
 							{settings === null && <p>Loading your details...</p>}
 						</div>
 						<div className='store-address-form'>
-							<div>
-								<label data-required>
+							<div data-name='country'>
+								<label aria-required>
 									{__('Where is your store based?', 'wp-module-onboarding')}
 								</label>
 								{settings === null ? (
@@ -167,8 +171,8 @@ const StepAddress = () => {
 									</select>
 								)}
 							</div>
-							<div>
-								<label data-required>
+							<div data-name='woocommerce_store_address'>
+								<label aria-required>
 									{__('Address', 'wp-module-onboarding')}
 								</label>
 								<input
@@ -179,9 +183,12 @@ const StepAddress = () => {
 									{...fieldProps}
 								/>
 							</div>
-							<div className='sm:col-layout md:row-layout full-address-fields' style={{"--fields":`${states.length === 0 || settings === null  ? 2 : 3}`}}>
-								<div>
-									<label data-required>
+							<div
+								data-name='full-address'
+								data-state-empty={states.length === 0}
+							>
+								<div data-name='woocommerce_store_city'>
+									<label aria-required>
 										{__('City', 'wp-module-onboarding')}
 									</label>
 									<input
@@ -193,28 +200,30 @@ const StepAddress = () => {
 									/>
 								</div>
 								{states.length === 0 || settings === null ? null : (
-								<div>
-									<label data-required>
-										{__('State', 'wp-module-onboarding')}
-									</label>
+									<div data-name='state'>
+										<label aria-required>
+											{__('State', 'wp-module-onboarding')}
+										</label>
 										<select
 											type='text'
 											name='state'
 											required
-											defaultValue={selectedCountry==defaultCountry?defaultState:""}
+											defaultValue={
+												selectedCountry == defaultCountry ? defaultState : ''
+											}
 											{...fieldProps}
 										>
-											<option key={""} value={""} selected />
+											<option key={''} value={''} selected />
 											{states.map((state) => (
 												<option key={state.code} value={state.code}>
 													{state.name}
 												</option>
 											))}
 										</select>
-								</div>
+									</div>
 								)}
-								<div>
-									<label data-required>
+								<div data-name='woocommerce_store_postcode'>
+									<label aria-required>
 										{__('Postal Code', 'wp-module-onboarding')}
 									</label>
 									<input
@@ -226,6 +235,40 @@ const StepAddress = () => {
 									/>
 								</div>
 							</div>
+							<div>
+								<label aria-required>
+									{__('Email', 'wp-module-onboarding')}
+								</label>
+								<input
+									name='woocommerce_email_from_address'
+									type='email'
+									required
+									defaultValue={address?.woocommerce_email_from_address}
+									{...fieldProps}
+								/>
+							</div>
+							<div>
+								<label>
+									{__(
+										'What currency do you want to display in your store?',
+										'wp-module-onboarding'
+									)}
+								</label>
+								<select
+									type='text'
+									name='woocommerce_currency'
+									value={address?.woocommerce_currency}
+									{...fieldProps}
+								>
+									{Object.entries(currencies).map(([code, currency]) => (
+										<option
+											key={code}
+											value={code}
+											dangerouslySetInnerHTML={{ __html: currency }}
+										/>
+									))}
+								</select>
+							</div>
 							<em style={{ display: 'inline' }}>* required</em>
 						</div>
 						<button

src/OnboardingSPA/pages/Steps/Ecommerce/currencies.json

@@ -0,0 +1,165 @@
+{
+	"AED": "United Arab Emirates dirham (AED) (د.إ)",
+	"AFN": "Afghan afghani (AFN) (؋)",
+	"ALL": "Albanian lek (ALL) (L)",
+	"AMD": "Armenian dram (AMD) (AMD)",
+	"ANG": "Netherlands Antillean guilder (ANG) (ƒ)",
+	"AOA": "Angolan kwanza (AOA) (Kz)",
+	"ARS": "Argentine peso (ARS) ($)",
+	"AUD": "Australian dollar (AUD) ($)",
+	"AWG": "Aruban florin (AWG) (Afl.)",
+	"AZN": "Azerbaijani manat (AZN) (AZN)",
+	"BAM": "Bosnia and Herzegovina convertible mark (BAM) (KM)",
+	"BBD": "Barbadian dollar (BBD) ($)",
+	"BDT": "Bangladeshi taka (BDT) (৳ )",
+	"BGN": "Bulgarian lev (BGN) (лв.)",
+	"BHD": "Bahraini dinar (BHD) (.د.ب)",
+	"BIF": "Burundian franc (BIF) (Fr)",
+	"BMD": "Bermudian dollar (BMD) ($)",
+	"BND": "Brunei dollar (BND) ($)",
+	"BOB": "Bolivian boliviano (BOB) (Bs.)",
+	"BRL": "Brazilian real (BRL) (R$)",
+	"BSD": "Bahamian dollar (BSD) ($)",
+	"BTC": "Bitcoin (BTC) (฿)",
+	"BTN": "Bhutanese ngultrum (BTN) (Nu.)",
+	"BWP": "Botswana pula (BWP) (P)",
+	"BYR": "Belarusian ruble (old) (BYR) (Br)",
+	"BYN": "Belarusian ruble (BYN) (Br)",
+	"BZD": "Belize dollar (BZD) ($)",
+	"CAD": "Canadian dollar (CAD) ($)",
+	"CDF": "Congolese franc (CDF) (Fr)",
+	"CHF": "Swiss franc (CHF) (CHF)",
+	"CLP": "Chilean peso (CLP) ($)",
+	"CNY": "Chinese yuan (CNY) (¥)",
+	"COP": "Colombian peso (COP) ($)",
+	"CRC": "Costa Rican colón (CRC) (₡)",
+	"CUC": "Cuban convertible peso (CUC) ($)",
+	"CUP": "Cuban peso (CUP) ($)",
+	"CVE": "Cape Verdean escudo (CVE) ($)",
+	"CZK": "Czech koruna (CZK) (Kč)",
+	"DJF": "Djiboutian franc (DJF) (Fr)",
+	"DKK": "Danish krone (DKK) (kr.)",
+	"DOP": "Dominican peso (DOP) (RD$)",
+	"DZD": "Algerian dinar (DZD) (د.ج)",
+	"EGP": "Egyptian pound (EGP) (EGP)",
+	"ERN": "Eritrean nakfa (ERN) (Nfk)",
+	"ETB": "Ethiopian birr (ETB) (Br)",
+	"EUR": "Euro (EUR) (€)",
+	"FJD": "Fijian dollar (FJD) ($)",
+	"FKP": "Falkland Islands pound (FKP) (£)",
+	"GBP": "Pound sterling (GBP) (£)",
+	"GEL": "Georgian lari (GEL) (₾)",
+	"GGP": "Guernsey pound (GGP) (£)",
+	"GHS": "Ghana cedi (GHS) (₵)",
+	"GIP": "Gibraltar pound (GIP) (£)",
+	"GMD": "Gambian dalasi (GMD) (D)",
+	"GNF": "Guinean franc (GNF) (Fr)",
+	"GTQ": "Guatemalan quetzal (GTQ) (Q)",
+	"GYD": "Guyanese dollar (GYD) ($)",
+	"HKD": "Hong Kong dollar (HKD) ($)",
+	"HNL": "Honduran lempira (HNL) (L)",
+	"HRK": "Croatian kuna (HRK) (kn)",
+	"HTG": "Haitian gourde (HTG) (G)",
+	"HUF": "Hungarian forint (HUF) (Ft)",
+	"IDR": "Indonesian rupiah (IDR) (Rp)",
+	"ILS": "Israeli new shekel (ILS) (₪)",
+	"IMP": "Manx pound (IMP) (£)",
+	"INR": "Indian rupee (INR) (₹)",
+	"IQD": "Iraqi dinar (IQD) (د.ع)",
+	"IRR": "Iranian rial (IRR) (﷼)",
+	"IRT": "Iranian toman (IRT) (تومان)",
+	"ISK": "Icelandic króna (ISK) (kr.)",
+	"JEP": "Jersey pound (JEP) (£)",
+	"JMD": "Jamaican dollar (JMD) ($)",
+	"JOD": "Jordanian dinar (JOD) (د.ا)",
+	"JPY": "Japanese yen (JPY) (¥)",
+	"KES": "Kenyan shilling (KES) (KSh)",
+	"KGS": "Kyrgyzstani som (KGS) (сом)",
+	"KHR": "Cambodian riel (KHR) (៛)",
+	"KMF": "Comorian franc (KMF) (Fr)",
+	"KPW": "North Korean won (KPW) (₩)",
+	"KRW": "South Korean won (KRW) (₩)",
+	"KWD": "Kuwaiti dinar (KWD) (د.ك)",
+	"KYD": "Cayman Islands dollar (KYD) ($)",
+	"KZT": "Kazakhstani tenge (KZT) (₸)",
+	"LAK": "Lao kip (LAK) (₭)",
+	"LBP": "Lebanese pound (LBP) (ل.ل)",
+	"LKR": "Sri Lankan rupee (LKR) (රු)",
+	"LRD": "Liberian dollar (LRD) ($)",
+	"LSL": "Lesotho loti (LSL) (L)",
+	"LYD": "Libyan dinar (LYD) (ل.د)",
+	"MAD": "Moroccan dirham (MAD) (د.م.)",
+	"MDL": "Moldovan leu (MDL) (MDL)",
+	"MGA": "Malagasy ariary (MGA) (Ar)",
+	"MKD": "Macedonian denar (MKD) (ден)",
+	"MMK": "Burmese kyat (MMK) (Ks)",
+	"MNT": "Mongolian tögrög (MNT) (₮)",
+	"MOP": "Macanese pataca (MOP) (P)",
+	"MRU": "Mauritanian ouguiya (MRU) (UM)",
+	"MUR": "Mauritian rupee (MUR) (₨)",
+	"MVR": "Maldivian rufiyaa (MVR) (.ރ)",
+	"MWK": "Malawian kwacha (MWK) (MK)",
+	"MXN": "Mexican peso (MXN) ($)",
+	"MYR": "Malaysian ringgit (MYR) (RM)",
+	"MZN": "Mozambican metical (MZN) (MT)",
+	"NAD": "Namibian dollar (NAD) (N$)",
+	"NGN": "Nigerian naira (NGN) (₦)",
+	"NIO": "Nicaraguan córdoba (NIO) (C$)",
+	"NOK": "Norwegian krone (NOK) (kr)",
+	"NPR": "Nepalese rupee (NPR) (₨)",
+	"NZD": "New Zealand dollar (NZD) ($)",
+	"OMR": "Omani rial (OMR) (ر.ع.)",
+	"PAB": "Panamanian balboa (PAB) (B/.)",
+	"PEN": "Sol (PEN) (S/)",
+	"PGK": "Papua New Guinean kina (PGK) (K)",
+	"PHP": "Philippine peso (PHP) (₱)",
+	"PKR": "Pakistani rupee (PKR) (₨)",
+	"PLN": "Polish złoty (PLN) (zł)",
+	"PRB": "Transnistrian ruble (PRB) (р.)",
+	"PYG": "Paraguayan guaraní (PYG) (₲)",
+	"QAR": "Qatari riyal (QAR) (ر.ق)",
+	"RON": "Romanian leu (RON) (lei)",
+	"RSD": "Serbian dinar (RSD) (рсд)",
+	"RUB": "Russian ruble (RUB) (₽)",
+	"RWF": "Rwandan franc (RWF) (Fr)",
+	"SAR": "Saudi riyal (SAR) (ر.س)",
+	"SBD": "Solomon Islands dollar (SBD) ($)",
+	"SCR": "Seychellois rupee (SCR) (₨)",
+	"SDG": "Sudanese pound (SDG) (ج.س.)",
+	"SEK": "Swedish krona (SEK) (kr)",
+	"SGD": "Singapore dollar (SGD) ($)",
+	"SHP": "Saint Helena pound (SHP) (£)",
+	"SLL": "Sierra Leonean leone (SLL) (Le)",
+	"SOS": "Somali shilling (SOS) (Sh)",
+	"SRD": "Surinamese dollar (SRD) ($)",
+	"SSP": "South Sudanese pound (SSP) (£)",
+	"STN": "São Tomé and Príncipe dobra (STN) (Db)",
+	"SYP": "Syrian pound (SYP) (ل.س)",
+	"SZL": "Swazi lilangeni (SZL) (E)",
+	"THB": "Thai baht (THB) (฿)",
+	"TJS": "Tajikistani somoni (TJS) (ЅМ)",
+	"TMT": "Turkmenistan manat (TMT) (m)",
+	"TND": "Tunisian dinar (TND) (د.ت)",
+	"TOP": "Tongan paʻanga (TOP) (T$)",
+	"TRY": "Turkish lira (TRY) (₺)",
+	"TTD": "Trinidad and Tobago dollar (TTD) ($)",
+	"TWD": "New Taiwan dollar (TWD) (NT$)",
+	"TZS": "Tanzanian shilling (TZS) (Sh)",
+	"UAH": "Ukrainian hryvnia (UAH) (₴)",
+	"UGX": "Ugandan shilling (UGX) (UGX)",
+	"USD": "United States (US) dollar (USD) ($)",
+	"UYU": "Uruguayan peso (UYU) ($)",
+	"UZS": "Uzbekistani som (UZS) (UZS)",
+	"VEF": "Venezuelan bolívar (VEF) (Bs F)",
+	"VES": "Bolívar soberano (VES) (Bs.S)",
+	"VND": "Vietnamese đồng (VND) (₫)",
+	"VUV": "Vanuatu vatu (VUV) (Vt)",
+	"WST": "Samoan tālā (WST) (T)",
+	"XAF": "Central African CFA franc (XAF) (CFA)",
+	"XCD": "East Caribbean dollar (XCD) ($)",
+	"XOF": "West African CFA franc (XOF) (CFA)",
+	"XPF": "CFP franc (XPF) (Fr)",
+	"YER": "Yemeni rial (YER) (﷼)",
+	"ZAR": "South African rand (ZAR) (R)",
+	"ZMW": "Zambian kwacha (ZMW) (ZK)"
+}