domain-watchdog/assets/components/tracking/ConnectorForm.tsx

import {Button, Checkbox, Form, FormInstance, Input, Select, Space, Typography} from "antd";
import React, {useState} from "react";
import {Connector, ConnectorProvider} from "../../utils/api/connectors";
import {t} from "ttag";
import {BankOutlined} from "@ant-design/icons";
import {regionNames} from "../../i18n";

const formItemLayoutWithOutLabel = {
    wrapperCol: {
        xs: {span: 24, offset: 0},
        sm: {span: 20, offset: 4},
    },
};

export function ConnectorForm({form, onCreate}: { form: FormInstance, onCreate: (values: Connector) => void }) {
    const [provider, setProvider] = useState<string>()

    const ovhFields = {
        appKey: t`Application key`,
        appSecret: t`Application secret`,
        consumerKey: t`Consumer key`
    }

    const ovhEndpointList = [
        {
            label: t`European Region`,
            value: 'ovh-eu'
        }
    ]

    const ovhSubsidiaryList = [{value: 'EU', label: t`Europa`}, ...[
        'CZ', 'DE', 'ES', 'FI', 'FR', 'GB', 'IE', 'IT', 'LT', 'MA', 'NL', 'PL', 'PT', 'SN', 'TN'
    ].map(c => ({value: c, label: regionNames.of(c) ?? c}))]

    const ovhPricingMode = [
        {value: 'create-default', label: t`The domain is free and at the standard price`},
        {
            value: 'create-premium',
            label: t`The domain is free but is a premium. Its price varies from one domain to another`
        }
    ]

    return <Form
        {...formItemLayoutWithOutLabel}
        form={form}
        layout="horizontal"
        labelCol={{span: 6}}
        wrapperCol={{span: 14}}
        onFinish={onCreate}
    >
        <Form.Item
            label={t`Provider`}
            name="provider"
            rules={[{required: true, message: t`Required`}]}
        >
            <Select
                placeholder={t`Please select a Provider`}
                suffixIcon={<BankOutlined/>}
                options={Object.keys(ConnectorProvider).map((c) => ({
                    value: ConnectorProvider[c as keyof typeof ConnectorProvider],
                    label: (
                        <>
                            <BankOutlined/>{" "} {c}
                        </>
                    ),
                }))}
                value={provider}
                onChange={setProvider}
            />
        </Form.Item>

        {
            provider === ConnectorProvider.OVH && <>
                <Typography.Link target='_blank'
                                 href="https://api.ovh.com/createToken/index.cgi?GET=/order/cart/*&POST=/order/cart&POST=/order/cart/*&DELETE=/order/cart/*">
                    {t`Retrieve a set of tokens from the provider's website`}
                </Typography.Link>
                {
                    Object.keys(ovhFields).map(fieldName => <Form.Item
                        label={ovhFields[fieldName as keyof typeof ovhFields]}
                        name={['authData', fieldName]}
                        rules={[{required: true, message: t`Required`}]}
                    >
                        <Input/>
                    </Form.Item>)
                }
                <Form.Item
                    label={t`OVH Endpoint`}
                    name={['authData', 'apiEndpoint']}
                    rules={[{required: true, message: t`Required`}]}
                >
                    <Select options={ovhEndpointList} optionFilterProp="label"/>
                </Form.Item>
                <Form.Item
                    label={t`OVH subsidiary`}
                    name={['authData', 'ovhSubsidiary']}
                    rules={[{required: true, message: t`Required`}]}
                >
                    <Select options={ovhSubsidiaryList} optionFilterProp="label"/>
                </Form.Item>

                <Form.Item
                    label={t`OVH pricing mode`}
                    name={['authData', 'pricingMode']}
                    rules={[{required: true, message: t`Required`}]}
                >
                    <Select options={ovhPricingMode} optionFilterProp="label"/>
                </Form.Item>
                <Form.Item
                    valuePropName="checked"
                    label={t`TOS`}
                    name={['authData', 'acceptConditions']}
                    rules={[{required: true, message: t`Required`}]}
                >
                    <Checkbox
                        required={true}>{t`I accept the terms of use of the OVH provider API and those of Domain Watchdog`}</Checkbox>
                </Form.Item>
                <Form.Item
                    valuePropName="checked"
                    label={t`Legal age`}
                    name={['authData', 'ownerLegalAge']}
                    rules={[{required: true, message: t`Required`}]}
                >
                    <Checkbox
                        required={true}>{t`I certify on my honor that I am of the minimum age required to consent to these conditions`}</Checkbox>
                </Form.Item>
                <Form.Item
                    valuePropName="checked"
                    label={t`Withdrawal period`}
                    name={['authData', 'waiveRetractationPeriod']}
                    rules={[{required: true, message: t`Required`}]}
                >
                    <Checkbox
                        required={true}>{t`I expressly waive my right of withdrawal concerning the purchase of domain names via the OVH API`}</Checkbox>
                </Form.Item>
            </>
        }


        <Form.Item style={{marginTop: 10}}>
            <Space>
                <Button type="primary" htmlType="submit">
                    {t`Create`}
                </Button>
                <Button type="default" htmlType="reset">
                    {t`Reset`}
                </Button>
            </Space>
        </Form.Item>
    </Form>
}