60 lines
2.8 KiB
TypeScript
60 lines
2.8 KiB
TypeScript
import React from "react";
|
|
import styles from "./styles.module.scss";
|
|
import { AddressFields as AddressFieldsType } from "@/hooks/payment/nmi/useAddressFields";
|
|
import { useTranslations } from "@/hooks/translations";
|
|
import { ELocalesPlacement } from "@/locales";
|
|
|
|
interface Props {
|
|
fields: AddressFieldsType;
|
|
errors: Partial<Record<keyof AddressFieldsType, string>>;
|
|
onChange: (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>) => void;
|
|
countryList: { code: string; name: string }[];
|
|
}
|
|
|
|
export default function AddressFields({ fields, errors, onChange, countryList }: Props) {
|
|
const { translate } = useTranslations(ELocalesPlacement.V1);
|
|
return (
|
|
<div className={styles.formGroup}>
|
|
<div className={styles.formRow}>
|
|
<label htmlFor="country">{translate("payment_modal.address_form.labels.country")}</label>
|
|
<select
|
|
id="country"
|
|
name="country"
|
|
className={`${styles.input} ${errors.country ? styles.invalid : ""}`}
|
|
value={fields.country}
|
|
onChange={onChange}
|
|
>
|
|
<option value="">{translate("payment_modal.address_form.placeholders.country")}</option>
|
|
{countryList.map(c => (
|
|
<option key={c.code} value={c.code}>{c.name}</option>
|
|
))}
|
|
</select>
|
|
{errors.country && <div className={styles.errorMessage}>{errors.country}</div>}
|
|
</div>
|
|
<div className={styles.formRow}>
|
|
<label htmlFor="address">{translate("payment_modal.address_form.labels.address")}</label>
|
|
<input
|
|
id="address"
|
|
name="address"
|
|
className={`${styles.input} ${errors.address ? styles.invalid : ""}`}
|
|
value={fields.address}
|
|
onChange={onChange}
|
|
placeholder={translate("payment_modal.address_form.placeholders.address")}
|
|
/>
|
|
{errors.address && <div className={styles.errorMessage}>{errors.address}</div>}
|
|
</div>
|
|
<div className={styles.formRow}>
|
|
<label htmlFor="zip">{translate("payment_modal.address_form.labels.zip")}</label>
|
|
<input
|
|
id="zip"
|
|
name="zip"
|
|
className={`${styles.input} ${errors.zip ? styles.invalid : ""}`}
|
|
value={fields.zip}
|
|
onChange={onChange}
|
|
placeholder={translate("payment_modal.address_form.placeholders.zip")}
|
|
/>
|
|
{errors.zip && <div className={styles.errorMessage}>{errors.zip}</div>}
|
|
</div>
|
|
</div>
|
|
);
|
|
} |