68 lines
1.7 KiB
TypeScript
68 lines
1.7 KiB
TypeScript
import type { FC } from '../../lib/teact/teact';
|
|
import React, {
|
|
memo, useCallback, useEffect,
|
|
useMemo,
|
|
} from '../../lib/teact/teact';
|
|
|
|
import type { FormEditDispatch, FormState } from '../../hooks/reducers/usePaymentReducer';
|
|
import type { ShippingOption } from '../../types';
|
|
|
|
import { formatCurrency } from '../../util/formatCurrency';
|
|
|
|
import useLang from '../../hooks/useLang';
|
|
import useOldLang from '../../hooks/useOldLang';
|
|
|
|
import RadioGroup from '../ui/RadioGroup';
|
|
|
|
import './Shipping.scss';
|
|
|
|
export type OwnProps = {
|
|
state: FormState;
|
|
shippingOptions: ShippingOption[];
|
|
currency: string;
|
|
dispatch: FormEditDispatch;
|
|
};
|
|
|
|
const Shipping: FC<OwnProps> = ({
|
|
state,
|
|
shippingOptions,
|
|
currency,
|
|
dispatch,
|
|
}) => {
|
|
const oldLang = useOldLang();
|
|
const lang = useLang();
|
|
|
|
useEffect(() => {
|
|
if (!shippingOptions || !shippingOptions.length || state.shipping) {
|
|
return;
|
|
}
|
|
dispatch({ type: 'changeShipping', payload: shippingOptions[0].id });
|
|
}, [shippingOptions, state.shipping, dispatch]);
|
|
|
|
const handleShippingSelect = useCallback((value) => {
|
|
dispatch({ type: 'changeShipping', payload: value });
|
|
}, [dispatch]);
|
|
|
|
const options = useMemo(() => (shippingOptions.map(({ id: value, title: label, amount }) => ({
|
|
label,
|
|
subLabel: formatCurrency(lang, amount, currency),
|
|
value,
|
|
}))), [shippingOptions, currency, lang]);
|
|
|
|
return (
|
|
<div className="Shipping">
|
|
<form>
|
|
<p>{oldLang('PaymentShippingMethod')}</p>
|
|
<RadioGroup
|
|
name="shipping-options"
|
|
options={options}
|
|
onChange={handleShippingSelect}
|
|
selected={state.shipping}
|
|
/>
|
|
</form>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default memo(Shipping);
|