Skip to content

DIFM: Summary page updates #103308

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

Open
wants to merge 11 commits into
base: trunk
Choose a base branch
from
Open

DIFM: Summary page updates #103308

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
2f226f3
Top align the total
m1r0 May 9, 2025
90d1030
Reduce the padding of the total
m1r0 May 9, 2025
6387835
Replace Total with Subtotal
m1r0 May 9, 2025
38992c2
Remove the asterisks paragraph
m1r0 May 9, 2025
f060326
Move the "money-back guarantee" paragraph
m1r0 May 9, 2025
3c8a5c9
Improve the margins and remove some borders
m1r0 May 9, 2025
62211ae
Increase the checkout button width
m1r0 May 9, 2025
2aae954
Show the refund text after the subtotal on mobile
m1r0 May 9, 2025
b40a652
Fix the checkout button margin on mobile
m1r0 May 9, 2025
5acdcef
Increase the subtotal font size on mobile
m1r0 May 9, 2025
efb6d33
Fix refund text margin on mobile
m1r0 May 9, 2025
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
59 changes: 50 additions & 9 deletions client/signup/steps/page-picker/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import { getDIFMTieredPriceDetails, WPCOM_DIFM_LITE } from '@automattic/calypso-
import { RazorpayHookProvider } from '@automattic/calypso-razorpay';
import { StripeHookProvider } from '@automattic/calypso-stripe';
import { Button } from '@automattic/components';
import { BraveTick } from '@automattic/components/src/icons';
import { formatCurrency } from '@automattic/number-formatters';
import { createRequestCartProduct } from '@automattic/shopping-cart';
import { isMobile } from '@automattic/viewport';
Expand Down Expand Up @@ -361,7 +362,12 @@ interface StepProps {

const StyledButton = styled( Button )`
&.button.is-primary {
min-width: 230px;
padding: 10px 27px 10px 28px;

@media ( max-width: 600px ) {
min-width: auto;
}
}
`;

Expand All @@ -374,6 +380,24 @@ const Placeholder = styled.span`
min-width: 32px;
`;

const RefundText = styled.div`
display: flex;
align-items: center;
width: 100%;
margin-top: 24px;

@media ( max-width: 600px ) {
font-size: smaller;
}
`;

const StyledBraveTickIcon = styled( BraveTick )`
margin-inline-end: 6px;
path {
fill: var( --color-accent );
}
`;

function OneClickPurchaseModal( {
onClose,
siteSlug,
Expand Down Expand Up @@ -579,6 +603,17 @@ function DIFMPagePicker( props: StepProps ) {
}
);

const renderRefundText = () => {
return (
<RefundText className="refund-text">
<StyledBraveTickIcon />
{ translate( '%(days)d-day money-back guarantee', {
args: { days: 14 },
} ) }
</RefundText>
);
};

return (
<StepWrapper
headerText={ headerText }
Expand Down Expand Up @@ -610,21 +645,27 @@ function DIFMPagePicker( props: StepProps ) {
isHorizontalLayout
isWideLayout={ false }
headerButton={
<StyledButton
disabled={ isProductsLoading }
busy={ isCheckoutButtonBusy }
primary
onClick={ submitPickedPages }
>
{ translate( 'Go to Checkout' ) }
</StyledButton>
<>
<StyledButton
disabled={ isProductsLoading }
busy={ isCheckoutButtonBusy }
primary
onClick={ submitPickedPages }
>
{ translate( 'Go to Checkout' ) }
</StyledButton>

{ renderRefundText() }
</>
}
headerContent={
<ShoppingCartForDIFM
selectedPages={ selectedPages }
isStoreFlow={ isStoreFlow }
currentPlanSlug={ currentPlan?.product_slug }
/>
>
{ renderRefundText() }
</ShoppingCartForDIFM>
}
{ ...props }
/>
Expand Down
53 changes: 9 additions & 44 deletions client/signup/steps/page-picker/shopping-cart-for-difm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
import { BraveTick } from '@automattic/components/src/icons';
import styled from '@emotion/styled';
import { useTranslate } from 'i18n-calypso';
import { useSelector } from 'react-redux';
import { getCurrentUserCurrencyCode } from 'calypso/state/currency-code/selectors';
import LoadingLine from './loading-content';
import useCartForDIFM, { CartItem } from './use-cart-for-difm';
import type { ReactNode } from 'react';

const CartContainer = styled.div`
position: relative;
Expand All @@ -20,7 +20,6 @@ const CartContainer = styled.div`
align-items: center;
justify-content: center;
}
margin-bottom: 48px;
`;

const LoadingContainer = styled.div`
Expand All @@ -47,14 +46,6 @@ const Cart = styled.div`
width: 100%;
border-top: 1px solid var( --studio-gray-5 );
}
.page-picker__disclaimer {
color: var( --studio-gray-50 );
font-size: 12px;

@media ( max-width: 600px ) {
padding: 5px 0;
}
}
`;
const DummyLineItemContainer = styled.div`
display: flex;
Expand Down Expand Up @@ -110,7 +101,6 @@ const LineItemsWrapper = styled.div`
max-height: 75vh;
width: 100%;
max-width: 365px;
border-bottom: 1px solid var( --studio-gray-5 );
@media ( max-width: 600px ) {
margin: 0 0px;
border: none;
Expand All @@ -123,16 +113,15 @@ const Total = styled.div`
display: flex;
flex-wrap: wrap;
justify-content: space-between;
padding: 30px 0;
padding: 16px 0;
div {
display: flex;
align-items: center;
&.page-picker__value {
font-family: Recoleta;
font-size: 32px;
font-weight: 400;
@media ( max-width: 600px ) {
font-size: 16px;
font-size: 20px;
}
}
}
Expand All @@ -141,25 +130,6 @@ const Total = styled.div`
font-size: 16px;
margin-top: 6px;
padding: 5px 0px;
border-bottom: 1px solid var( --studio-gray-5 );
}
`;

const StyledBraveTickIcon = styled( BraveTick )`
margin-inline-end: 6px;
path {
fill: var( --color-accent );
}
`;

const RefundText = styled.div`
display: flex;
width: 100%;
justify-content: flex-end;
margin-top: 8px;

@media ( max-width: 600px ) {
font-size: smaller;
}
`;

Expand All @@ -184,10 +154,12 @@ export default function ShoppingCartForDIFM( {
selectedPages,
isStoreFlow,
currentPlanSlug,
children,
}: {
selectedPages: string[];
isStoreFlow: boolean;
currentPlanSlug?: string | null;
children?: ReactNode;
} ) {
const translate = useTranslate();
const { items, total, isProductsLoading } = useCartForDIFM( {
Expand All @@ -212,19 +184,12 @@ export default function ShoppingCartForDIFM( {
) ) }

<Total>
<div>{ translate( 'Total' ) }</div>
<div className="page-picker__value">{ total }*</div>
<RefundText>
<StyledBraveTickIcon />
{ translate( '%(days)d-day money-back guarantee', {
args: { days: 14 },
} ) }
</RefundText>
<div>{ translate( 'Subtotal' ) }</div>
<div className="page-picker__value">{ total }</div>
</Total>
</LineItemsWrapper>
<div className="page-picker__disclaimer">
{ translate( '*Final price will be calculated at checkout.' ) }
</div>

{ children }
</Cart>
</CartContainer>
);
Expand Down
22 changes: 21 additions & 1 deletion client/signup/steps/page-picker/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,27 @@
}

.step-wrapper__header-button {
margin-top: 34px;
margin-top: 10px;

@media (max-width: $break-small) {
margin-top: 34px;
}

.refund-text {
@media (max-width: $break-small) {
display: none;
}
}
}

.step-wrapper__header-content {
.refund-text {
margin: 5px 0;

@media (min-width: $break-small) {
display: none;
}
}
}
}
}
Expand Down