a4a update mobile billing view

Automattic · Apr 1, 2024 · 30a9365 · 30a9365
1 parent d2802bc
commit 30a9365
Show file tree

Hide file tree

Showing 7 changed files with 77 additions and 34 deletions.
diff --git a/client/a8c-for-agencies/components/layout/style.scss b/client/a8c-for-agencies/components/layout/style.scss
@@ -19,7 +19,7 @@ html,
 		padding: 0;
 
 		button {
-			padding: 20px 8px;
+			padding: 20px 0;
 		}
 	}
 }
@@ -160,6 +160,10 @@ html,
 		.current-section button {
 			border: none;
 		}
+
+		.current-section .gridicons-menu {
+			margin: 0;
+		}
 	}
 }
 
@@ -233,6 +237,10 @@ html,
 	margin: 8px 0 0 0;
 	font-weight: 400;
 	line-height: 1.2;
+
+	@include breakpoint-deprecated( "<660px" ) {
+		display: none;
+	}
 }
 
 .section-nav.a4a-layout__navigation {

diff --git a/client/a8c-for-agencies/sections/purchases/billing/billing-dashboard.tsx b/client/a8c-for-agencies/sections/purchases/billing/billing-dashboard.tsx
@@ -1,5 +1,4 @@
 import { Button } from '@automattic/components';
-import { useBreakpoint } from '@automattic/viewport-react';
 import { useTranslate } from 'i18n-calypso';
 import Layout from 'calypso/a8c-for-agencies/components/layout';
 import LayoutBody from 'calypso/a8c-for-agencies/components/layout/body';
@@ -14,31 +13,28 @@ import PageViewTracker from 'calypso/lib/analytics/page-view-tracker';
 import BillingDetails from './billing-details';
 import BillingSummary from './billing-summary';
 
+import './style.scss';
+
 export default function BillingDashboard() {
 	const translate = useTranslate();
 
 	const title = translate( 'Billing' );
 
 	const partnerCanIssueLicense = true; // FIXME: get this from state
-	const isNarrowView = useBreakpoint( '<660px' );
 
 	const onIssueNewLicenseClick = () => {
 		// TODO: dispatch action to open issue license modal
 	};
 
 	return (
-		<Layout
-			className="billing-dashboard"
-			title={ title }
-			wide
-			sidebarNavigation={ <MobileSidebarNavigation /> }
-		>
+		<Layout className="billing-dashboard" title={ title } wide>
 			<PageViewTracker title="Purchases > Billing" path="/purchases/billing" />
 
 			<LayoutTop>
 				<LayoutHeader>
-					{ ! isNarrowView && <Title>{ title } </Title> }
-					<Actions>
+					<Title>{ title } </Title>
+					<Actions className="a4a-billing__header-actions">
+						<MobileSidebarNavigation />
 						<Button
 							disabled={ ! partnerCanIssueLicense }
 							href={ partnerCanIssueLicense ? A4A_MARKETPLACE_LINK : undefined }

diff --git a/client/a8c-for-agencies/sections/purchases/billing/style.scss b/client/a8c-for-agencies/sections/purchases/billing/style.scss
@@ -0,0 +1,10 @@
+.a4a-billing__header-actions {
+	@include breakpoint-deprecated( "<660px" ) {
+		display: block;
+
+		a {
+			width: 100%;
+			margin-block-end: 1rem;
+		}
+	}
+}
diff --git a/client/a8c-for-agencies/sections/purchases/licenses/licenses-overview/index.tsx b/client/a8c-for-agencies/sections/purchases/licenses/licenses-overview/index.tsx
@@ -1,5 +1,4 @@
 import { Button } from '@automattic/components';
-import { useBreakpoint } from '@automattic/viewport-react';
 import { useTranslate } from 'i18n-calypso';
 import Layout from 'calypso/a8c-for-agencies/components/layout';
 import LayoutBody from 'calypso/a8c-for-agencies/components/layout/body';
@@ -46,7 +45,6 @@ export default function LicensesOverview( {
 	const dispatch = useDispatch();
 
 	const title = translate( 'Licenses' );
-	const isNarrowView = useBreakpoint( '<660px' );
 
 	const context = {
 		filter,
@@ -67,13 +65,7 @@ export default function LicensesOverview( {
 	const showEmptyStateContent = isFetched && data?.[ LicenseFilter.NotRevoked ] === 0;
 
 	return (
-		<Layout
-			className="licenses-overview"
-			title={ title }
-			wide
-			withBorder
-			sidebarNavigation={ <MobileSidebarNavigation /> }
-		>
+		<Layout className="licenses-overview" title={ title } wide withBorder>
 			<PageViewTracker
 				title="Purchases > Licenses"
 				path="/purchases/licenses/:filter"
@@ -82,14 +74,14 @@ export default function LicensesOverview( {
 			<LicensesOverviewContext.Provider value={ context }>
 				<LayoutTop withNavigation>
 					<LayoutHeader>
-						{ ! isNarrowView && <Title>{ title } </Title> }
-						<Actions>
+						<Title>{ title } </Title>
+						<Actions className="a4a-licenses__header-actions">
+							<MobileSidebarNavigation />
 							<Button
 								disabled={ ! partnerCanIssueLicense }
 								href={ partnerCanIssueLicense ? A4A_MARKETPLACE_LINK : undefined }
 								onClick={ onIssueNewLicenseClick }
 								primary
-								style={ { marginLeft: 'auto' } }
 							>
 								{ translate( 'Issue New License' ) }
 							</Button>

diff --git a/client/a8c-for-agencies/sections/purchases/licenses/licenses-overview/style.scss b/client/a8c-for-agencies/sections/purchases/licenses/licenses-overview/style.scss
@@ -1,3 +1,5 @@
+@import "@wordpress/base-styles/breakpoints";
+@import "@wordpress/base-styles/mixins";
 
 .licenses-overview .search {
 	box-shadow: 0 0 0 1px var(--color-neutral-5);
@@ -7,3 +9,19 @@
 	margin: 32px auto;
 	text-align: center;
 }
+
+.a4a-licenses__header-actions {
+	@include breakpoint-deprecated( "<660px" ) {
+		display: block;
+
+		a {
+			width: 100%;
+		}
+	}
+}
+
+.a4a-layout__navigation-wrapper {
+	@include breakpoint-deprecated( "<660px" ) {
+		margin-block-end: 1rem;
+	}
+}
diff --git a/client/a8c-for-agencies/sections/purchases/payment-methods/payment-method-overview/index.tsx b/client/a8c-for-agencies/sections/purchases/payment-methods/payment-method-overview/index.tsx
@@ -1,5 +1,4 @@
 import { Button } from '@automattic/components';
-import { useBreakpoint } from '@automattic/viewport-react';
 import classNames from 'classnames';
 import { useTranslate } from 'i18n-calypso';
 import { useCallback, useMemo, useState } from 'react';
@@ -52,7 +51,6 @@ export default function PaymentMethodOverview() {
 		hasMoreStoredCards,
 		setPaging,
 	} );
-	const isNarrowView = useBreakpoint( '<660px' );
 
 	const onAddNewCardClick = useCallback( () => {
 		dispatch( recordTracksEvent( 'calypso_a4a_payments_add_new_card_button_click' ) );
@@ -108,21 +106,18 @@ export default function PaymentMethodOverview() {
 	] );
 
 	return (
-		<Layout
-			className="payment-method-overview"
-			title={ translate( 'Payment Methods' ) }
-			wide
-			sidebarNavigation={ <MobileSidebarNavigation /> }
-		>
+		<Layout className="payment-method-overview" title={ translate( 'Payment Methods' ) } wide>
 			<PageViewTracker title="Purchases > Payment Methods" path="/purchases/payment-methods" />
 
 			<LayoutTop>
 				<LayoutHeader>
-					{ ! isNarrowView && <Title>{ translate( 'Payment Methods' ) } </Title> }
+					<Title>{ translate( 'Payment Methods' ) } </Title>
 					<Subtitle>
 						{ translate( "Add a payment method to issue licenses. It's auto-charged monthly." ) }
 					</Subtitle>
-					<Actions>
+					<Actions className="a4a-payment-methods__header-actions">
+						<MobileSidebarNavigation />
+
 						{ hasStoredCards && (
 							<Button href={ A4A_PAYMENT_METHODS_ADD_LINK } onClick={ onAddNewCardClick } primary>
 								{ translate( 'Add new card' ) }
@@ -132,7 +127,12 @@ export default function PaymentMethodOverview() {
 				</LayoutHeader>
 			</LayoutTop>
 
-			<LayoutBody>{ content }</LayoutBody>
+			<LayoutBody>
+				<p className="a4a-payment-methods__mobile-description">
+					{ translate( "Add a payment method to issue licenses. It's auto-charged monthly." ) }
+				</p>
+				{ content }
+			</LayoutBody>
 		</Layout>
 	);
 }
diff --git a/...nt/a8c-for-agencies/sections/purchases/payment-methods/payment-method-overview/style.scss b/...nt/a8c-for-agencies/sections/purchases/payment-methods/payment-method-overview/style.scss
@@ -96,3 +96,22 @@
 		}
 	}
 }
+
+.a4a-payment-methods__header-actions {
+	@include breakpoint-deprecated( "<660px" ) {
+		display: block;
+	}
+}
+
+.a4a-payment-methods__mobile-description {
+	display: none;
+
+	@include breakpoint-deprecated( "<660px" ) {
+		display: block;
+		font-size: 1rem;
+		color: var(--color-neutral-60);
+		font-weight: 400;
+		line-height: 1.2;
+	}
+}
+