Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Modify DesignStateHandler to allow switching back to Wonder via a confirmation dialog #155

Merged
merged 9 commits into from
Feb 8, 2023
Merged

Modify DesignStateHandler to allow switching back to Wonder via a confirmation dialog #155

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
df8001c
allow switching back to wonder when wonder is not the active theme on…
arunshenoy99 Jan 23, 2023
e48ba25
php lint fixes
arunshenoy99 Jan 23, 2023
0088b3b
add support for back navigation after generating the child theme
arunshenoy99 Jan 23, 2023
33bdc17
add missed file
arunshenoy99 Jan 23, 2023
dba7004
issue in trunk: prevent unecessary API calls in error state
arunshenoy99 Jan 24, 2023
4a68d4e
assume continue when modal is closed via the x icon or Esc button
arunshenoy99 Jan 24, 2023
0adfcb6
Added themeStatus to useEffect like other steps
officiallygod Jan 28, 2023
367d23d
Merge branch 'trunk' of https://github.com/newfold-labs/wp-module-onb…
arunshenoy99 Feb 1, 2023
7d1eff1
re-check active theme on API failure and throw a confirmation dialogue
arunshenoy99 Feb 7, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
31 changes: 22 additions & 9 deletions includes/RestApi/Themes/ThemeInstallerController.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,12 @@
namespace NewfoldLabs\WP\Module\Onboarding\RestApi\Themes;

use NewfoldLabs\WP\Module\Onboarding\Permissions;
use NewfoldLabs\WP\Module\Onboarding\Data\Options;
use NewfoldLabs\WP\Module\Onboarding\Services\ThemeInstaller;
use NewfoldLabs\WP\Module\Onboarding\TaskManagers\ThemeInstallTaskManager;
use NewfoldLabs\WP\Module\Onboarding\Tasks\ThemeInstallTask;

/**
* Controller defining API's for theme install related functionalities.
*/
class ThemeInstallerController extends \WP_REST_Controller {
/**
* The namespace of this controller's route.
Expand All @@ -31,8 +32,8 @@ public function register_routes() {
$this->rest_base . '/initialize',
array(
array(
'methods' => \WP_REST_Server::CREATABLE,
'callback' => array( $this, 'initialize' ),
'methods' => \WP_REST_Server::CREATABLE,
'callback' => array( $this, 'initialize' ),
'permission_callback' => array( Permissions::class, 'rest_is_authorized_admin' ),
),
)
Expand All @@ -56,9 +57,9 @@ public function register_routes() {
$this->rest_base . '/status',
array(
array(
'methods' => \WP_REST_Server::READABLE,
'callback' => array( $this, 'get_status' ),
'args' => $this->get_status_args(),
'methods' => \WP_REST_Server::READABLE,
'callback' => array( $this, 'get_status' ),
'args' => $this->get_status_args(),
'permission_callback' => array( Permissions::class, 'rest_is_authorized_admin' ),
),
)
Expand Down Expand Up @@ -91,6 +92,11 @@ public function get_install_theme_args() {
);
}

/**
* Get the theme status check arguments.
*
* @return array
*/
public function get_status_args() {
return array(
'theme' => array(
Expand Down Expand Up @@ -126,7 +132,7 @@ public static function initialize() {
/**
* Install the requested theme via a slug (theme).
*
* @param \WP_REST_Request $request
* @param \WP_REST_Request $request The request object.
*
* @return \WP_REST_Response|\WP_Error
*/
Expand Down Expand Up @@ -166,6 +172,13 @@ public static function install( \WP_REST_Request $request ) {
return $theme_install_task->execute();
}

/**
* Returns the status of a given theme slug.
*
* @param \WP_REST_Request $request The request object
*
* @return \WP_REST_Response
*/
public function get_status( \WP_REST_Request $request ) {
$theme = $request->get_param( 'theme' );
$activated = $request->get_param( 'activated' );
Expand All @@ -181,7 +194,7 @@ public function get_status( \WP_REST_Request $request ) {

$position_in_queue = ThemeInstallTaskManager::status( $theme );

if ( $position_in_queue !== false ) {
if ( false !== $position_in_queue ) {
return new \WP_REST_Response(
array(
'status' => 'installing',
Expand Down
39 changes: 27 additions & 12 deletions src/OnboardingSPA/components/Drawer/DrawerPanel/DesignColors.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,10 @@ import { store as nfdOnboardingStore } from '../../../store';
import { getGlobalStyles, getThemeColors } from '../../../utils/api/themes';
import { useGlobalStylesOutput } from '../../../utils/global-styles/use-global-styles-output';
import { GlobalStylesProvider } from '../../LivePreview';
import {
THEME_STATUS_ACTIVE,
THEME_STATUS_INIT,
} from '../../../../constants';
import Animate from '../../Animate';

const DesignColors = () => {
Expand All @@ -20,17 +24,24 @@ const DesignColors = () => {
const [ colorPalettes, setColorPalettes ] = useState();
const [ colorPickerCalledBy, setColorPickerCalledBy ] = useState( '' );

const { storedPreviewSettings, currentData } = useSelect( ( select ) => {
return {
storedPreviewSettings:
select( nfdOnboardingStore ).getPreviewSettings(),
currentData:
select( nfdOnboardingStore ).getCurrentOnboardingData(),
};
}, [] );
const { storedPreviewSettings, currentData, themeStatus } = useSelect(
( select ) => {
return {
storedPreviewSettings:
select( nfdOnboardingStore ).getPreviewSettings(),
currentData:
select( nfdOnboardingStore ).getCurrentOnboardingData(),
themeStatus: select( nfdOnboardingStore ).getThemeStatus(),
};
},
[]
);

const { updatePreviewSettings, setCurrentOnboardingData } =
useDispatch( nfdOnboardingStore );
const {
updatePreviewSettings,
setCurrentOnboardingData,
updateThemeStatus,
} = useDispatch( nfdOnboardingStore );

function stateToLocal( selectedColors ) {
if ( selectedColors ) {
Expand Down Expand Up @@ -188,6 +199,9 @@ const DesignColors = () => {

const getColorStylesAndPatterns = async () => {
const colorPalettes = await getThemeColors();
if ( colorPalettes?.error ) {
return updateThemeStatus( THEME_STATUS_INIT );
}
setColorPalettes( colorPalettes?.body );
let selectedColors;
let selectedColorsLocal;
Expand Down Expand Up @@ -215,8 +229,9 @@ const DesignColors = () => {
};

useEffect( () => {
if ( ! isLoaded ) getColorStylesAndPatterns();
}, [ isLoaded ] );
if ( ! isLoaded && THEME_STATUS_ACTIVE === themeStatus )
getColorStylesAndPatterns();
}, [ isLoaded, themeStatus ] );

const handleClick = ( colorStyle ) => {
const customColorsTemp = customColors;
Expand Down
4 changes: 2 additions & 2 deletions src/OnboardingSPA/components/Drawer/DrawerPanel/DesignHeaderMenu.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import { GlobalStylesProvider } from '../../../components/LivePreview';

import {
THEME_STATUS_ACTIVE,
THEME_STATUS_NOT_ACTIVE,
THEME_STATUS_INIT,
} from '../../../../constants';

const DesignHeaderMenu = () => {
Expand Down Expand Up @@ -48,7 +48,7 @@ const DesignHeaderMenu = () => {
currentStep.patternId
);
if ( headerMenuPreviewResponse?.error ) {
return updateThemeStatus( THEME_STATUS_NOT_ACTIVE );
return updateThemeStatus( THEME_STATUS_INIT );
}
setHeaderMenuPreviewData( headerMenuPreviewResponse.body );

Expand Down
44 changes: 25 additions & 19 deletions src/OnboardingSPA/components/Drawer/DrawerPanel/DesignThemeStylesPreview.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,33 +7,36 @@ import { getGlobalStyles } from '../../../utils/api/themes';
import { useGlobalStylesOutput } from '../../../utils/global-styles/use-global-styles-output';
import {
THEME_STATUS_ACTIVE,
THEME_STATUS_NOT_ACTIVE,
THEME_STATUS_INIT,
} from '../../../../constants';
import {
LivePreviewSelectableCard,
LivePreviewSkeleton,
} from '../../LivePreview';

const DesignThemeStylesPreview = () => {
const MAX_PREVIEWS_PER_ROW = 3;

const [ isLoaded, setIsLoaded ] = useState( false );
const [ pattern, setPattern ] = useState();
const [ globalStyles, setGlobalStyles ] = useState();
const [ selectedStyle, setSelectedStyle ] = useState( '' );

const { currentStep, currentData, storedPreviewSettings, themeStatus, themeVariations, } =
useSelect( ( select ) => {
return {
currentStep: select( nfdOnboardingStore ).getCurrentStep(),
currentData:
select( nfdOnboardingStore ).getCurrentOnboardingData(),
storedPreviewSettings:
select( nfdOnboardingStore ).getPreviewSettings(),
themeStatus: select( nfdOnboardingStore ).getThemeStatus(),
themeVariations: select(nfdOnboardingStore).getStepPreviewData(),
};
}, [] );
const {
currentStep,
currentData,
storedPreviewSettings,
themeStatus,
themeVariations,
} = useSelect( ( select ) => {
return {
currentStep: select( nfdOnboardingStore ).getCurrentStep(),
currentData:
select( nfdOnboardingStore ).getCurrentOnboardingData(),
storedPreviewSettings:
select( nfdOnboardingStore ).getPreviewSettings(),
themeStatus: select( nfdOnboardingStore ).getThemeStatus(),
themeVariations: select( nfdOnboardingStore ).getStepPreviewData(),
};
}, [] );

const {
updatePreviewSettings,
Expand All @@ -47,11 +50,11 @@ const DesignThemeStylesPreview = () => {
true
);
if ( patternResponse?.error ) {
return updateThemeStatus( THEME_STATUS_NOT_ACTIVE );
return updateThemeStatus( THEME_STATUS_INIT );
}
const globalStylesResponse = await getGlobalStyles( true );
if ( globalStylesResponse?.error ) {
return updateThemeStatus( THEME_STATUS_NOT_ACTIVE );
return updateThemeStatus( THEME_STATUS_INIT );
}
setPattern( patternResponse?.body );
setGlobalStyles( globalStylesResponse?.body );
Expand Down Expand Up @@ -120,9 +123,12 @@ const DesignThemeStylesPreview = () => {
<LivePreviewSkeleton
className={ 'theme-styles-preview--drawer__list__item' }
watch={ globalStyles && pattern }
count={ themeVariations[currentStep?.patternId]?.previewCount }
count={
themeVariations[ currentStep?.patternId ]?.previewCount
}
callback={ buildPreviews }
viewportWidth={ 900 }/>
viewportWidth={ 900 }
/>
</div>
</div>
);
Expand Down
39 changes: 27 additions & 12 deletions src/OnboardingSPA/components/Drawer/DrawerPanel/DesignTypography.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,10 @@ import { store as nfdOnboardingStore } from '../../../store';
import { GlobalStylesProvider } from '../../../components/LivePreview';
import { getGlobalStyles, getThemeFonts } from '../../../utils/api/themes';
import { useGlobalStylesOutput } from '../../../utils/global-styles/use-global-styles-output';
import {
THEME_STATUS_ACTIVE,
THEME_STATUS_INIT,
} from '../../../../constants';

const DesignTypography = () => {
const drawerFontOptions = useRef();
Expand All @@ -15,20 +19,30 @@ const DesignTypography = () => {
const [ fontPalettes, setFontPalettes ] = useState();
const [ isAccordionClosed, setIsAccordionClosed ] = useState( true );

const { storedPreviewSettings, currentData } = useSelect( ( select ) => {
return {
storedPreviewSettings:
select( nfdOnboardingStore ).getPreviewSettings(),
currentData:
select( nfdOnboardingStore ).getCurrentOnboardingData(),
};
}, [] );
const { storedPreviewSettings, currentData, themeStatus } = useSelect(
( select ) => {
return {
storedPreviewSettings:
select( nfdOnboardingStore ).getPreviewSettings(),
currentData:
select( nfdOnboardingStore ).getCurrentOnboardingData(),
themeStatus: select( nfdOnboardingStore ).getThemeStatus(),
};
},
[]
);

const { updatePreviewSettings, setCurrentOnboardingData } =
useDispatch( nfdOnboardingStore );
const {
updatePreviewSettings,
setCurrentOnboardingData,
updateThemeStatus,
} = useDispatch( nfdOnboardingStore );

const getFontStylesAndPatterns = async () => {
const fontPalettes = await getThemeFonts();
if ( fontPalettes?.error ) {
return updateThemeStatus( THEME_STATUS_INIT );
}
setFontPalettes( fontPalettes?.body );

if ( currentData?.data?.typography?.slug !== '' ) {
Expand All @@ -51,8 +65,9 @@ const DesignTypography = () => {
};

useEffect( () => {
if ( ! isLoaded ) getFontStylesAndPatterns();
}, [ isLoaded ] );
if ( ! isLoaded && THEME_STATUS_ACTIVE === themeStatus )
getFontStylesAndPatterns();
}, [ isLoaded, themeStatus ] );

const handleClick = async (
fontStyle,
Expand Down
4 changes: 2 additions & 2 deletions src/OnboardingSPA/components/Drawer/DrawerPanel/NavPrimary.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,8 +33,8 @@ const NavPrimary = () => {
</Button>
) ) || (
<ExitToWordPress
className="nfd-onboarding-drawer__panel-back"
variant="tertiary"
buttonClassName="nfd-onboarding-drawer__panel-back"
buttonVariant="tertiary"
origin="drawer-panel"
/>
) }
Expand Down
Loading