From acb4c57ee10e34e28de54dbf218d37b8ac3d2c7c Mon Sep 17 00:00:00 2001 From: Conor Macpherson Date: Mon, 27 Mar 2023 11:49:23 -0400 Subject: [PATCH] Add shiping address and add back terms. --- .../self_hosted_expansion_modal/index.tsx | 262 ++++++++++-------- .../self_hosted_expansion_modal.scss | 5 +- 2 files changed, 149 insertions(+), 118 deletions(-) diff --git a/webapp/channels/src/components/self_hosted_expansion_modal/index.tsx b/webapp/channels/src/components/self_hosted_expansion_modal/index.tsx index 06eda5dafb..1a2320db7c 100644 --- a/webapp/channels/src/components/self_hosted_expansion_modal/index.tsx +++ b/webapp/channels/src/components/self_hosted_expansion_modal/index.tsx @@ -3,7 +3,7 @@ import React, {useEffect, useRef, useState} from 'react'; -import {useIntl} from 'react-intl'; +import {FormattedMessage, useIntl} from 'react-intl'; import {useDispatch, useSelector} from 'react-redux'; @@ -47,18 +47,34 @@ import SelfHostedExpansionCard from './expansion_card'; import './self_hosted_expansion_modal.scss'; 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 { + cardName: string; + cardFilled: boolean; + address: string; address2: string; city: string; state: string; country: string; postalCode: string; - cardName: string; organization: string; - cardFilled: boolean; + seats: number; + + shippingSame: boolean; + shippingAddress: string; + shippingAddress2: string; + shippingCity: string; + shippingState: string; + shippingCountry: string; + shippingPostalCode: string; + + agreedTerms: boolean; + submitting: boolean; succeeded: boolean; progressBar: number; @@ -67,16 +83,24 @@ export interface FormState { export function makeInitialState(seats: number): FormState { return { + cardName: '', + cardFilled: false, address: '', address2: '', city: '', state: '', country: '', postalCode: '', - cardName: '', organization: '', - cardFilled: false, + shippingSame: true, + shippingAddress: '', + shippingAddress2: '', + shippingCity: '', + shippingState: '', + shippingCountry: '', + shippingPostalCode: '', seats, + agreedTerms: false, submitting: false, succeeded: false, progressBar: 0, @@ -97,6 +121,18 @@ export function canSubmit(formState: FormState, progress: ValueOf 0; switch (progress) { - case SelfHostedSignupProgress.PAID: - case SelfHostedSignupProgress.CREATED_LICENSE: - case SelfHostedSignupProgress.CREATED_SUBSCRIPTION: - return true; - case SelfHostedSignupProgress.CONFIRMED_INTENT: { - return Boolean( - validAddress && - validSeats, - ); - } - case SelfHostedSignupProgress.START: - case SelfHostedSignupProgress.CREATED_CUSTOMER: - case SelfHostedSignupProgress.CREATED_INTENT: - return Boolean( - validCard && + case SelfHostedSignupProgress.PAID: + case SelfHostedSignupProgress.CREATED_LICENSE: + case SelfHostedSignupProgress.CREATED_SUBSCRIPTION: + return true; + case SelfHostedSignupProgress.CONFIRMED_INTENT: { + return Boolean( + validAddress && validShippingAddress && validSeats && agreedToTerms + ); + } + case SelfHostedSignupProgress.START: + case SelfHostedSignupProgress.CREATED_CUSTOMER: + case SelfHostedSignupProgress.CREATED_INTENT: + return Boolean( + validCard && validAddress && - validSeats, - ); - default: { - return false; - } + validShippingAddress && + validSeats && + agreedToTerms + ); + default: { + return false; + } } } @@ -173,6 +210,14 @@ export default function SelfHostedExpansionModal() { postal_code: formState.postalCode, 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, }); } catch { @@ -361,104 +406,87 @@ export default function SelfHostedExpansionModal() { /> - {intl.formatMessage({ - id: 'payment_form.billing_address', - defaultMessage: 'Billing address', - })} + - { +
{ setFormState({...formState, country: option.value}); }} - value={ - formState.country ? {value: formState.country, label: formState.country} : undefined - } - options={COUNTRIES.map((country) => ({ - value: country.name, - label: country.name, - }))} - legend={intl.formatMessage({ - id: 'payment_form.country', - defaultMessage: 'Country', - })} - placeholder={intl.formatMessage({ - id: 'payment_form.country', - defaultMessage: 'Country', - })} - name={'billing_dropdown'} + address={formState.address} + changeAddress={(e) => { + setFormState({...formState, address: e.target.value}); + }} + address2={formState.address2} + changeAddress2={(e) => { + setFormState({...formState, address2: e.target.value}); + }} + city={formState.city} + changeCity={(e) => { + setFormState({...formState, city: e.target.value}); + }} + state={formState.state} + changeState={(state: string) => { + setFormState({...formState, state}); + }} + postalCode={formState.postalCode} + changePostalCode={(e) => { + setFormState({...formState, postalCode: e.target.value}); + }} /> -
- ) => { - setFormState({...formState, address: e.target.value}); - }} - placeholder={intl.formatMessage({ - id: 'payment_form.address', - defaultMessage: 'Address', - })} - required={true} - /> -
-
- ) => { - setFormState({...formState, address2: e.target.value}); - }} - placeholder={intl.formatMessage({ - id: 'payment_form.address_2', - defaultMessage: 'Address 2', - })} - /> -
-
- ) => { - setFormState({...formState, city: e.target.value}); - }} - placeholder={intl.formatMessage({ - id: 'payment_form.city', - defaultMessage: 'City', - })} - required={true} - /> -
-
-
- { - setFormState({...formState, state}); + { + setFormState({...formState, shippingSame: val}); + }} + /> + {!formState.shippingSame && ( + <> +
+ +
+
{ + setFormState({...formState, shippingCountry: option.value}); + }} + address={formState.shippingAddress} + changeAddress={(e) => { + setFormState({...formState, shippingAddress: e.target.value}); + }} + address2={formState.shippingAddress2} + changeAddress2={(e) => { + setFormState({...formState, shippingAddress2: e.target.value}); + }} + city={formState.shippingCity} + changeCity={(e) => { + setFormState({...formState, shippingCity: e.target.value}); + }} + state={formState.shippingState} + changeState={(state: string) => { + setFormState({...formState, shippingState: state}); + }} + postalCode={formState.shippingPostalCode} + changePostalCode={(e) => { + setFormState({...formState, shippingPostalCode: e.target.value}); }} /> -
-
- ) => { - setFormState({...formState, postalCode: e.target.value}); - }} - placeholder={intl.formatMessage({ - id: 'payment_form.zipcode', - defaultMessage: 'Zip/Postal Code', - })} - required={true} - /> -
-
+ + )} + { + setFormState({...formState, agreedTerms: data}); + }} + />
diff --git a/webapp/channels/src/components/self_hosted_expansion_modal/self_hosted_expansion_modal.scss b/webapp/channels/src/components/self_hosted_expansion_modal/self_hosted_expansion_modal.scss index beb6c32e08..888532b85e 100644 --- a/webapp/channels/src/components/self_hosted_expansion_modal/self_hosted_expansion_modal.scss +++ b/webapp/channels/src/components/self_hosted_expansion_modal/self_hosted_expansion_modal.scss @@ -3,7 +3,7 @@ .form-view { display: flex; - overflow: hidden; + overflow-x: hidden; width: 100%; height: 100%; flex-direction: row; @@ -144,6 +144,9 @@ } input[type=checkbox] { + width: 17px; + height: 17px; + flex-shrink: 0; margin-right: 12px; }