94 lines
3.0 KiB
TypeScript
Executable File
94 lines
3.0 KiB
TypeScript
Executable File
import {UseFormReturn} from 'react-hook-form';
|
|
import {Form} from '../../ui/forms/form';
|
|
import {FormTextField} from '../../ui/forms/input-field/text-field/text-field';
|
|
import {FormSelect} from '../../ui/forms/select/select';
|
|
import {Trans} from '../../i18n/trans';
|
|
import {Item} from '../../ui/forms/listbox/item';
|
|
import {Subscription} from '../../billing/subscription';
|
|
import {FormDatePicker} from '../../ui/forms/input-field/date/date-picker/date-picker';
|
|
import {useProducts} from '../../billing/pricing-table/use-products';
|
|
import {FormattedPrice} from '../../i18n/formatted-price';
|
|
import {FormNormalizedModelField} from '../../ui/forms/normalized-model-field';
|
|
|
|
interface CrupdateSubscriptionForm {
|
|
onSubmit: (values: Partial<Subscription>) => void;
|
|
formId: string;
|
|
form: UseFormReturn<Partial<Subscription>>;
|
|
}
|
|
export function CrupdateSubscriptionForm({
|
|
form,
|
|
onSubmit,
|
|
formId,
|
|
}: CrupdateSubscriptionForm) {
|
|
const query = useProducts();
|
|
// @ts-ignore
|
|
const watchedProductId = form.watch('product_id');
|
|
const selectedProduct = query.data?.products.find(
|
|
p => p.id === watchedProductId,
|
|
);
|
|
|
|
return (
|
|
<Form id={formId} form={form} onSubmit={onSubmit}>
|
|
<FormNormalizedModelField
|
|
name="user_id"
|
|
className="mb-20"
|
|
endpoint="normalized-models/user"
|
|
label={<Trans message="User" />}
|
|
/>
|
|
<FormSelect
|
|
name="product_id"
|
|
selectionMode="single"
|
|
className="mb-20"
|
|
label={<Trans message="Plan" />}
|
|
>
|
|
{query.data?.products
|
|
.filter(p => !p.free)
|
|
.map(product => (
|
|
<Item key={product.id} value={product.id}>
|
|
<Trans message={product.name} />
|
|
</Item>
|
|
))}
|
|
</FormSelect>
|
|
{!selectedProduct?.free && (
|
|
<FormSelect
|
|
name="price_id"
|
|
selectionMode="single"
|
|
className="mb-20"
|
|
label={<Trans message="Price" />}
|
|
>
|
|
{selectedProduct?.prices.map(price => (
|
|
<Item key={price.id} value={price.id}>
|
|
<FormattedPrice price={price} />
|
|
</Item>
|
|
))}
|
|
</FormSelect>
|
|
)}
|
|
<FormTextField
|
|
inputElementType="textarea"
|
|
rows={3}
|
|
name="description"
|
|
label={<Trans message="Description" />}
|
|
className="mb-20"
|
|
/>
|
|
<FormDatePicker
|
|
className="mb-20"
|
|
name="renews_at"
|
|
granularity="day"
|
|
label={<Trans message="Renews at" />}
|
|
description={
|
|
<Trans message="This will only change local records. User will continue to be billed on their original cycle on the payment gateway." />
|
|
}
|
|
/>
|
|
<FormDatePicker
|
|
className="mb-20"
|
|
name="ends_at"
|
|
granularity="day"
|
|
label={<Trans message="Ends at" />}
|
|
description={
|
|
<Trans message="This will only change local records. User will continue to be billed on their original cycle on the payment gateway." />
|
|
}
|
|
/>
|
|
</Form>
|
|
);
|
|
}
|