Skip to content

Commit 781d1fa

Browse files
aykanburcakaykanburcak
authored
Merge pull request #211 from moderntribe/feature/SITE-294/domain-card
feature: Adding target prop to SetupCardTask component, reformatting domain setup card
2 parents 5a4474c + 3ebf674 commit 781d1fa

File tree

9 files changed

+49
-45
lines changed

9 files changed

+49
-45
lines changed

Diff for: ‎packages/sitebuilder/sitebuilder.d.ts

+1
Original file line numberDiff line numberDiff line change
@@ -65,6 +65,7 @@ declare global {
6565
icon?: React.ReactElement | string;
6666
taskCta?: string;
6767
url?: string;
68+
target?: '_blank' | '_self';
6869
wizardHash?: string;
6970
}
7071

Diff for: ‎packages/sitebuilder/src/setup/GoLiveStatus.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -79,7 +79,7 @@ const GoLiveStatus: React.FC<GoLiveStatusInterface> = (props) => {
7979
};
8080

8181
return <SetupCardInfoRow
82-
sx={ { marginBottom: '8px' } }
82+
sx={ { mb: 3 } }
8383
primary={ ! completed && !! capturedDomain ? <RetryStatus domain={ capturedDomain } /> : <StandardStatus domain={ domain } completed={ completed } /> }
8484
secondary={ (completed || !! capturedDomain) && (
8585
<Link

Diff for: ‎packages/sitebuilder/src/setup/SetupCardTask.tsx

+2
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ const getAvatarProps = (props: SetupCardRowInterface) => {
1919
const SetupCardTask = (props: SetupCardRowInterface) => {
2020
const {
2121
url,
22+
target,
2223
wizardHash,
2324
...rest
2425
} = props;
@@ -39,6 +40,7 @@ const SetupCardTask = (props: SetupCardRowInterface) => {
3940
{ ...rest }
4041
onClick={ ! validUrl && wizardHash ? handleOnClick : undefined }
4142
href={ validUrl ? url : undefined }
43+
target={ validUrl ? target : undefined }
4244
icon={ Object.keys(avatarProps).length > 0 && (<Icon><img { ...avatarProps } alt="icon" /></Icon>) }
4345
/>;
4446
};

Diff for: ‎packages/sitebuilder/src/setup/data/constants.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ export const SetupData = {
77
},
88
goLiveStatus: {
99
manage: __('Manage', 'moderntribe-sitebuilder'),
10-
statusMessage: __('Your site is currently at', 'moderntribe-sitebuilder'),
10+
statusMessage: __('Your site domain is', 'moderntribe-sitebuilder'),
1111
tryAgain: __('Try Again', 'moderntribe-sitebuilder'),
1212
verifyMsgPart1: __('We were unable to verify', 'moderntribe-sitebuilder'),
1313
verifyMsgPart2: __('Try again in 8-12 hrs after your last attempt.', 'moderntribe-sitebuilder'),

Diff for: ‎packages/wme-ui/src/components/setup-card-task/setup-card-task-action.tsx

+16-5
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,7 @@ import {
77
TypographyProps,
88
} from '@mui/material';
99
import { styled } from '@mui/system';
10-
import ChevronRight from '@mui/icons-material/ChevronRight';
11-
import CheckCircleIcon from '@mui/icons-material/CheckCircle';
10+
import { CheckCircle, ChevronRight, Launch } from '@mui/icons-material';
1211
import type { SetupCardTaskProps } from './setup-card-task';
1312

1413
const ArrowWrapper = styled(Box, {
@@ -39,7 +38,7 @@ const PopupAction = styled(Typography, {
3938
},
4039
}));
4140

42-
const CompleteCheckmark = styled(CheckCircleIcon, {
41+
const CompleteCheckmark = styled(CheckCircle, {
4342
name: 'WmeCheckmark',
4443
slot: 'Root',
4544
})(({ theme }) => ({
@@ -49,8 +48,10 @@ const CompleteCheckmark = styled(CheckCircleIcon, {
4948
color: theme.palette.success.main,
5049
}));
5150

52-
const SetupCardAction = (props: Pick<SetupCardTaskProps, 'button' | 'taskCta' | 'isComplete'>) => {
53-
const { button, taskCta, isComplete } = props;
51+
const SetupCardAction = (props: Pick<SetupCardTaskProps, 'button' | 'target' | 'taskCta' | 'isComplete'>) => {
52+
const {
53+
button, target, taskCta, isComplete,
54+
} = props;
5455

5556
if (isComplete) {
5657
return (
@@ -64,6 +65,16 @@ const SetupCardAction = (props: Pick<SetupCardTaskProps, 'button' | 'taskCta' |
6465
return button;
6566
}
6667

68+
if (target === '_blank') {
69+
return (
70+
<ArrowWrapper>
71+
<Launch
72+
sx={{ fontSize: '1rem' }}
73+
/>
74+
</ArrowWrapper>
75+
);
76+
}
77+
6778
return (
6879
<ArrowWrapper>
6980
<PopupAction variant="body2">{taskCta}</PopupAction>

Diff for: ‎packages/wme-ui/src/components/setup-card-task/setup-card-task-wrapper.tsx

+3-2
Original file line numberDiff line numberDiff line change
@@ -6,15 +6,16 @@ import {
66
} from '@mui/material';
77
import type { SetupCardTaskProps } from './setup-card-task';
88

9-
const CardContentWrapper = (props: Pick<SetupCardTaskProps, 'href' | 'onClick' | 'children' | 'button' | 'disabled'>) => {
9+
const CardContentWrapper = (props: Pick<SetupCardTaskProps, 'href' | 'target' | 'onClick' | 'children' | 'button' | 'disabled'>) => {
1010
const {
11-
onClick, href, button, children, disabled,
11+
onClick, href, target, button, children, disabled,
1212
} = props;
1313

1414
if (!button) {
1515
return (
1616
<CardActionArea
1717
{...(href ? { href } : {})}
18+
{...(target ? { target } : {})}
1819
{...(onClick ? { onClick } : {})}
1920
disabled={disabled}
2021
className="WmeTask-content-wrapper"

Diff for: ‎packages/wme-ui/src/components/setup-card-task/setup-card-task.stories.mdx

+5
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,11 @@ import CalendarMonthIcon from "@mui/icons-material/CalendarMonth";
3535
},
3636
},
3737
},
38+
target: {
39+
control: "select",
40+
description: "The target attribute for the link.",
41+
options: ["_blank", "_self"],
42+
},
3843
taskCta: {
3944
control: "text",
4045
description: "The hover pop-up text for tasks without a button",

Diff for: ‎packages/wme-ui/src/components/setup-card-task/setup-card-task.tsx

+15-2
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ export interface SetupCardTaskProps extends BoxProps {
1515
icon?: React.ReactNode;
1616
button?: React.ReactElement;
1717
href?: string;
18+
target?: '_blank' | '_self';
1819
onClick?: (event: React.MouseEvent<HTMLElement>) => void;
1920
disabled?: boolean;
2021
taskCta?: string;
@@ -89,6 +90,7 @@ const SetupCardTask = (props: SetupCardTaskProps) => {
8990
intro,
9091
icon,
9192
href,
93+
target,
9294
onClick,
9395
button,
9496
disabled,
@@ -107,15 +109,26 @@ const SetupCardTask = (props: SetupCardTaskProps) => {
107109

108110
return (
109111
<Task className="WmeTask-root">
110-
<CardContentWrapper href={href} onClick={onClick} button={button} disabled={disabled}>
112+
<CardContentWrapper
113+
href={href}
114+
target={target}
115+
onClick={onClick}
116+
button={button}
117+
disabled={disabled}
118+
>
111119
<Box className="WmeTask-content">
112120
{icon && <TaskIcon className="WmeTaskIcon-wrapper">{icon}</TaskIcon>}
113121
<Box sx={{ mr: 2 }}>
114122
{title && <Typography component="h3" variant="taskTitle" mb={1}>{title}</Typography>}
115123
{intro && <Typography variant="body1">{intro}</Typography>}
116124
</Box>
117125
</Box>
118-
<SetupCardAction button={actionElement} taskCta={taskCta} isComplete={isComplete} />
126+
<SetupCardAction
127+
button={actionElement}
128+
target={target}
129+
taskCta={taskCta}
130+
isComplete={isComplete}
131+
/>
119132
</CardContentWrapper>
120133
</Task>
121134
);

Diff for: ‎plugins/wme-sitebuilder/wme-sitebuilder/Cards/GoLive.php

+5-34
Original file line numberDiff line numberDiff line change
@@ -42,56 +42,27 @@ public function props() {
4242
'id' => 'launch-domain',
4343
'navTitle' => __( 'Domain', 'wme-sitebuilder' ),
4444
'title' => __( 'Your Domain', 'wme-sitebuilder' ),
45-
'intro' => __( 'Go live with a custom domain, whether you purchased with Nexcess or elsewhere.', 'wme-sitebuilder' ),
45+
'intro' => __( 'Update your sites domain.', 'wme-sitebuilder' ),
4646
'completed' => $this->wizard->isComplete(),
4747
'rows' => [
4848
[
4949
'id' => 'launch-domain-status',
5050
'type' => 'launch-domain-status',
5151
],
5252
],
53-
'footer' => $this->footer(),
5453
];
5554

5655
if ( ! $this->wizard->isComplete() ) {
5756
$details['rows'][] = [
5857
'id' => 'site-domain-wizard',
5958
'type' => 'task',
60-
'title' => __( 'Purchase a domain', 'wme-sitebuilder' ),
61-
'intro' => __( 'Don\'t own a domain? Purchase a custom domain for your site.', 'wme-sitebuilder' ),
62-
'taskCta' => __( 'Get Started', 'wme-sitebuilder' ),
63-
'wizardHash' => '/wizard/go-live-purchase',
64-
];
65-
66-
$details['rows'][] = [
67-
'id' => 'site-domain-wizard',
68-
'type' => 'task',
69-
'title' => __( 'Connect your domain', 'wme-sitebuilder' ),
70-
'intro' => __( 'Already own a domain? Update your store URL with your custom domain.', 'wme-sitebuilder' ),
71-
'taskCta' => __( 'Get Started', 'wme-sitebuilder' ),
72-
'wizardHash' => '/wizard/go-live-connect',
59+
'title' => __( 'Publish your site with a custom domain', 'wme-sitebuilder' ),
60+
'intro' => __( 'Update your site URL with a custom domain you own', 'wme-sitebuilder' ),
61+
'url' => 'https://www.nexcess.net/help/guide-to-going-live-with-storebuilder/',
62+
'target' => '_blank',
7363
];
7464
}
7565

7666
return $details;
7767
}
78-
79-
protected function footer() {
80-
return [
81-
'collapsible' => false,
82-
'rows' => [
83-
[
84-
'type' => 'links',
85-
'title' => __( 'Need help?', 'wme-sitebuilder' ),
86-
'links' => [
87-
[
88-
'label' => __( 'Our Guide To Going Live', 'wme-sitebuilder' ),
89-
'target' => '__blank',
90-
'href' => 'https://www.nexcess.net/help/guide-to-going-live-with-storebuilder/',
91-
]
92-
]
93-
]
94-
]
95-
];
96-
}
9768
}

0 commit comments

Comments
 (0)