mozilla
/
fxa
зеркало из https://github.com/mozilla/fxa.git
1
0
Форкнуть 0
Код Задачи Пакеты Проекты Релизы Вики Активность

Merge pull request #14520 from mozilla/FXA-5515_Checkout 

refactor(payments-server): Convert responsive design in Checkout component to use Tailwind
This commit is contained in:
Lisa Chan 2022-12-14 14:40:51 -05:00 коммит произвёл GitHub
Родитель 074930e62b 8d1a70ee3a
Коммит c4ed0ef693
Не найден ключ, соответствующий данной подписи
Идентификатор ключа GPG: 4AEE18F83AFDEB23
14 изменённых файлов: 100 добавлений и 120 удалений
Показать статистику Скачать Patch файл Скачать Diff файл Показать все файлы Свернуть все файлы

4
packages/fxa-payments-server/src/components/NewUserEmailForm/index.tsx
Просмотреть файл

@ -110,7 +110,9 @@ export const NewUserEmailForm = ({
</a>
</p>
</Localized>
<hr />
<hr className="mx-auto w-full" />
<Localized id="new-user-email" attrs={{ label: true }}>
<Input
type="text"

2
packages/fxa-payments-server/src/components/PaymentConfirmation/index.tsx
Просмотреть файл

@ -79,7 +79,7 @@ export const PaymentConfirmation = ({
<>
<SubscriptionTitle screenType="success" />
<section
className="mb-auto mx-4 tablet:m-0 payment-confirmation"
className="mb-auto tablet:m-0 payment-confirmation"
data-testid="payment-confirmation"
>
<header className="flex flex-col justify-center items-center row-divider-grey-200 text-center pb-8 mt-5 desktop:mt-2">

2
packages/fxa-payments-server/src/components/PaymentErrorView/index.tsx
Просмотреть файл

@ -153,7 +153,7 @@ export const PaymentErrorView = ({
<>
{title}
<section
className={`payment-error row-start-3 row-end-4 mx-4 tablet:mt-0 ${className}`}
className={`payment-error tablet:mt-0 ${className}`}
data-testid="payment-error"
>
<div className="wrapper mb-12">

2
packages/fxa-payments-server/src/components/PaymentProcessing/index.tsx
Просмотреть файл

@ -21,7 +21,7 @@ export const PaymentProcessing = ({
<>
<SubscriptionTitle screenType="processing" className={className} />
<section
className={`payment-processing flex flex-col mx-4 ${className}`}
className={`payment-processing flex flex-col ${className}`}
data-testid="payment-processing"
>
<div className="flex flex-col text-center">

1
packages/fxa-payments-server/src/components/PaymentProviderDetails/index.scss
Просмотреть файл

@ -27,6 +27,7 @@
color: rgba(0, 0, 0, 0);
width: 90px;
height: 24px;
margin: 16px 0;
position: relative;
}

2
packages/fxa-payments-server/src/components/SubscriptionTitle/index.tsx
Просмотреть файл

@ -35,7 +35,7 @@ export const SubscriptionTitle = ({
return (
<div
className={`subscription-title bg-white shadow-sm shadow-grey-300 text-center mt-0 mx-4 mb-auto pt-5 px-4 pb-px border-y-auto row-start-1 row-end-2 tablet:mx-0 ${className}`}
className={`subscription-title bg-white shadow-sm shadow-grey-300 text-center mt-0 mb-auto pt-5 px-4 pb-px border-y-auto tablet:mx-0 ${className}`}
data-testid={`subscription-${screenType}-title`}
>
<Localized id={`subscription-${screenType}-title`}>

41
packages/fxa-payments-server/src/routes/Checkout/index.scss
Просмотреть файл

@ -1,41 +0,0 @@
@import '../../../../fxa-content-server/app/styles/variables';
@import '../../../../fxa-content-server/app/styles/breakpoints';
.checkout-payment {
@include max-width('tablet') {
grid-row: 4/5;
border-radius: 8px;
margin: 24px 16px;
min-height: 100%;
}
@media (orientation: landscape) and (max-width: 927px) and (max-height: 429px) {
grid-row: 4/5;
border-radius: 8px;
margin: 24px 16px;
min-height: 100%;
}
@media (orientation: portrait) and (max-width: 429px) and (max-height: 927px) {
grid-row: 4/5;
border-radius: 8px;
margin: 24px 16px;
min-height: 100%;
}
@include min-width('desktop') {
padding: 16px 48px 48px;
}
}
.pay-with-heading {
&:before,
&:after {
content: '';
border-top: 1px solid #e0e0e6;
}
@include max-width('tablet') {
margin-top: 16px;
}
}

51
packages/fxa-payments-server/src/routes/Checkout/index.tsx
Просмотреть файл

@ -34,7 +34,6 @@ import { Customer, Profile } from '../../store/types';
import AcceptedCards from '../Product/AcceptedCards';
import './index.scss';
import PaymentForm, {
StripePaymentSubmitResult,
StripePaymentUpdateResult,
@ -344,9 +343,32 @@ export const Checkout = ({
})}
/>
{transactionInProgress && isMobile ? null : (
<div className="payment-panel">
<PlanDetails
{...{
selectedPlan,
isMobile,
showExpandButton: isMobile,
coupon,
}}
/>
<CouponForm
{...{
planId: selectedPlan.plan_id,
readOnly: false,
subscriptionInProgress: inProgress || transactionInProgress,
coupon,
setCoupon,
}}
/>
</div>
)}
<div
className={classNames(
'checkout-payment component-card border-t-0 pt-4 px-4 pb-14 row-start-2 row-end-3 rounded-t-none text-grey-600',
'component-card border-t-0 min-h-full mb-6 pt-4 px-4 pb-14 rounded-t-lg text-grey-600 tablet:rounded-t-none desktop:px-12 desktop:pb-12',
{
hidden: transactionInProgress || subscriptionError,
}
@ -371,7 +393,7 @@ export const Checkout = ({
}
/>
<hr />
<hr className="mx-auto w-full" />
<PaymentMethodHeader
plan={selectedPlan}
@ -470,29 +492,6 @@ export const Checkout = ({
/>
</div>
</div>
{transactionInProgress && isMobile ? null : (
<div className="payment-panel">
<PlanDetails
{...{
selectedPlan,
isMobile,
showExpandButton: isMobile,
coupon,
}}
/>
<CouponForm
{...{
planId: selectedPlan.plan_id,
readOnly: false,
subscriptionInProgress: inProgress || transactionInProgress,
coupon,
setCoupon,
}}
/>
</div>
)}
</div>
</>
);

8
packages/fxa-payments-server/src/routes/Product/SubscriptionCreate/index.scss
Просмотреть файл

@ -3,8 +3,6 @@
@import '../../../styles/variables';
.subscription-title + .product-payment {
grid-row: 4/5;
@include min-width('tablet') {
border-top: 0;
border-radius: 0 0 8px 8px;
@ -16,18 +14,16 @@
.product-payment {
background: $color-white;
border-radius: 8px;
box-shadow: 0px 1px 4px 0px rgb(158, 158, 158);
color: rgba(12, 12, 13, 0.8);
grid-row: 4/5;
margin: 24px 16px;
margin-bottom: 24px;
min-height: 100%;
padding: 16px 16px 60px;
@include min-width('tablet'){
grid-row: 1/3;
margin: 0 0 32px;
min-height: auto;
box-shadow: 0 -1px #fff,0 1px #fff,-2px 2px 2px -2px #9e9e9e,2px 2px 2px -2px #9e9e9e;
}
@include min-width('desktop') {

56
packages/fxa-payments-server/src/routes/Product/SubscriptionCreate/index.tsx
Просмотреть файл

@ -230,10 +230,37 @@ export const SubscriptionCreate = ({
hidden: transactionInProgress || subscriptionError,
})}
/>
{transactionInProgress && isMobile ? null : (
<div className="payment-panel">
<PlanDetails
{...{
selectedPlan,
isMobile,
showExpandButton: isMobile,
coupon: coupon,
}}
/>
<CouponForm
{...{
planId: selectedPlan.plan_id,
readOnly: false,
subscriptionInProgress: inProgress || transactionInProgress,
coupon,
setCoupon,
}}
/>
</div>
)}
<div
className={classNames('product-payment', {
hidden: transactionInProgress || subscriptionError,
})}
className={classNames(
'product-payment rounded-lg tablet:rounded-t-none',
{
hidden: transactionInProgress || subscriptionError,
}
)}
data-testid="subscription-create"
>
<PaymentMethodHeader
@ -324,29 +351,6 @@ export const SubscriptionCreate = ({
{selectedPlan && <TermsAndPrivacy plan={selectedPlan} />}
</div>
</div>
{transactionInProgress && isMobile ? null : (
<div className="payment-panel">
<PlanDetails
{...{
selectedPlan,
isMobile,
showExpandButton: isMobile,
coupon: coupon,
}}
/>
<CouponForm
{...{
planId: selectedPlan.plan_id,
readOnly: false,
subscriptionInProgress: inProgress || transactionInProgress,
coupon,
setCoupon,
}}
/>
</div>
)}
</div>
</>
);

2
packages/fxa-payments-server/src/routes/Product/SubscriptionUpgrade/PlanUpgradeDetails.tsx
Просмотреть файл

@ -34,7 +34,7 @@ export const PlanUpgradeDetails = ({
return (
<section
className={`plan-upgrade-details-component mt-6 mx-4 ${className}`}
className={`plan-upgrade-details-component pt-6 tablet:pt-0 ${className}`}
{...{ role }}
data-testid="plan-upgrade-details-component"
>

16
packages/fxa-payments-server/src/routes/Product/SubscriptionUpgrade/index.stories.tsx
Просмотреть файл

@ -10,6 +10,7 @@ import { SignInLayout } from '../../../components/AppLayout';
import {
CUSTOMER,
PAYPAL_CUSTOMER,
SELECTED_PLAN,
UPGRADE_FROM_PLAN,
PROFILE,
@ -20,7 +21,7 @@ import { WebSubscription } from 'fxa-shared/subscriptions/types';
function init() {
storiesOf('routes/Product/SubscriptionUpgrade', module)
.add('upgrade offer', () => (
.add('upgrade offer - Visa', () => (
<SubscriptionUpgradeView
props={{
...MOCK_PROPS,
@ -28,6 +29,14 @@ function init() {
}}
/>
))
.add('upgrade offer - PayPal', () => (
<SubscriptionUpgradeView
props={{
...MOCK_PROPS_PAYPAL,
updateSubscriptionPlanAndRefresh: () => linkToUpgradeSuccess(),
}}
/>
))
.add('upgrade offer localized to xx-pirate', () => (
<SubscriptionUpgradeView
appContextValue={{
@ -111,4 +120,9 @@ const MOCK_PROPS: SubscriptionUpgradeProps = {
resetUpdateSubscriptionPlan: action('resetUpdateSubscriptionPlan'),
};
const MOCK_PROPS_PAYPAL: SubscriptionUpgradeProps = {
...MOCK_PROPS,
customer: PAYPAL_CUSTOMER,
};
init();

23
packages/fxa-payments-server/src/routes/Product/SubscriptionUpgrade/index.tsx
Просмотреть файл

@ -120,8 +120,20 @@ export const SubscriptionUpgrade = ({
)}
<Header {...{ profile }} />
<div className="main-content">
<div className="payment-panel">
<PlanUpgradeDetails
{...{
profile,
selectedPlan,
upgradeFromPlan,
isMobile,
showExpandButton: isMobile,
}}
/>
</div>
<div
className="product-payment product-upgrade"
className="product-payment product-upgrade rounded-lg tablet:rounded-t-none"
data-testid="subscription-upgrade"
>
{!isMobile ? (
@ -197,15 +209,6 @@ export const SubscriptionUpgrade = ({
</div>
</Form>
</div>
<PlanUpgradeDetails
{...{
profile,
selectedPlan,
upgradeFromPlan,
isMobile,
showExpandButton: isMobile,
}}
/>
{mobileUpdateHeading}
</div>
</>

10
packages/fxa-payments-server/src/styles/tailwind.css
Просмотреть файл

@ -26,7 +26,7 @@
}
.payment-panel {
@apply mx-4 tablet:mt-6 tablet:max-w-xs tablet:col-span-2 tablet:row-start-1 tablet:row-end-4;
@apply mb-6 tablet:mt-6 tablet:min-w-[18rem] tablet:max-w-xs tablet:col-start-2 tablet:col-end-auto tablet:row-start-1 tablet:row-end-3;
}
/* footer copy */
@ -52,7 +52,9 @@
/* shared styles used in Checkout and SubscriptionCreate*/
.pay-with-heading {
@apply gap-5 grid grid-cols-[minmax(20px,_1fr)_auto_minmax(20px,_1fr)] items-center mt-0 mx-0 mb-6 text-center text-grey-400 w-full;
@apply gap-5 grid grid-cols-[minmax(20px,_1fr)_auto_minmax(20px,_1fr)] items-center mb-6 text-grey-400;
@apply before:content-[''] before:border-b before:border-0 before:border-solid before:border-grey-200;
@apply after:content-[''] after:border-b after:border-0 after:border-solid after:border-grey-200;
}
.step-header {
@ -126,8 +128,8 @@
}
.main-content {
@apply grid grid-cols-[calc(100vw_-_1.5rem)] grid-rows-[min-content] gap-x-4 mt-16 min-h-[calc(100vh_-_4rem)];
@apply tablet:grid-cols-[minmax(min-content,500px)_minmax(20rem,1fr)] tablet:gap-x-8 tablet:mt-[80px] tablet:mb-auto tablet:mx-3;
@apply mt-16 mx-7 min-h-[calc(100vh_-_4rem)];
@apply tablet:grid tablet:grid-cols-[minmax(min-content,500px)_minmax(20rem,1fr)] tablet:grid-rows-[min-content] tablet:gap-x-8 tablet:mt-[80px] tablet:mb-auto;
@apply desktop:grid-cols-[600px_1fr];
}