mirrors/mostlymatter
1
0
Форкнуть 0
Код Задачи Запросы на слияние Действия Пакеты Проекты Релизы Вики Активность

Add shiping address and add back terms.

Просмотр исходного кода
Этот коммит содержится в:
Conor Macpherson
2023-03-27 11:49:23 -04:00
родитель afb929b041
Коммит acb4c57ee1
2 изменённых файлов: 149 добавлений и 118 удалений
Скачать Patch файл Скачать Diff файл Показать все файлы Свернуть все файлы

262
webapp/channels/src/components/self_hosted_expansion_modal/index.tsx
Просмотреть файл

@@ -3,7 +3,7 @@
import React, {useEffect, useRef, useState} from 'react'; import React, {useEffect, useRef, useState} from 'react';
import {useIntl} from 'react-intl'; import {FormattedMessage, useIntl} from 'react-intl';
import {useDispatch, useSelector} from 'react-redux'; import {useDispatch, useSelector} from 'react-redux';
@@ -47,18 +47,34 @@ import SelfHostedExpansionCard from './expansion_card';
import './self_hosted_expansion_modal.scss'; import './self_hosted_expansion_modal.scss';
import {STORAGE_KEY_EXPANSION_IN_PROGRESS} from './constants'; import {STORAGE_KEY_EXPANSION_IN_PROGRESS} from './constants';
import Address from 'components/self_hosted_purchase_modal/address';
import ChooseDifferentShipping from 'components/choose_different_shipping';
import Terms from 'components/self_hosted_purchase_modal/terms';
export interface FormState { export interface FormState {
cardName: string;
cardFilled: boolean;
address: string; address: string;
address2: string; address2: string;
city: string; city: string;
state: string; state: string;
country: string; country: string;
postalCode: string; postalCode: string;
cardName: string;
organization: string; organization: string;
cardFilled: boolean;
seats: number; seats: number;
shippingSame: boolean;
shippingAddress: string;
shippingAddress2: string;
shippingCity: string;
shippingState: string;
shippingCountry: string;
shippingPostalCode: string;
agreedTerms: boolean;
submitting: boolean; submitting: boolean;
succeeded: boolean; succeeded: boolean;
progressBar: number; progressBar: number;
@@ -67,16 +83,24 @@ export interface FormState {
export function makeInitialState(seats: number): FormState { export function makeInitialState(seats: number): FormState {
return { return {
cardName: '',
cardFilled: false,
address: '', address: '',
address2: '', address2: '',
city: '', city: '',
state: '', state: '',
country: '', country: '',
postalCode: '', postalCode: '',
cardName: '',
organization: '', organization: '',
cardFilled: false, shippingSame: true,
shippingAddress: '',
shippingAddress2: '',
shippingCity: '',
shippingState: '',
shippingCountry: '',
shippingPostalCode: '',
seats, seats,
agreedTerms: false,
submitting: false, submitting: false,
succeeded: false, succeeded: false,
progressBar: 0, progressBar: 0,
@@ -97,6 +121,18 @@ export function canSubmit(formState: FormState, progress: ValueOf<typeof SelfHos
formState.postalCode && formState.postalCode &&
formState.country, formState.country,
); );
const validShippingAddress = Boolean(
formState.shippingSame ||
formState.shippingAddress &&
formState.shippingCity &&
formState.shippingState &&
formState.shippingPostalCode &&
formState.shippingCountry,
);
const agreedToTerms = formState.agreedTerms;
const validCard = Boolean( const validCard = Boolean(
formState.cardName && formState.cardName &&
formState.cardFilled, formState.cardFilled,
@@ -104,27 +140,28 @@ export function canSubmit(formState: FormState, progress: ValueOf<typeof SelfHos
const validSeats = formState.seats > 0; const validSeats = formState.seats > 0;
switch (progress) { switch (progress) {
case SelfHostedSignupProgress.PAID: case SelfHostedSignupProgress.PAID:
case SelfHostedSignupProgress.CREATED_LICENSE: case SelfHostedSignupProgress.CREATED_LICENSE:
case SelfHostedSignupProgress.CREATED_SUBSCRIPTION: case SelfHostedSignupProgress.CREATED_SUBSCRIPTION:
return true; return true;
case SelfHostedSignupProgress.CONFIRMED_INTENT: { case SelfHostedSignupProgress.CONFIRMED_INTENT: {
return Boolean( return Boolean(
validAddress && validAddress && validShippingAddress && validSeats && agreedToTerms
validSeats, );
); }
} case SelfHostedSignupProgress.START:
case SelfHostedSignupProgress.START: case SelfHostedSignupProgress.CREATED_CUSTOMER:
case SelfHostedSignupProgress.CREATED_CUSTOMER: case SelfHostedSignupProgress.CREATED_INTENT:
case SelfHostedSignupProgress.CREATED_INTENT: return Boolean(
return Boolean( validCard &&
validCard &&
validAddress && validAddress &&
validSeats, validShippingAddress &&
); validSeats &&
default: { agreedToTerms
return false; );
} default: {
return false;
}
} }
} }
@@ -173,6 +210,14 @@ export default function SelfHostedExpansionModal() {
postal_code: formState.postalCode, postal_code: formState.postalCode,
state: formState.state, state: formState.state,
}, },
shipping_address: {
city: formState.city,
country: formState.country,
line1: formState.address,
line2: formState.address2,
postal_code: formState.postalCode,
state: formState.state,
},
organization: formState.organization, organization: formState.organization,
}); });
} catch { } catch {
@@ -361,104 +406,87 @@ export default function SelfHostedExpansionModal() {
/> />
</div> </div>
<span className='section-title'> <span className='section-title'>
{intl.formatMessage({ <FormattedMessage
id: 'payment_form.billing_address', id='payment_form.billing_address'
defaultMessage: 'Billing address', defaultMessage='Billing address'
})} />
</span> </span>
<DropdownInput <Address
testId='selfHostedExpansionCountrySelector' type='billing'
onChange={(option: {value: string}) => { country={formState.country}
changeCountry={(option) => {
setFormState({...formState, country: option.value}); setFormState({...formState, country: option.value});
}} }}
value={ address={formState.address}
formState.country ? {value: formState.country, label: formState.country} : undefined changeAddress={(e) => {
} setFormState({...formState, address: e.target.value});
options={COUNTRIES.map((country) => ({ }}
value: country.name, address2={formState.address2}
label: country.name, changeAddress2={(e) => {
}))} setFormState({...formState, address2: e.target.value});
legend={intl.formatMessage({ }}
id: 'payment_form.country', city={formState.city}
defaultMessage: 'Country', changeCity={(e) => {
})} setFormState({...formState, city: e.target.value});
placeholder={intl.formatMessage({ }}
id: 'payment_form.country', state={formState.state}
defaultMessage: 'Country', changeState={(state: string) => {
})} setFormState({...formState, state});
name={'billing_dropdown'} }}
postalCode={formState.postalCode}
changePostalCode={(e) => {
setFormState({...formState, postalCode: e.target.value});
}}
/> />
<div className='form-row'> <ChooseDifferentShipping
<Input shippingIsSame={formState.shippingSame}
name='address' setShippingIsSame={(val: boolean) => {
type='text' setFormState({...formState, shippingSame: val});
value={formState.address} }}
onChange={(e: React.ChangeEvent<HTMLInputElement>) => { />
setFormState({...formState, address: e.target.value}); {!formState.shippingSame && (
}} <>
placeholder={intl.formatMessage({ <div className='section-title'>
id: 'payment_form.address', <FormattedMessage
defaultMessage: 'Address', id='payment_form.shipping_address'
})} defaultMessage='Shipping Address'
required={true} />
/> </div>
</div> <Address
<div className='form-row'> type='shipping'
<Input country={formState.shippingCountry}
name='address2' changeCountry={(option) => {
type='text' setFormState({...formState, shippingCountry: option.value});
value={formState.address2} }}
onChange={(e: React.ChangeEvent<HTMLInputElement>) => { address={formState.shippingAddress}
setFormState({...formState, address2: e.target.value}); changeAddress={(e) => {
}} setFormState({...formState, shippingAddress: e.target.value});
placeholder={intl.formatMessage({ }}
id: 'payment_form.address_2', address2={formState.shippingAddress2}
defaultMessage: 'Address 2', changeAddress2={(e) => {
})} setFormState({...formState, shippingAddress2: e.target.value});
/> }}
</div> city={formState.shippingCity}
<div className='form-row'> changeCity={(e) => {
<Input setFormState({...formState, shippingCity: e.target.value});
name='city' }}
type='text' state={formState.shippingState}
value={formState.city} changeState={(state: string) => {
onChange={(e: React.ChangeEvent<HTMLInputElement>) => { setFormState({...formState, shippingState: state});
setFormState({...formState, city: e.target.value}); }}
}} postalCode={formState.shippingPostalCode}
placeholder={intl.formatMessage({ changePostalCode={(e) => {
id: 'payment_form.city', setFormState({...formState, shippingPostalCode: e.target.value});
defaultMessage: 'City',
})}
required={true}
/>
</div>
<div className='form-row'>
<div className='form-row-third-1'>
<StateSelector
testId='selfHostedExpansionStateSelector'
country={formState.country}
state={formState.state}
onChange={(state: string) => {
setFormState({...formState, state});
}} }}
/> />
</div> </>
<div className='form-row-third-2'> )}
<Input <Terms
name='postalCode' agreed={formState.agreedTerms}
type='text' setAgreed={(data: boolean) => {
value={formState.postalCode} setFormState({...formState, agreedTerms: data});
onChange={(e: React.ChangeEvent<HTMLInputElement>) => { }}
setFormState({...formState, postalCode: e.target.value}); />
}}
placeholder={intl.formatMessage({
id: 'payment_form.zipcode',
defaultMessage: 'Zip/Postal Code',
})}
required={true}
/>
</div>
</div>
</div> </div>
</div> </div>
<div className='rhs'> <div className='rhs'>

5
webapp/channels/src/components/self_hosted_expansion_modal/self_hosted_expansion_modal.scss
Просмотреть файл

@@ -3,7 +3,7 @@
.form-view { .form-view {
display: flex; display: flex;
overflow: hidden; overflow-x: hidden;
width: 100%; width: 100%;
height: 100%; height: 100%;
flex-direction: row; flex-direction: row;
@@ -144,6 +144,9 @@
} }
input[type=checkbox] { input[type=checkbox] {
width: 17px;
height: 17px;
flex-shrink: 0;
margin-right: 12px; margin-right: 12px;
} }