mirror of
https://github.com/gristlabs/grist-core.git
synced 2024-10-27 20:44:07 +00:00
60423edc17
Summary: - Reading plans from Stripe, and allowing Stripe to define custom plans. - Storing product features (aka limits) in Stripe, that override those in db. - Adding hierarchical data in Stripe. All features are defined at Product level but can be overwritten on Price levels. - New options for Support user to -- Override product for team site (if he is added as a billing manager) -- Override subscription and customer id for a team site -- Attach an "offer", an custom plan configured in stripe that a team site can use -- Enabling wire transfer for subscription by allowing subscription to be created without a payment method (which is customizable) Test Plan: Updated and new. Reviewers: georgegevoian Reviewed By: georgegevoian Differential Revision: https://phab.getgrist.com/D4201
84 lines
2.0 KiB
TypeScript
84 lines
2.0 KiB
TypeScript
import {theme} from 'app/client/ui2018/cssVars';
|
|
import {DomArg, keyframes, Observable, observable, styled} from 'grainjs';
|
|
|
|
const rotate360 = keyframes(`
|
|
from { transform: rotate(45deg); }
|
|
75% { transform: rotate(405deg); }
|
|
to { transform: rotate(405deg); }
|
|
`);
|
|
|
|
const flash = keyframes(`
|
|
0% {
|
|
background-color: ${theme.loaderFg};
|
|
}
|
|
50%, 100% {
|
|
background-color: ${theme.loaderBg};
|
|
}
|
|
`);
|
|
|
|
/**
|
|
* Creates a 32x32 pixel loading spinner. Use by calling `loadingSpinner()`.
|
|
*/
|
|
export const loadingSpinner = styled('div', `
|
|
display: inline-block;
|
|
box-sizing: border-box;
|
|
width: 32px;
|
|
height: 32px;
|
|
border-radius: 32px;
|
|
border: 4px solid ${theme.loaderBg};
|
|
border-top-color: ${theme.loaderFg};
|
|
animation: ${rotate360} 1s ease-out infinite;
|
|
`);
|
|
|
|
/**
|
|
* Creates a three-dots loading animation. Use by calling `loadingDots()`.
|
|
*/
|
|
export function loadingDots(...args: DomArg<HTMLDivElement>[]) {
|
|
return cssLoadingDotsContainer(
|
|
cssLoadingDot(cssLoadingDot.cls('-left')),
|
|
cssLoadingDot(cssLoadingDot.cls('-middle')),
|
|
cssLoadingDot(cssLoadingDot.cls('-right')),
|
|
...args,
|
|
);
|
|
}
|
|
|
|
export function watchPromise<T extends (...args: any[]) => any>(fun: T): T & {busy: Observable<boolean>} {
|
|
const loading = observable(false);
|
|
const result = async (...args: any) => {
|
|
loading.set(true);
|
|
try {
|
|
return await fun(...args);
|
|
} finally {
|
|
if (!loading.isDisposed()) {
|
|
loading.set(false);
|
|
}
|
|
}
|
|
};
|
|
return Object.assign(result, {busy: loading}) as any;
|
|
}
|
|
|
|
const cssLoadingDotsContainer = styled('div', `
|
|
--dot-size: 10px;
|
|
display: inline-flex;
|
|
column-gap: calc(var(--dot-size) / 2);
|
|
`);
|
|
|
|
const cssLoadingDot = styled('div', `
|
|
border-radius: 50%;
|
|
width: var(--dot-size);
|
|
height: var(--dot-size);
|
|
background-color: ${theme.loaderFg};
|
|
color: ${theme.loaderFg};
|
|
animation: ${flash} 1s alternate infinite;
|
|
|
|
&-left {
|
|
animation-delay: 0s;
|
|
}
|
|
&-middle {
|
|
animation-delay: 0.25s;
|
|
}
|
|
&-right {
|
|
animation-delay: 0.5s;
|
|
}
|
|
`);
|