From e10436d82baf6194946ad6ba37de9146bd849322 Mon Sep 17 00:00:00 2001
From: aulisius <aulisius7@gmail.com>
Date: Tue, 6 Sep 2022 08:10:23 +0530
Subject: [PATCH 1/4] PRESS4-39 Fix responsiveness for ecommerce steps

---
 .../Steps/Ecommerce/StepAddress/index.js      | 141 ++++++++-------
 .../pages/Steps/Ecommerce/stylesheet.scss     | 161 ++++++++++++++----
 2 files changed, 201 insertions(+), 101 deletions(-)

diff --git a/src/OnboardingSPA/pages/Steps/Ecommerce/StepAddress/index.js b/src/OnboardingSPA/pages/Steps/Ecommerce/StepAddress/index.js
index 33c51908e..3a2da9caf 100644
--- a/src/OnboardingSPA/pages/Steps/Ecommerce/StepAddress/index.js
+++ b/src/OnboardingSPA/pages/Steps/Ecommerce/StepAddress/index.js
@@ -42,7 +42,6 @@ const StepAddress = () => {
 	useEffect(() => {
 		let addressKeys = [
 			'woocommerce_store_address',
-			'woocommerce_store_address_2',
 			'woocommerce_store_city',
 			'woocommerce_store_postcode',
 			'woocommerce_default_country'
@@ -72,8 +71,8 @@ const StepAddress = () => {
 	let defaultPlace =
 		address?.woocommerce_default_country ??
 		settings?.woocommerce_default_country ??
-		"US:AZ";
-	let [defaultCountry, defaultState] = defaultPlace.split(":");
+		'US:AZ';
+	let [defaultCountry, defaultState] = defaultPlace.split(':');
 	let selectedCountry = address?.country ?? defaultCountry;
 	let states =
 		countries?.find((country) => country.code === selectedCountry)?.states ??
@@ -82,10 +81,10 @@ const StepAddress = () => {
 		let fieldName = event.target.name;
 		let newValue = event.target.value;
 		let { country = selectedCountry, state = defaultState } = address;
-		let place = "";
-		if (["country", "state"].includes(fieldName)) {
+		let place = '';
+		if (['country', 'state'].includes(fieldName)) {
 			place =
-				fieldName === "country"
+				fieldName === 'country'
 					? `${newValue}:${state}`
 					: `${country}:${newValue}`;
 		}
@@ -95,7 +94,7 @@ const StepAddress = () => {
 				address: {
 					...currentData.storeDetails.address,
 					[fieldName]: newValue,
-					...(place !== "" && {
+					...(place !== '' && {
 						woocommerce_default_country: place,
 					}),
 				},
@@ -105,7 +104,7 @@ const StepAddress = () => {
 	return (
 		<CommonLayout isBgPrimary isCentered>
 			<NewfoldLargeCard className='nfd-ecommerce-address-step'>
-				<div className='nfd-onboarding-experience-step onboarding-ecommerce-step'>
+				<div className='onboarding-ecommerce-step'>
 					<form
 						className='onboarding-ecommerce-step'
 						onSubmit={(event) => {
@@ -130,90 +129,102 @@ const StepAddress = () => {
 						<div className='nfd-card-heading center onboarding-ecommerce-step'>
 							<CardHeader
 								heading={__(content.stepAddressHeading, 'wp-module-onboarding')}
-								subHeading={__(content.stepAddressSubHeading, 'wp-module-onboarding')}
+								subHeading={__(
+									content.stepAddressSubHeading,
+									'wp-module-onboarding'
+								)}
 							/>
 							{settings === null && <p>Loading your details...</p>}
 						</div>
 						<div className='store-address-form'>
 							<div>
-								<label>{__('Address line 1', 'wp-module-onboarding')}</label>
-								<input
-									name='woocommerce_store_address'
-									type='text'
-									required
-									defaultValue={address?.woocommerce_store_address}
-									{...fieldProps}
-								/>
-							</div>
-							<div>
-								<label>{__('Address line 2', 'wp-module-onboarding')}</label>
-								<input
-									name='woocommerce_store_address_2'
-									type='text'
-									defaultValue={address?.woocommerce_store_address_2}
-									{...fieldProps}
-								/>
-							</div>
-							<div>
-								<label>{__('City', 'wp-module-onboarding')}</label>
-								<input
-									name='woocommerce_store_city'
-									type='text'
-									required
-									defaultValue={address?.woocommerce_store_city}
-									{...fieldProps}
-								/>
-							</div>
-							<div>
-								<label>{__('State', 'wp-module-onboarding')}</label>
-								{states.length === 0 || settings === null ? (
-									<input type='text' name='state' disabled={settings === null} {...fieldProps} />
+								<label data-required>
+									{__('Where is your store based?', 'wp-module-onboarding')}
+								</label>
+								{settings === null ? (
+									<input type='text' disabled />
 								) : (
 									<select
 										type='text'
-										name='state'
+										name='country'
 										required
-										defaultValue={defaultState}
+										defaultValue={selectedCountry}
 										{...fieldProps}
 									>
-										{states.map((state) => (
-											<option key={state.code} value={state.code}>
-												{state.name}
+										{countries.map((country) => (
+											<option key={country.code} value={country.code}>
+												{country.name}
 											</option>
 										))}
 									</select>
 								)}
 							</div>
 							<div>
-								<label>{__('Postal Code', 'wp-module-onboarding')}</label>
+								<label data-required>
+									{__('Address', 'wp-module-onboarding')}
+								</label>
 								<input
-									name='woocommerce_store_postcode'
+									name='woocommerce_store_address'
 									type='text'
 									required
-									defaultValue={address?.woocommerce_store_postcode}
+									defaultValue={address?.woocommerce_store_address}
 									{...fieldProps}
 								/>
 							</div>
-							<div>
-								<label>{__('Country', 'wp-module-onboarding')}</label>
-								{settings === null ? (
-									<input type='text' disabled />
-								) : (
-									<select
+							<div className='sm:col-layout md:row-layout full-address-fields'>
+								<div>
+									<label data-required>
+										{__('City', 'wp-module-onboarding')}
+									</label>
+									<input
+										name='woocommerce_store_city'
 										type='text'
-										name='country'
 										required
-										defaultValue={selectedCountry}
+										defaultValue={address?.woocommerce_store_city}
 										{...fieldProps}
-									>
-										{countries.map((country) => (
-											<option key={country.code} value={country.code}>
-												{country.name}
-											</option>
-										))}
-									</select>
-								)}
+									/>
+								</div>
+								<div>
+									<label data-required>
+										{__('State', 'wp-module-onboarding')}
+									</label>
+									{states.length === 0 || settings === null ? (
+										<input
+											type='text'
+											name='state'
+											disabled={settings === null}
+											{...fieldProps}
+										/>
+									) : (
+										<select
+											type='text'
+											name='state'
+											required
+											defaultValue={defaultState}
+											{...fieldProps}
+										>
+											{states.map((state) => (
+												<option key={state.code} value={state.code}>
+													{state.name}
+												</option>
+											))}
+										</select>
+									)}
+								</div>
+								<div>
+									<label data-required>
+										{__('Postal Code', 'wp-module-onboarding')}
+									</label>
+									<input
+										name='woocommerce_store_postcode'
+										type='text'
+										required
+										defaultValue={address?.woocommerce_store_postcode}
+										{...fieldProps}
+									/>
+								</div>
 							</div>
+							<em style={{ display: 'inline' }}>* required</em>
 						</div>
 						<button
 							className='nfd-nav-card-button nfd-card-button'
diff --git a/src/OnboardingSPA/pages/Steps/Ecommerce/stylesheet.scss b/src/OnboardingSPA/pages/Steps/Ecommerce/stylesheet.scss
index ef87503cc..471dca6a4 100644
--- a/src/OnboardingSPA/pages/Steps/Ecommerce/stylesheet.scss
+++ b/src/OnboardingSPA/pages/Steps/Ecommerce/stylesheet.scss
@@ -1,48 +1,59 @@
-.nfd-ecommerce-address-step {
-	@media (max-width: #{($break-medium - 1)}) {
-		width: 70vw;
-		// height: 80vh;
+@media (max-width: #{ ($break-medium - 1) }) {
+	.sm\:col-layout {
+		display: flex;
+		flex-direction: column;
+		justify-content: space-between;
+		gap: min(1.5em, 24px);
 	}
+}
 
-	.store-address-form {
-		display: grid;
-		gap: 1.5em;
-		grid-template-columns: auto;
-		padding: 1em 0;
+@media (min-width: #{ ($break-medium) }) {
+	.md\:row-layout {
+		display: flex;
+		flex-direction: row;
+		justify-content: space-between;
 	}
+}
 
-	form.onboarding-ecommerce-step {
-		height: 75%;
-		font-size: 1em;
+.onboarding-ecommerce-step {
+	.nfd-nav-card-button {
+		min-height: 4vh;
 	}
+}
+
+.nfd-ecommerce-address-step {
+	padding: 1rem 0;
 
 	label {
 		display: block;
-		font-size: 1em;
+		font-size: 16px;
+		font-weight: 500;
 		line-height: 1;
 		padding-bottom: 5px;
 	}
 
+	label[data-required="true"]::after {
+		content: " *";
+	}
+
 	input,
 	select {
 		font-size: 1em;
-		padding-left: 17px;
-		width: 300px;
-		min-height: 32px;
+		padding-left: 1.3em;
 		border: 1px solid #d6d6d6;
 		border-radius: 2px;
 	}
 
-	@media (min-width: #{($break-medium)} ) {
-		form.onboarding-ecommerce-step {
-			height: unset;
-		}
+	@media (max-width: #{ ($break-medium - 1) }) {
 
-		.store-address-form {
-			gap: 24px;
-			grid-template-columns: repeat(2, auto);
-			padding: 48px 0 56px;
+		input,
+		select {
+			min-height: 32px;
+			width: 100%;
 		}
+	}
+
+	@media (min-width: #{ ($break-medium) }) {
 
 		label {
 			font-size: 18px;
@@ -53,15 +64,69 @@
 		select {
 			font-size: 16px;
 			min-height: 48px;
-			width:200px;
+			width: 400px;
 		}
 	}
-	@media (min-width: #{($break-huge)}) {
-		input,
-		select {
-			font-size: 16px;
-			min-height: 48px;
-			width:400px;
+
+	@media (max-width: #{($break-medium - 1)}) {
+		width: 70vw;
+	}
+
+	.store-address-form {
+		display: grid;
+		gap: min(1.5em, 24px);
+		grid-template-columns: auto;
+		padding: 1em 0;
+
+		@media (max-width: #{ ($break-medium - 1) }) {
+			.full-address-fields {
+				width: 100%;
+
+				input,
+				select {
+					width: 100%;
+				}
+			}
+		}
+
+		@media (min-width: #{ ($break-medium) }) {
+			.full-address-fields {
+				width: 80%;
+
+				input,
+				select {
+					width: 150px;
+				}
+			}
+		}
+
+	}
+
+	form.onboarding-ecommerce-step {
+		height: 75%;
+		font-size: 1em;
+
+		.nfd-nav-card-button {
+			width: 80%;
+			margin: 0 10%;
+		}
+	}
+
+	@media (min-width: #{($break-medium)}) {
+		.onboarding-ecommerce-step {
+			width: inherit;
+		}
+
+		div.onboarding-ecommerce-step {
+			justify-content: space-around;
+		}
+
+		form.onboarding-ecommerce-step {
+			height: unset;
+		}
+
+		.store-address-form {
+			padding: 2em 10%;
 		}
 	}
 }
@@ -72,6 +137,10 @@ h1.store-address-title {
 
 div.onboarding-ecommerce-step {
 	color: var(--nfd-onboarding-black);
+	display: flex;
+	align-items: center;
+	flex-direction: column;
+	justify-content: space-between;
 
 	h2.nfd-step-card-heading {
 		color: var(--wp-admin-theme-color-darker-10);
@@ -84,9 +153,12 @@ div.onboarding-ecommerce-step {
 }
 
 div.onboarding-product-step {
-	color: var(--nfd-onboarding-black);
 	width: 50vw;
 
+	.nfd-card-need-help-tag {
+		padding: 0;
+	}
+	
 	div.nfd-product-step-options {
 		display: grid;
 		grid-template-columns: calc((50vw - 15px) / 2) calc((50vw - 15px) / 2);
@@ -118,12 +190,21 @@ div.onboarding-product-step {
 	}
 
 	.step-product-numbers {
-		display: flex;
-		width: 100%;
+		display: grid;
 		align-items: center;
+		grid-auto-flow: row;
+		gap: 1em;
+		width: 100%;
+		margin: 0.5em 0;
+
+		@media (min-width: #{ ($break-xlarge + 100)}) {
+			grid-auto-flow: column;
+			.components-radio-control {
+				margin-left: auto;
+			}
+		}
 
 		.components-radio-control {
-			margin-left: auto;
 
 			.components-base-control__field {
 				display: flex;
@@ -133,9 +214,17 @@ div.onboarding-product-step {
 				}
 			}
 
+			.components-radio-control__option {
+				margin: 1em 1em 1em 0;
+
+				@media (min-width: #{ ($break-xlarge + 100)}) {
+					margin: 0 1em 0 0;
+				}
+			}
+
+
 			label {
 				padding: 10px;
-				margin: 10px;
 				border: 1px solid #DBDBDB;
 				cursor: pointer;
 			}

From 48d770e125d415e7f73af2cbe862c26596ef18e6 Mon Sep 17 00:00:00 2001
From: aulisius <aulisius7@gmail.com>
Date: Wed, 7 Sep 2022 19:27:50 +0530
Subject: [PATCH 2/4] Fix height for the ecommerce steps

---
 .../Steps/Ecommerce/StepAddress/index.js      |  2 +-
 .../Steps/Ecommerce/StepProducts/index.js     |  2 +-
 .../pages/Steps/Ecommerce/stylesheet.scss     | 24 +++++++++++++++++--
 3 files changed, 24 insertions(+), 4 deletions(-)

diff --git a/src/OnboardingSPA/pages/Steps/Ecommerce/StepAddress/index.js b/src/OnboardingSPA/pages/Steps/Ecommerce/StepAddress/index.js
index 3a2da9caf..061ddebf6 100644
--- a/src/OnboardingSPA/pages/Steps/Ecommerce/StepAddress/index.js
+++ b/src/OnboardingSPA/pages/Steps/Ecommerce/StepAddress/index.js
@@ -103,7 +103,7 @@ const StepAddress = () => {
 	}
 	return (
 		<CommonLayout isBgPrimary isCentered>
-			<NewfoldLargeCard className='nfd-ecommerce-address-step'>
+			<NewfoldLargeCard className='ecommerce-step nfd-ecommerce-address-step'>
 				<div className='onboarding-ecommerce-step'>
 					<form
 						className='onboarding-ecommerce-step'
diff --git a/src/OnboardingSPA/pages/Steps/Ecommerce/StepProducts/index.js b/src/OnboardingSPA/pages/Steps/Ecommerce/StepProducts/index.js
index 00732c448..e8ec55970 100644
--- a/src/OnboardingSPA/pages/Steps/Ecommerce/StepProducts/index.js
+++ b/src/OnboardingSPA/pages/Steps/Ecommerce/StepProducts/index.js
@@ -59,7 +59,7 @@ const StepProducts = () => {
 
 	return (
 		<CommonLayout isBgPrimary isCentered>
-			<NewfoldLargeCard>
+			<NewfoldLargeCard className='ecommerce-step' >
 				<div className='nfd-onboarding-experience-step onboarding-product-step onboarding-ecommerce-step'>
 					<div className='nfd-card-heading center'>
 						<CardHeader
diff --git a/src/OnboardingSPA/pages/Steps/Ecommerce/stylesheet.scss b/src/OnboardingSPA/pages/Steps/Ecommerce/stylesheet.scss
index 471dca6a4..cb7ebfd5f 100644
--- a/src/OnboardingSPA/pages/Steps/Ecommerce/stylesheet.scss
+++ b/src/OnboardingSPA/pages/Steps/Ecommerce/stylesheet.scss
@@ -15,6 +15,12 @@
 	}
 }
 
+.ecommerce-step {
+	@media (max-width: 2200px) {
+		height: fit-content;
+	}
+}
+
 .onboarding-ecommerce-step {
 	.nfd-nav-card-button {
 		min-height: 4vh;
@@ -156,9 +162,9 @@ div.onboarding-product-step {
 	width: 50vw;
 
 	.nfd-card-need-help-tag {
-		padding: 0;
+		padding: 20px 0 0;
 	}
-	
+
 	div.nfd-product-step-options {
 		display: grid;
 		grid-template-columns: calc((50vw - 15px) / 2) calc((50vw - 15px) / 2);
@@ -199,6 +205,7 @@ div.onboarding-product-step {
 
 		@media (min-width: #{ ($break-xlarge + 100)}) {
 			grid-auto-flow: column;
+
 			.components-radio-control {
 				margin-left: auto;
 			}
@@ -238,7 +245,20 @@ div.onboarding-product-step {
 }
 
 .radio-control-tax-step {
+	.components-radio-control__option {
+		margin-bottom: 1em;
+	}
+
 	label {
 		padding: 10px 190px 10px 15px;
 	}
+
+	@media (max-width: 480px) {
+		label {
+			padding: 1.5vh 5% 5%;
+			width: unset;
+			line-height: 1.5;
+			white-space: normal;
+		}
+	}
 }
\ No newline at end of file

From 6c5f386f676352ede6d9457d9d097a6dc8c29e29 Mon Sep 17 00:00:00 2001
From: aulisius <aulisius7@gmail.com>
Date: Thu, 8 Sep 2022 21:38:45 +0530
Subject: [PATCH 3/4] Only send country if state is skipped

---
 .../pages/Steps/Ecommerce/StepAddress/index.js           | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/OnboardingSPA/pages/Steps/Ecommerce/StepAddress/index.js b/src/OnboardingSPA/pages/Steps/Ecommerce/StepAddress/index.js
index 061ddebf6..4028a2e0b 100644
--- a/src/OnboardingSPA/pages/Steps/Ecommerce/StepAddress/index.js
+++ b/src/OnboardingSPA/pages/Steps/Ecommerce/StepAddress/index.js
@@ -80,12 +80,17 @@ const StepAddress = () => {
 	function handleFieldChange(event) {
 		let fieldName = event.target.name;
 		let newValue = event.target.value;
-		let { country = selectedCountry, state = defaultState } = address;
+		let { country = selectedCountry, state } = address;
+		if (country === defaultCountry && state === undefined) {
+			state = defaultState;
+		}
 		let place = '';
 		if (['country', 'state'].includes(fieldName)) {
 			place =
 				fieldName === 'country'
-					? `${newValue}:${state}`
+					? state
+						? `${newValue}:${state}`
+						: newValue
 					: `${country}:${newValue}`;
 		}
 		setCurrentOnboardingData({

From 4a39c1d8dca8576915970720add01d8aaaacf766 Mon Sep 17 00:00:00 2001
From: aulisius <aulisius7@gmail.com>
Date: Fri, 9 Sep 2022 18:28:06 +0530
Subject: [PATCH 4/4] Fix css for small/mobile resolutions

---
 .../pages/Steps/Ecommerce/StepTax/index.js    |  4 +-
 .../pages/Steps/Ecommerce/stylesheet.scss     | 48 +++++++++----------
 2 files changed, 26 insertions(+), 26 deletions(-)

diff --git a/src/OnboardingSPA/pages/Steps/Ecommerce/StepTax/index.js b/src/OnboardingSPA/pages/Steps/Ecommerce/StepTax/index.js
index 8239a0a0e..5ddeb6f26 100644
--- a/src/OnboardingSPA/pages/Steps/Ecommerce/StepTax/index.js
+++ b/src/OnboardingSPA/pages/Steps/Ecommerce/StepTax/index.js
@@ -75,8 +75,8 @@ const StepTax = () => {
 
 	return (
 		<CommonLayout isBgPrimary isCentered>
-			<NewfoldLargeCard>
-				<div className='nfd-onboarding-experience-step'>
+			<NewfoldLargeCard className='ecommerce-step' >
+				<div className='nfd-onboarding-experience-step onboarding-ecommerce-step'>
 					<div className='nfd-card-heading center onboarding-ecommerce-step'>
 						<CardHeader
 							heading={__(content.stepTaxHeading, 'wp-module-onboarding')}
diff --git a/src/OnboardingSPA/pages/Steps/Ecommerce/stylesheet.scss b/src/OnboardingSPA/pages/Steps/Ecommerce/stylesheet.scss
index cb7ebfd5f..56b5eea5e 100644
--- a/src/OnboardingSPA/pages/Steps/Ecommerce/stylesheet.scss
+++ b/src/OnboardingSPA/pages/Steps/Ecommerce/stylesheet.scss
@@ -50,15 +50,6 @@
 		border-radius: 2px;
 	}
 
-	@media (max-width: #{ ($break-medium - 1) }) {
-
-		input,
-		select {
-			min-height: 32px;
-			width: 100%;
-		}
-	}
-
 	@media (min-width: #{ ($break-medium) }) {
 
 		label {
@@ -74,6 +65,25 @@
 		}
 	}
 
+	@media (max-width: #{ ($break-medium - 1) }) and (min-width: #{ ($break-mobile + 1) }) {
+
+		input,
+		select {
+			min-height: 32px;
+			min-width: 100%;
+		}
+	}
+
+	@media (max-width: #{ ($break-mobile) }) {
+
+		input,
+		select {
+			min-height: 32px;
+			max-width: 70vw;
+			min-width: 70vw;
+		}
+	}
+
 	@media (max-width: #{($break-medium - 1)}) {
 		width: 70vw;
 	}
@@ -101,7 +111,7 @@
 
 				input,
 				select {
-					width: 150px;
+					width: 140px;
 				}
 			}
 		}
@@ -132,21 +142,18 @@
 		}
 
 		.store-address-form {
-			padding: 2em 10%;
+			padding: 2em 5%;
 		}
 	}
 }
 
-h1.store-address-title {
-	color: var(--wp-admin-theme-color-darker-10);
-}
-
 div.onboarding-ecommerce-step {
 	color: var(--nfd-onboarding-black);
 	display: flex;
 	align-items: center;
 	flex-direction: column;
 	justify-content: space-between;
+	gap: 1em;
 
 	h2.nfd-step-card-heading {
 		color: var(--wp-admin-theme-color-darker-10);
@@ -171,14 +178,10 @@ div.onboarding-product-step {
 		gap: 15px;
 
 		@media (max-width: #{ ($break-mobile)}) {
-			grid-template-columns: repeat(1, 1fr);
+			grid-template-columns: 1fr;
 			gap: 2px;
 		}
 
-		@media (max-height: #{ ($break-small)}) {
-			grid-template-columns: repeat(3, 1fr);
-			gap: 2px;
-		}
 	}
 
 	.components-checkbox-control {
@@ -245,10 +248,6 @@ div.onboarding-product-step {
 }
 
 .radio-control-tax-step {
-	.components-radio-control__option {
-		margin-bottom: 1em;
-	}
-
 	label {
 		padding: 10px 190px 10px 15px;
 	}
@@ -257,6 +256,7 @@ div.onboarding-product-step {
 		label {
 			padding: 1.5vh 5% 5%;
 			width: unset;
+			height: fit-content;
 			line-height: 1.5;
 			white-space: normal;
 		}