- { __(
- titlePreview?.substring( 0, 20 ),
- 'wp-module-onboarding'
- ) }
+ { titlePreview?.substring( 0, 20 ) }
x
@@ -192,8 +168,8 @@ const MiniPreview = ( {
{} }
- value={ __( urlPreview, 'wp-module-onboarding' ) }
+ onChange={ () => {} }
+ value={ urlPreview }
>
@@ -206,15 +182,13 @@ const MiniPreview = ( {
-
@@ -234,14 +236,8 @@ const StepAddress = () => {
>
{
- * required
+ { content.requiredText }
@@ -455,10 +430,7 @@ const StepAddress = () => {
disabled={ address === undefined }
type="submit"
>
- { __(
- 'Continue Setup',
- 'wp-module-onboarding'
- ) }
+ { content.buttonText }
@@ -63,18 +64,12 @@ const StepProducts = () => {
@@ -129,20 +120,12 @@ const StepTax = () => {
'nfd-onboarding-experience-step-tabs components-radio-control__input radio-control-tax-step radio-control-main'
}
selected={ tax?.option }
- options={ content.stepTaxOptions.map(
- ( option ) => {
- return {
- label: __(
- option.content,
- 'wp-module-onboarding'
- ),
- value: __(
- option.value,
- 'wp-module-onboarding'
- ),
- };
- }
- ) }
+ options={ content.options.map( ( option ) => {
+ return {
+ label: option.content,
+ value: option.value,
+ };
+ } ) }
onChange={ ( value ) => selectOption( value ) }
/>
@@ -153,7 +136,7 @@ const StepTax = () => {
}
onClick={ handleButtonClick }
>
- { __( 'Continue Setup', 'wp-module-onboarding' ) }
+ { content.buttonText }
{
selected={ wpComfortLevel }
options={ content.options.map( ( option ) => {
return {
- label: __(
- option.content,
- 'wp-module-onboarding'
- ),
- value: __(
- option.value,
- 'wp-module-onboarding'
- ),
+ label: option.label,
+ value: option.value,
};
} ) }
onChange={ ( value ) => saveData( value ) }
/>
@@ -163,12 +164,12 @@ const StepPrimarySetup = () => {
categoryInput( e?.target?.value )
}
className="nfd-setup-primary-custom__tellus-input"
- placeholder={ contents.placeholderSiteTypeInput }
+ placeholder={ content.customInputPlaceholderText }
value={ custom ? primaryCategory : '' }
/>
-
@@ -276,7 +276,7 @@ const StepPrimarySetup = () => {
- { __( titlePreview, 'wp-module-onboarding' ) } + { titlePreview }
- - { __( urlPreview, 'wp-module-onboarding' ) } - + + { urlPreview } +- { __( descPreview, 'wp-module-onboarding' ) } -
+{ descPreview }
{ socialIconList() }
diff --git a/src/OnboardingSPA/components/MiniPreview/miniPreview.json b/src/OnboardingSPA/components/MiniPreview/miniPreview.json
deleted file mode 100644
index ec2e6fb73..000000000
--- a/src/OnboardingSPA/components/MiniPreview/miniPreview.json
+++ /dev/null
@@ -1,6 +0,0 @@
-{
- "icon": "--default-logo-icon",
- "title": "WordPress %s",
- "desc": "Just another WordPress %s",
- "url": "https://bluehost.com"
-}
diff --git a/src/OnboardingSPA/components/MiniPreview/stylesheet.scss b/src/OnboardingSPA/components/MiniPreview/stylesheet.scss
index 24dd803ab..11c59f1e7 100644
--- a/src/OnboardingSPA/components/MiniPreview/stylesheet.scss
+++ b/src/OnboardingSPA/components/MiniPreview/stylesheet.scss
@@ -1,230 +1,237 @@
-$white: #FFFFFF;
-$black: #000000;
-$browser-dark: #CACACA;
-$browser-light: #F2F2F2;
+$white: #fff;
+$black: #000;
+$browser-dark: #cacaca;
+$browser-light: #f2f2f2;
$link-browser-color: #007017;
-$title-browser-color: #3858E9;
+$link-hover-color: var(--nfd-onboarding-link-hover-blue);
+$title-browser-color: #3858e9;
.mini-preview {
- margin: 0px 0px 10px 0px;
- font-weight: 500;
- font-size: 1rem;
+ margin: 0 0 10px 0;
+ font-weight: 500;
+ font-size: 1rem;
}
.browser-container {
- width: 100%;
- background-color: $browser-dark;
+ width: 100%;
+ background-color: $browser-dark;
}
-.browser-icon{
- width: 24px;
- height: 24px;
- padding: 4px;
- background-position: center;
- background-repeat: no-repeat;
- background-clip: padding-box;
-
- &-title{
- width: 18px;
- height: 18px;
- padding: 5px;
- background-position: center;
- background-repeat: no-repeat;
- background-clip: padding-box;
- }
+.browser-icon {
+ width: 24px;
+ height: 24px;
+ padding: 4px;
+ background-position: center;
+ background-repeat: no-repeat;
+ background-clip: padding-box;
+
+ &-title {
+ width: 18px;
+ height: 18px;
+ padding: 5px;
+ background-position: center;
+ background-repeat: no-repeat;
+ background-clip: padding-box;
+ }
}
.browser-dot {
- width: 12px;
- height: 12px;
- margin: 4px;
- border-radius: 50%;
- display: inline-block;
-
- @media (max-width: 400px) {
- width: 8px;
- margin: 2.8px;
- height: 8px;
- margin-top: 3px;
- }
+ width: 12px;
+ height: 12px;
+ margin: 4px;
+ border-radius: 50%;
+ display: inline-block;
+
+ @media (max-width: 400px) {
+ width: 8px;
+ margin: 2.8px;
+ height: 8px;
+ margin-top: 3px;
+ }
}
.browser-content {
- padding: 10px;
- word-break: break-all;
- background-color: $white;
-
- &_top-row{
-
- margin-top: 8px;
-
- &-name{
- cursor: pointer;
- font-weight: 600;
- font-size: 1.2rem;
- margin: 0px 0px 6px 0px;
- color: $title-browser-color;
- }
-
- &-link {
- margin: 0px;
- font-size: 1rem;
- cursor: pointer;
- color: $link-browser-color;
- }
- }
- &_desc{
- color: $black;
- text-align: left;
- max-width: 450px;
- font-weight: 400;
- line-height: 1.58;
- font-size: 0.88rem;
- margin: 16px 0px 0px 0px;
- }
- &_social{
- display: flex;
- margin-top: 4px;
- justify-content: flex-start;
-
- &_icon{
- opacity: 1;
- width: 24px;
- height: 24px;
- filter: none;
- cursor: pointer;
- text-align: center;
- padding-right: 6px;
- background-position: center;
- background-repeat: no-repeat;
- background-clip: padding-box;
- transition: opacity 0.4s ease-in-out;
-
- &.--no-url {
- opacity: 0.5;
- filter: grayscale(1);
- }
-
- &.--invalid-url {
- opacity: 0.75;
- filter: none;
- }
- }
- }
+ padding: 10px;
+ word-break: break-all;
+ background-color: $white;
+
+ &_top-row {
+
+ margin-top: 8px;
+
+ &-name {
+ cursor: pointer;
+ font-weight: 600;
+ font-size: 1.2rem;
+ margin: 0 0 6px 0;
+ color: $title-browser-color;
+ }
+
+ &-link {
+ margin: 0;
+ font-size: 1rem;
+ cursor: pointer;
+ color: $link-browser-color;
+
+ &:hover {
+ color: $link-hover-color;
+ }
+ }
+ }
+
+ &_desc {
+ color: $black;
+ text-align: left;
+ max-width: 450px;
+ font-weight: 400;
+ line-height: 1.58;
+ font-size: 0.88rem;
+ margin: 16px 0 0 0;
+ }
+
+ &_social {
+ display: flex;
+ margin-top: 4px;
+ justify-content: flex-start;
+
+ &_icon {
+ opacity: 1;
+ width: 24px;
+ height: 24px;
+ filter: none;
+ cursor: pointer;
+ text-align: center;
+ padding-right: 6px;
+ background-position: center;
+ background-repeat: no-repeat;
+ background-clip: padding-box;
+ transition: opacity 0.4s ease-in-out;
+
+ &.--no-url {
+ opacity: 0.5;
+ filter: grayscale(1);
+ }
+
+ &.--invalid-url {
+ opacity: 0.75;
+ filter: none;
+ }
+ }
+ }
}
.browser-row {
- &-title {
- display: flex;
- align-items: flex-end;
- background-color: $browser-dark;
-
- &_main{
- height: 100%;
- margin-left: 6px;
- }
-
- &_buttons{
- padding: 2px 8px 3px 2px;
- }
-
- &_bar {
- display: flex;
- align-items: flex-end;
-
- &_before {
- background-color: $browser-light;
-
- &-curve {
- opacity: 1;
- width: 10px;
- height: 10px;
- content: " ";
- display: flex;
- align-items: center;
- pointer-events: none;
- justify-content: center;
- border-radius: 0 0 8px 0;
- background-color: $browser-dark;
- }
- }
-
- &_after {
- background-color: $browser-light;
-
- &-curve {
- opacity: 1;
- width: 10px;
- height: 10px;
- content: " ";
- display: flex;
- align-items: center;
- pointer-events: none;
- justify-content: center;
- border-radius: 0 0 0 8px;
- background-color: $browser-dark;
- }
- }
-
- &_main {
- z-index: 4;
- height: 30px;
- display: flex;
- margin-top: 5px;
- min-width: 150px;
- padding-left: 5px;
- padding-right: 10px;
- align-items: center;
- border-radius: 8px 8px 0px 0px;
- background-color: $browser-light;
-
- &-text {
- flex: 1;
- content: " ";
- margin-left: 2px;
- max-width: 140px;
- font-size: 0.8rem;
- line-clamp: 1;
- white-space: nowrap;
- text-overflow: ellipsis;
- background: -webkit-linear-gradient(left, #000 50%, #fff);
- background-clip: text;
- -webkit-text-fill-color: transparent;
- }
- }
- }
-
-
- }
-
- &-search {
- display: flex;
- align-items: center;
- justify-content: center;
- background-color: $browser-light;
-
- &__icons {
- flex: 1;
- display: flex;
- align-items: center;
- justify-content: center;
- }
-
- &__search-box {
- flex: 10;
- padding: 5px;
-
- &_input {
- width: 100%;
- font-size: 0.8rem;
- border: none !important;
- background-color: $white;
- }
- }
-
- &__more {
- flex: 1;
- }
- }
-}
\ No newline at end of file
+ &-title {
+ display: flex;
+ align-items: flex-end;
+ background-color: $browser-dark;
+
+ &_main {
+ height: 100%;
+ margin-left: 6px;
+ }
+
+ &_buttons {
+ padding: 2px 8px 3px 2px;
+ }
+
+ &_bar {
+ display: flex;
+ align-items: flex-end;
+
+ &_before {
+ background-color: $browser-light;
+
+ &-curve {
+ opacity: 1;
+ width: 10px;
+ height: 10px;
+ content: " ";
+ display: flex;
+ align-items: center;
+ pointer-events: none;
+ justify-content: center;
+ border-radius: 0 0 8px 0;
+ background-color: $browser-dark;
+ }
+ }
+
+ &_after {
+ background-color: $browser-light;
+
+ &-curve {
+ opacity: 1;
+ width: 10px;
+ height: 10px;
+ content: " ";
+ display: flex;
+ align-items: center;
+ pointer-events: none;
+ justify-content: center;
+ border-radius: 0 0 0 8px;
+ background-color: $browser-dark;
+ }
+ }
+
+ &_main {
+ z-index: 4;
+ height: 30px;
+ display: flex;
+ margin-top: 5px;
+ min-width: 150px;
+ padding-left: 5px;
+ padding-right: 10px;
+ align-items: center;
+ border-radius: 8px 8px 0 0;
+ background-color: $browser-light;
+
+ &-text {
+ flex: 1;
+ content: " ";
+ margin-left: 2px;
+ max-width: 140px;
+ font-size: 0.8rem;
+ line-clamp: 1;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ background: -webkit-linear-gradient(left, #000 50%, #fff);
+ background-clip: text;
+ -webkit-text-fill-color: transparent;
+ }
+ }
+ }
+
+
+ }
+
+ &-search {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ background-color: $browser-light;
+
+ &__icons {
+ flex: 1;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ }
+
+ &__search-box {
+ flex: 10;
+ padding: 5px;
+
+ &_input {
+ width: 100%;
+ font-size: 0.8rem;
+ border: none !important;
+ background-color: $white;
+ }
+ }
+
+ &__more {
+ flex: 1;
+ }
+ }
+}
diff --git a/src/OnboardingSPA/data/routes/default-flow.js b/src/OnboardingSPA/data/routes/default-flow.js
index 14ae4dee8..21ea8628e 100644
--- a/src/OnboardingSPA/data/routes/default-flow.js
+++ b/src/OnboardingSPA/data/routes/default-flow.js
@@ -189,12 +189,6 @@ export const steps = [
{
path: '/wp-setup/step/get-started/welcome',
title: __( 'Welcome', 'wp-module-onboarding' ),
- heading: sprintf(
- /* translators: %s: website or store */
- __( 'Make your %s dreams a reality!', 'wp-module-onboarding' ),
- translations( 'website' )
- ),
- subheading: __( 'with WordPress and ', 'wp-module-onboarding' ),
description: __(
"We'll use this to personalize this onboarding and future recommendations",
'wp-module-onboarding'
@@ -212,18 +206,6 @@ export const steps = [
{
path: '/wp-setup/step/get-started/experience',
title: __( 'WordPress Experience', 'wp-module-onboarding' ),
- heading: sprintf(
- /* translators: %s: website or store */
- __(
- 'Help us tailor this setup to your %s',
- 'wp-module-onboarding'
- ),
- translations( 'site' )
- ),
- subheading: __(
- 'What is your experience with WordPress?',
- 'wp-module-onboarding'
- ),
description: __(
"We'll use this to personalize this onboarding and future recommendations",
'wp-module-onboarding'
@@ -245,27 +227,6 @@ export const steps = [
__( 'Primary %s Setup', 'wp-module-onboarding' ),
translations( 'Site' )
),
- heading: sprintf(
- /* translators: %s: website or store */
- __(
- 'Help us tailor this setup to your %s',
- 'wp-module-onboarding'
- ),
- translations( 'site' )
- ),
- subheading: sprintf(
- /* translators: %s: website or store */
- __( 'What type of %s is it?', 'wp-module-onboarding' ),
- translations( 'site' )
- ),
- description: sprintf(
- /* translators: %s: website or store */
- __(
- "Setup more of your %s, show you around WordPress or share secrets to success -- we'll follow your lead on how you'd like to proceed.",
- 'wp-module-onboarding'
- ),
- translations( 'site' )
- ),
Component: StepGetStartedPrimarySetup,
Icon: moveTo,
priority: 60,
@@ -284,27 +245,6 @@ export const steps = [
__( 'Secondary %s Setup', 'wp-module-onboarding' ),
translations( 'Site' )
),
- heading: sprintf(
- /* translators: %s: website or store */
- __(
- 'Help us tailor this setup to your %s',
- 'wp-module-onboarding'
- ),
- translations( 'site' )
- ),
- subheading: sprintf(
- /* translators: %s: website or store */
- __( 'What type of %s is it?', 'wp-module-onboarding' ),
- translations( 'site' )
- ),
- description: sprintf(
- /* translators: %s: website or store */
- __(
- "Setup more of your %s, show you around WordPress or share secrets to success -- we'll follow your lead on how you'd like to proceed.",
- 'wp-module-onboarding'
- ),
- translations( 'site' )
- ),
Component: StepGetStartedSecondarySetup,
Icon: moveTo,
priority: 80,
@@ -361,23 +301,6 @@ export const steps = [
},
},
},
- // {
- // path: '/wp-setup/step/design/themes',
- // title: __( 'Themes', 'wp-module-onboarding' ),
- // heading: __( "Let's make you look your best", 'wp-module-onboarding' ),
- // subheading: __(
- // 'Find a WordPress Theme to present polished and compelling.',
- // 'wp-module-onboarding'
- // ),
- // description: __(
- // 'Your Theme is the starting place for layout and design, setting the tone for your site. Keep it for years or change and swap as you grow.',
- // 'wp-module-onboarding'
- // ),
- // Component: StepDesignThemes,
- // Icon: brush,
- // priority: 140,
- // VIEW: VIEW_DESIGN_THEMES,
- // },
{
path: '/wp-setup/step/design/theme-styles/menu',
title: __( 'Theme Styles', 'wp-module-onboarding' ),
@@ -591,9 +514,6 @@ export const conditionalSteps = {
},
};
-/**
- * Top-level registration of all routes.
- */
export const routes = [ ...pages, ...steps ];
/**
diff --git a/src/OnboardingSPA/pages/Steps/Ecommerce/StepAddress/contents.js b/src/OnboardingSPA/pages/Steps/Ecommerce/StepAddress/contents.js
new file mode 100644
index 000000000..73faeef6e
--- /dev/null
+++ b/src/OnboardingSPA/pages/Steps/Ecommerce/StepAddress/contents.js
@@ -0,0 +1,31 @@
+import { __ } from '@wordpress/i18n';
+
+const getContents = () => {
+ return {
+ heading: __(
+ 'Confirm your business or store address',
+ 'wp-module-onboarding'
+ ),
+ subheading: __(
+ 'We’ll use this information to help you setup your online store',
+ 'wp-module-onboarding'
+ ),
+ countryInputLabel: __(
+ 'Where is your store based?',
+ 'wp-module-onboarding'
+ ),
+ addressInputLabel: __( 'Address', 'wp-module-onboarding' ),
+ cityInputLabel: __( 'City', 'wp-module-onboarding' ),
+ stateInputLabel: __( 'State', 'wp-module-onboarding' ),
+ postalCodeInputLabel: __( 'Postal Code', 'wp-module-onboarding' ),
+ emailInputLabel: __( 'Email', 'wp-module-onboarding' ),
+ currencyInputLabel: __(
+ 'What currency do you want to display in your store?',
+ 'wp-module-onboarding'
+ ),
+ requiredText: __( '* required', 'wp-module-onboarding' ),
+ buttonText: __( 'Continue Setup', 'wp-module-onboarding' ),
+ };
+};
+
+export default getContents;
diff --git a/src/OnboardingSPA/pages/Steps/Ecommerce/StepAddress/index.js b/src/OnboardingSPA/pages/Steps/Ecommerce/StepAddress/index.js
index 8652c067f..f9cc46bf4 100644
--- a/src/OnboardingSPA/pages/Steps/Ecommerce/StepAddress/index.js
+++ b/src/OnboardingSPA/pages/Steps/Ecommerce/StepAddress/index.js
@@ -1,7 +1,6 @@
import { useViewportMatch } from '@wordpress/compose';
import { useDispatch, useSelect } from '@wordpress/data';
import { useEffect, useState } from '@wordpress/element';
-import { __ } from '@wordpress/i18n';
import { useNavigate } from 'react-router-dom';
import {
SIDEBAR_LEARN_MORE,
@@ -17,6 +16,7 @@ import currencies from '../currencies.json';
import { useWPSettings as getWPSettings } from '../useWPSettings';
import Animate from '../../../../components/Animate';
import { EcommerceStateHandler } from '../../../../components/StateHandlers';
+import getContents from './contents';
const StepAddress = () => {
const [ settings, setSettings ] = useState();
@@ -202,6 +202,8 @@ const StepAddress = () => {
} );
}
+ const content = getContents();
+
return (
{ address === undefined ? (
{
aria-required
htmlFor="woocommerce_store_address"
>
- { __(
- 'Address',
- 'wp-module-onboarding'
- ) }
+ { content.addressInputLabel }
{
aria-required
htmlFor="woocommerce_store_city"
>
- { __(
- 'City',
- 'wp-module-onboarding'
- ) }
+ { content.cityInputLabel }
{
aria-required
htmlFor="state"
>
- { __(
- 'State',
- 'wp-module-onboarding'
- ) }
+ { content.stateInputLabel }
- { content.productOptions.map( ( product ) => (
+ { content.typeOptions.map( ( product ) => (
{
- { __(
- content.stepProductsQuestion,
- 'wp-module-onboarding'
- ) }
+ { content.question }
{
return {
- label: __(
- option.content,
- 'wp-module-onboarding'
- ),
- value: __(
- option.value,
- 'wp-module-onboarding'
- ),
+ label: option.content,
+ value: option.value,
};
}
) }
onChange={ handleProductCount }
/>
-
- { contents.tellusHereText }
+ { content.customInputLabel }
{
}
className="nfd-setup-primary-custom__tellus-input"
placeholder={
- contents.placeholderSiteTypeInput
+ content.customInputPlaceholderText
}
value={ custom ? secondaryCategory : '' }
/>