mirror of
https://github.com/gristlabs/grist-core.git
synced 2024-10-27 20:44:07 +00:00
d7802bc7db
Summary: - When displaying, include the country code, and don't assume state is always present. - When entering, include a country selector (defaulting to US), and make state/zip optional when non-US. - Bring in an npm module with country codes. Test Plan: Added a browser test case. Reviewers: paulfitz Reviewed By: paulfitz Differential Revision: https://phab.getgrist.com/D2647
507 lines
18 KiB
TypeScript
507 lines
18 KiB
TypeScript
import {get as getBrowserGlobals} from 'app/client/lib/browserGlobals';
|
||
import {reportError} from 'app/client/models/AppModel';
|
||
import * as css from 'app/client/ui/BillingPageCss';
|
||
import {colors, vars} from 'app/client/ui2018/cssVars';
|
||
import {IOption, select} from 'app/client/ui2018/menus';
|
||
import {IBillingAddress, IBillingCard, IBillingOrgSettings} from 'app/common/BillingAPI';
|
||
import {checkSubdomainValidity} from 'app/common/orgNameUtils';
|
||
import * as roles from 'app/common/roles';
|
||
import {Organization} from 'app/common/UserAPI';
|
||
import {Computed, Disposable, dom, DomArg, IDisposableOwnerT, makeTestId, Observable, styled} from 'grainjs';
|
||
import sortBy = require('lodash/sortBy');
|
||
|
||
const G = getBrowserGlobals('Stripe', 'window');
|
||
const testId = makeTestId('test-bp-');
|
||
const states = [
|
||
'AK', 'AL', 'AR', 'AS', 'AZ', 'CA', 'CO', 'CT', 'DC', 'DE', 'FL', 'FM', 'GA', 'GU', 'HI',
|
||
'IA', 'ID', 'IL', 'IN', 'KS', 'KY', 'LA', 'MA', 'MD', 'ME', 'MH', 'MI', 'MN', 'MO', 'MP',
|
||
'MS', 'MT', 'NC', 'ND', 'NE', 'NH', 'NJ', 'NM', 'NV', 'NY', 'OH', 'OK', 'OR', 'PA', 'PR',
|
||
'PW', 'RI', 'SC', 'SD', 'TN', 'TX', 'UT', 'VA', 'VI', 'VT', 'WA', 'WI', 'WV', 'WY'
|
||
];
|
||
|
||
export interface IFormData {
|
||
address?: IBillingAddress;
|
||
card?: IBillingCard;
|
||
token?: string;
|
||
settings?: IBillingOrgSettings;
|
||
}
|
||
|
||
|
||
// Optional autofill vales to pass in to the BillingForm constructor.
|
||
interface IAutofill {
|
||
address?: Partial<IBillingAddress>;
|
||
settings?: Partial<IBillingOrgSettings>;
|
||
// Note that the card name is the only value that may be initialized, since the other card
|
||
// information is sensitive.
|
||
card?: Partial<IBillingCard>;
|
||
}
|
||
|
||
// An object containing a function to check the validity of its observable value.
|
||
// The get function should return the observable value or throw an error if it is invalid.
|
||
interface IValidated<T> {
|
||
value: Observable<T>;
|
||
checkValidity: (value: T) => void|Promise<void>; // Should throw with message on invalid values.
|
||
isInvalid: Observable<boolean>;
|
||
get: () => T|Promise<T>;
|
||
}
|
||
|
||
export class BillingForm extends Disposable {
|
||
private readonly _address: BillingAddressForm|null;
|
||
private readonly _payment: BillingPaymentForm|null;
|
||
private readonly _settings: BillingSettingsForm|null;
|
||
|
||
constructor(
|
||
org: Organization|null,
|
||
isDomainAvailable: (domain: string) => Promise<boolean>,
|
||
options: {payment: boolean, address: boolean, settings: boolean, domain: boolean},
|
||
autofill: IAutofill = {}
|
||
) {
|
||
super();
|
||
|
||
// Get the number of forms - if more than one is present subheaders should be visible.
|
||
const count = [options.settings, options.address, options.payment]
|
||
.reduce((acc, x) => acc + (x ? 1 : 0), 0);
|
||
|
||
// Org settings form.
|
||
this._settings = options.settings ? new BillingSettingsForm(org, isDomainAvailable, {
|
||
showHeader: count > 1,
|
||
showDomain: options.domain,
|
||
autofill: autofill.settings
|
||
}) : null;
|
||
|
||
// Address form.
|
||
this._address = options.address ? new BillingAddressForm({
|
||
showHeader: count > 1,
|
||
autofill: autofill.address
|
||
}) : null;
|
||
|
||
// Payment form.
|
||
this._payment = options.payment ? new BillingPaymentForm({
|
||
showHeader: count > 1,
|
||
autofill: autofill.card
|
||
}) : null;
|
||
}
|
||
|
||
public buildDom() {
|
||
return [
|
||
this._settings ? this._settings.buildDom() : null,
|
||
this._address ? this._address.buildDom() : null,
|
||
this._payment ? this._payment.buildDom() : null
|
||
];
|
||
}
|
||
|
||
// Note that this will throw if any values are invalid.
|
||
public async getFormData(): Promise<IFormData> {
|
||
const settings = this._settings ? await this._settings.getSettings() : undefined;
|
||
const address = this._address ? await this._address.getAddress() : undefined;
|
||
const cardInfo = this._payment ? await this._payment.getCardAndToken() : undefined;
|
||
return {
|
||
settings,
|
||
address,
|
||
token: cardInfo ? cardInfo.token : undefined,
|
||
card: cardInfo ? cardInfo.card : undefined
|
||
};
|
||
}
|
||
}
|
||
|
||
// Abstract class which includes helper functions for creating a form whose values are verified.
|
||
abstract class BillingSubForm extends Disposable {
|
||
protected readonly formError: Observable<string> = Observable.create(this, '');
|
||
|
||
constructor() {
|
||
super();
|
||
}
|
||
|
||
// Creates an input whose value is validated on blur. Input text turns red and the validation
|
||
// error is shown on negative validation.
|
||
protected billingInput(validated: IValidated<string>, ...args: Array<DomArg<any>>) {
|
||
return css.billingInput(validated.value, {onInput: true},
|
||
css.billingInput.cls('-invalid', validated.isInvalid),
|
||
dom.on('blur', () => this._onBlur(validated)),
|
||
...args
|
||
);
|
||
}
|
||
|
||
protected async _onBlur(validated: IValidated<string>): Promise<void> {
|
||
// Do not show empty input errors on blur.
|
||
if (validated.value.get().length === 0) { return; }
|
||
try {
|
||
await validated.get();
|
||
this.formError.set('');
|
||
} catch (e) {
|
||
this.formError.set(e.message);
|
||
}
|
||
}
|
||
}
|
||
|
||
/**
|
||
* Creates the payment card entry form using Stripe Elements.
|
||
*/
|
||
class BillingPaymentForm extends BillingSubForm {
|
||
private readonly _stripe: any;
|
||
private readonly _elements: any;
|
||
|
||
// Stripe Element fields. Set when the elements are mounted to the dom.
|
||
private readonly _numberElement: Observable<any> = Observable.create(this, null);
|
||
private readonly _expiryElement: Observable<any> = Observable.create(this, null);
|
||
private readonly _cvcElement: Observable<any> = Observable.create(this, null);
|
||
private readonly _name: IValidated<string> = createValidated(this, checkRequired('Name'));
|
||
|
||
constructor(private readonly _options: {
|
||
showHeader: boolean;
|
||
autofill?: Partial<IBillingCard>;
|
||
}) {
|
||
super();
|
||
const autofill = this._options.autofill;
|
||
const stripeAPIKey = (G.window as any).gristConfig.stripeAPIKey;
|
||
try {
|
||
this._stripe = G.Stripe(stripeAPIKey);
|
||
this._elements = this._stripe.elements();
|
||
} catch (err) {
|
||
reportError(err);
|
||
}
|
||
if (autofill) {
|
||
this._name.value.set(autofill.name || '');
|
||
}
|
||
}
|
||
|
||
public buildDom() {
|
||
return this._stripe ? css.paymentBlock(
|
||
this._options.showHeader ? css.paymentSubHeader('Payment Method') : null,
|
||
css.paymentRow(
|
||
css.paymentField(
|
||
css.paymentLabel('Cardholder Name'),
|
||
this.billingInput(this._name, testId('card-name')),
|
||
)
|
||
),
|
||
css.paymentRow(
|
||
css.paymentField(
|
||
css.paymentLabel({for: 'number-element'}, 'Card Number'),
|
||
css.stripeInput({id: 'number-element'}), // A Stripe Element will be inserted here.
|
||
testId('card-number')
|
||
)
|
||
),
|
||
css.paymentRow(
|
||
css.paymentField(
|
||
css.paymentLabel({for: 'expiry-element'}, 'Expiry Date'),
|
||
css.stripeInput({id: 'expiry-element'}), // A Stripe Element will be inserted here.
|
||
testId('card-expiry')
|
||
),
|
||
css.paymentSpacer(),
|
||
css.paymentField(
|
||
css.paymentLabel({for: 'cvc-element'}, 'CVC / CVV Code'),
|
||
css.stripeInput({id: 'cvc-element'}), // A Stripe Element will be inserted here.
|
||
testId('card-cvc')
|
||
)
|
||
),
|
||
css.inputError(
|
||
dom.text(this.formError),
|
||
testId('payment-form-error')
|
||
),
|
||
() => { setTimeout(() => this._mountStripeUI(), 0); }
|
||
) : null;
|
||
}
|
||
|
||
public async getCardAndToken(): Promise<{card: IBillingCard, token: string}> {
|
||
// Note that we call createToken using only the card number element as the first argument
|
||
// in accordance with the Stripe API:
|
||
//
|
||
// "If applicable, the Element pulls data from other Elements you’ve created on the same
|
||
// instance of elements to tokenize—you only need to supply one element as the parameter."
|
||
//
|
||
// Source: https://stripe.com/docs/stripe-js/reference#stripe-create-token
|
||
try {
|
||
const result = await this._stripe.createToken(this._numberElement.get(), {name: await this._name.get()});
|
||
if (result.error) { throw new Error(result.error.message); }
|
||
return {
|
||
card: result.token.card,
|
||
token: result.token.id
|
||
};
|
||
} catch (e) {
|
||
this.formError.set(e.message);
|
||
throw e;
|
||
}
|
||
}
|
||
|
||
private _mountStripeUI() {
|
||
// Mount Stripe Element fields.
|
||
this._mountStripeElement(this._numberElement, 'cardNumber', 'number-element');
|
||
this._mountStripeElement(this._expiryElement, 'cardExpiry', 'expiry-element');
|
||
this._mountStripeElement(this._cvcElement, 'cardCvc', 'cvc-element');
|
||
}
|
||
|
||
private _mountStripeElement(elemObs: Observable<any>, stripeName: string, elementId: string): void {
|
||
// For details on applying custom styles to Stripe Elements, see:
|
||
// https://stripe.com/docs/stripe-js/reference#element-options
|
||
const classes = {base: css.stripeInput.className};
|
||
const style = {
|
||
base: {
|
||
'::placeholder': {
|
||
color: colors.slate.value
|
||
},
|
||
'fontSize': vars.mediumFontSize.value,
|
||
'fontFamily': vars.fontFamily.value
|
||
}
|
||
};
|
||
if (!elemObs.get()) {
|
||
const stripeInst = this._elements.create(stripeName, {classes, style});
|
||
stripeInst.addEventListener('change', (event: any) => {
|
||
if (event.error) { this.formError.set(event.error.message); }
|
||
});
|
||
elemObs.set(stripeInst);
|
||
}
|
||
elemObs.get().mount(`#${elementId}`);
|
||
}
|
||
}
|
||
|
||
/**
|
||
* Creates the company address entry form. Used by BillingPaymentForm when billing address is needed.
|
||
*/
|
||
class BillingAddressForm extends BillingSubForm {
|
||
private readonly _address1: IValidated<string> = createValidated(this, checkRequired('Address'));
|
||
private readonly _address2: IValidated<string> = createValidated(this, () => undefined);
|
||
private readonly _city: IValidated<string> = createValidated(this, checkRequired('City'));
|
||
private readonly _state: IValidated<string> = createValidated(this, checkFunc(
|
||
(val) => !this._isUS.get() || Boolean(val), `State is required.`));
|
||
private readonly _postal: IValidated<string> = createValidated(this, checkFunc(
|
||
(val) => !this._isUS.get() || Boolean(val), 'Zip code is required.'));
|
||
private readonly _countryCode: IValidated<string> = createValidated(this, checkRequired('Country'));
|
||
|
||
private _isUS = Computed.create(this, this._countryCode.value, (use, code) => (code === 'US'));
|
||
|
||
private readonly _countries: Array<IOption<string>> = getCountries();
|
||
|
||
constructor(private readonly _options: {
|
||
showHeader: boolean;
|
||
autofill?: Partial<IBillingAddress>;
|
||
}) {
|
||
super();
|
||
const autofill = this._options.autofill;
|
||
if (autofill) {
|
||
this._address1.value.set(autofill.line1 || '');
|
||
this._address2.value.set(autofill.line2 || '');
|
||
this._city.value.set(autofill.city || '');
|
||
this._state.value.set(autofill.state || '');
|
||
this._postal.value.set(autofill.postal_code || '');
|
||
}
|
||
this._countryCode.value.set(autofill?.country || 'US');
|
||
}
|
||
|
||
public buildDom() {
|
||
return css.paymentBlock(
|
||
this._options.showHeader ? css.paymentSubHeader('Company Address') : null,
|
||
css.paymentRow(
|
||
css.paymentField(
|
||
css.paymentLabel('Street Address'),
|
||
this.billingInput(this._address1, testId('address-street'))
|
||
)
|
||
),
|
||
css.paymentRow(
|
||
css.paymentField(
|
||
css.paymentLabel('Suite / Unit'),
|
||
this.billingInput(this._address2, testId('address-suite'))
|
||
)
|
||
),
|
||
css.paymentRow(
|
||
css.paymentField(
|
||
css.paymentLabel('City'),
|
||
this.billingInput(this._city, testId('address-city'))
|
||
),
|
||
css.paymentSpacer(),
|
||
css.paymentField({style: 'flex: 0.5 1 0;'},
|
||
dom.domComputed(this._isUS, (isUs) =>
|
||
isUs ? [
|
||
css.paymentLabel('State'),
|
||
cssSelect(this._state.value, states),
|
||
] : [
|
||
css.paymentLabel('State / Region'),
|
||
this.billingInput(this._state),
|
||
]
|
||
),
|
||
testId('address-state')
|
||
)
|
||
),
|
||
css.paymentRow(
|
||
css.paymentField(
|
||
css.paymentLabel(dom.text((use) => use(this._isUS) ? 'Zip Code' : 'Postal Code')),
|
||
this.billingInput(this._postal, testId('address-zip'))
|
||
)
|
||
),
|
||
css.paymentRow(
|
||
css.paymentField(
|
||
css.paymentLabel('Country'),
|
||
cssSelect(this._countryCode.value, this._countries),
|
||
testId('address-country')
|
||
)
|
||
),
|
||
css.inputError(
|
||
dom.text(this.formError),
|
||
testId('address-form-error')
|
||
)
|
||
);
|
||
}
|
||
|
||
// Throws if any value is invalid. Returns a customer address as accepted by the customer
|
||
// object in stripe.
|
||
// For reference: https://stripe.com/docs/api/customers/object#customer_object-address
|
||
public async getAddress(): Promise<IBillingAddress|undefined> {
|
||
try {
|
||
return {
|
||
line1: await this._address1.get(),
|
||
line2: await this._address2.get(),
|
||
city: await this._city.get(),
|
||
state: await this._state.get(),
|
||
postal_code: await this._postal.get(),
|
||
country: await this._countryCode.get(),
|
||
};
|
||
} catch (e) {
|
||
this.formError.set(e.message);
|
||
throw e;
|
||
}
|
||
}
|
||
}
|
||
|
||
/**
|
||
* Creates the billing settings form, including the org name and the org subdomain values.
|
||
*/
|
||
class BillingSettingsForm extends BillingSubForm {
|
||
private readonly _name: IValidated<string> = createValidated(this, checkRequired('Company name'));
|
||
// Only verify the domain if it is shown.
|
||
private readonly _domain: IValidated<string> = createValidated(this,
|
||
this._options.showDomain ? d => this._verifyDomain(d) : () => undefined);
|
||
|
||
constructor(
|
||
private readonly _org: Organization|null,
|
||
private readonly _isDomainAvailable: (domain: string) => Promise<boolean>,
|
||
private readonly _options: {
|
||
showHeader: boolean;
|
||
showDomain: boolean;
|
||
autofill?: Partial<IBillingOrgSettings>;
|
||
}
|
||
) {
|
||
super();
|
||
const autofill = this._options.autofill;
|
||
if (autofill) {
|
||
this._name.value.set(autofill.name || '');
|
||
this._domain.value.set(autofill.domain || '');
|
||
}
|
||
}
|
||
|
||
public buildDom() {
|
||
const noEditAccess = Boolean(this._org && !roles.canEdit(this._org.access));
|
||
return css.paymentBlock(
|
||
this._options.showHeader ? css.paymentSubHeader('Team Site') : null,
|
||
css.paymentRow(
|
||
css.paymentField(
|
||
css.paymentLabel('Company Name'),
|
||
this.billingInput(this._name,
|
||
dom.boolAttr('disabled', () => noEditAccess),
|
||
testId('settings-name')
|
||
),
|
||
noEditAccess ? css.paymentFieldInfo('Organization edit access is required',
|
||
testId('settings-name-info')
|
||
) : null
|
||
)
|
||
),
|
||
this._options.showDomain ? css.paymentRow(
|
||
css.paymentField(
|
||
css.paymentLabel('URL'),
|
||
this.billingInput(this._domain,
|
||
dom.boolAttr('disabled', () => noEditAccess),
|
||
testId('settings-domain')
|
||
),
|
||
// Note that we already do not allow editing the domain after it is initially set
|
||
// anyway, this is just here for consistency.
|
||
noEditAccess ? css.paymentFieldInfo('Organization edit access is required',
|
||
testId('settings-domain-info')
|
||
) : null
|
||
),
|
||
css.paymentField({style: 'flex: 0 1 0;'},
|
||
css.inputHintLabel('.getgrist.com')
|
||
)
|
||
) : null,
|
||
css.inputError(
|
||
dom.text(this.formError),
|
||
testId('settings-form-error')
|
||
)
|
||
);
|
||
}
|
||
|
||
// Throws if any value is invalid.
|
||
public async getSettings(): Promise<IBillingOrgSettings|undefined> {
|
||
try {
|
||
return {
|
||
name: await this._name.get(),
|
||
domain: await this._domain.get()
|
||
};
|
||
} catch (e) {
|
||
this.formError.set(e.message);
|
||
throw e;
|
||
}
|
||
}
|
||
|
||
// Throws if the entered domain contains any invalid characters or is already taken.
|
||
private async _verifyDomain(domain: string): Promise<void> {
|
||
checkSubdomainValidity(domain);
|
||
const isAvailable = await this._isDomainAvailable(domain);
|
||
if (!isAvailable) { throw new Error('Domain is already taken.'); }
|
||
}
|
||
}
|
||
|
||
function checkFunc(func: (val: string) => boolean, message: string) {
|
||
return (val: string) => {
|
||
if (!func(val)) { throw new Error(message); }
|
||
};
|
||
}
|
||
|
||
function checkRequired(propertyName: string) {
|
||
return checkFunc(Boolean, `${propertyName} is required.`);
|
||
}
|
||
|
||
// Creates a validated object, which includes an observable and a function to check
|
||
// if the current observable value is valid.
|
||
function createValidated(
|
||
owner: IDisposableOwnerT<any>,
|
||
checkValidity: (value: string) => void
|
||
): IValidated<string> {
|
||
const value = Observable.create(owner, '');
|
||
const isInvalid = Observable.create<boolean>(owner, false);
|
||
owner.autoDispose(value.addListener(() => { isInvalid.set(false); }));
|
||
return {
|
||
value,
|
||
isInvalid,
|
||
checkValidity,
|
||
get: async () => {
|
||
const _value = value.get();
|
||
try {
|
||
await checkValidity(_value);
|
||
} catch (e) {
|
||
isInvalid.set(true);
|
||
throw e;
|
||
}
|
||
isInvalid.set(false);
|
||
return _value;
|
||
}
|
||
};
|
||
}
|
||
|
||
function getCountries(): Array<IOption<string>> {
|
||
// Require just the one file because it has all the data we need and is substantially smaller
|
||
// than requiring the whole module.
|
||
const countryNames = require("i18n-iso-countries/langs/en.json").countries;
|
||
const codes = Object.keys(countryNames);
|
||
const entries = codes.map(code => {
|
||
// The module provides names that are either a string or an array of names. If an array, pick
|
||
// the first one.
|
||
const names = countryNames[code];
|
||
return {value: code, label: Array.isArray(names) ? names[0] : names};
|
||
});
|
||
return sortBy(entries, 'label');
|
||
}
|
||
|
||
const cssSelect = styled(select, `
|
||
height: 42px;
|
||
padding-left: 13px;
|
||
align-items: center;
|
||
`);
|