<commit_before>import React, { useState, useRef } from 'react';
import PropTypes from 'prop-types';
import {
    FormModal,
    Alert,
    Loader,
    Button,
    ResetButton,
    useNotifications,
    useApi,
    useConfig,
    PrimaryButton
} from 'react-components';
import { c } from 'ttag';
import errorSvg from 'design-system/assets/img/pm-images/error.svg';

import { toParams, process } from './paymentTokenHelper';
import PaymentVerificationImage from './PaymentVerificationImage';

const STEPS = {
    REDIRECT: 'redirect',
    REDIRECTING: 'redirecting',
    REDIRECTED: 'redirected',
    FAIL: 'fail'
};

const PROCESSING_DELAY = 5000;

const PaymentVerificationModal = ({ params, token, approvalURL, onSubmit, payment = {}, ...rest }) => {
    const TITLES = {
        [STEPS.REDIRECT]: c('Title').t`Card verification`,
        [STEPS.REDIRECTING]: c('Title').t`Processing...`,
        [STEPS.REDIRECTED]: c('Title').t`Payment verification in progress`,
        [STEPS.FAILS]: c('Title').t`3-D secure payment verification failed`
    };
    const [step, setStep] = useState(STEPS.REDIRECT);
    const [error, setError] = useState({});
    const api = useApi();
    const { createNotification } = useNotifications();
    const { SECURE_URL: secureURL } = useConfig();
    const abortRef = useRef();
    const notCharged = <b key="not-charged">{c('Info').t`You will not be charged`}</b>;

    const handleCancel = () => {
        abortRef.current && abortRef.current.abort();
        rest.onClose();
    };

    const handleSubmit = async () => {
        let timeoutID;
        try {
            setStep(STEPS.REDIRECTING);
            timeoutID = setTimeout(() => {
                setStep(STEPS.REDIRECTED);
            }, PROCESSING_DELAY);
            abortRef.current = new AbortController();
            await process({ Token: token, api, approvalURL, secureURL, signal: abortRef.current.signal });
            onSubmit(toParams(params, token));
            rest.onClose();
        } catch (error) {
            clearTimeout(timeoutID);
            rest.onClose();
            setStep(STEPS.FAIL);
            // if not coming from API error
            if (error.message && !error.config) {
                setError(error);
                createNotification({ text: error.message, type: 'error' });
            }
        }
    };

    return (
        <FormModal
            title={TITLES[step]}
            onSubmit={handleSubmit}
            onClose={handleCancel}
            small={true}
            hasClose={false}
            footer={
                step === STEPS.REDIRECT ? (
                    <>
                        <ResetButton>{c('Action').t`Cancel`}</ResetButton>
                        <PrimaryButton type="submit">{c('Action').t`Verify payment`}</PrimaryButton>
                    </>
                ) : null
            }<commit_msg>Hotfix - wording for action<commit_after>import React, { useState, useRef } from 'react';
import PropTypes from 'prop-types';
import {
    FormModal,
    Alert,
    Loader,
    Button,
    ResetButton,
    useNotifications,
    useApi,
    useConfig,
    PrimaryButton
} from 'react-components';
import { c } from 'ttag';
import errorSvg from 'design-system/assets/img/pm-images/error.svg';

import { toParams, process } from './paymentTokenHelper';
import PaymentVerificationImage from './PaymentVerificationImage';

const STEPS = {
    REDIRECT: 'redirect',
    REDIRECTING: 'redirecting',
    REDIRECTED: 'redirected',
    FAIL: 'fail'
};

const PROCESSING_DELAY = 5000;

const PaymentVerificationModal = ({ params, token, approvalURL, onSubmit, payment = {}, ...rest }) => {
    const TITLES = {
        [STEPS.REDIRECT]: c('Title').t`Card verification`,
        [STEPS.REDIRECTING]: c('Title').t`Processing...`,
        [STEPS.REDIRECTED]: c('Title').t`Payment verification in progress`,
        [STEPS.FAILS]: c('Title').t`3-D secure payment verification failed`
    };
    const [step, setStep] = useState(STEPS.REDIRECT);
    const [error, setError] = useState({});
    const api = useApi();
    const { createNotification } = useNotifications();
    const { SECURE_URL: secureURL } = useConfig();
    const abortRef = useRef();
    const notCharged = <b key="not-charged">{c('Info').t`You will not be charged`}</b>;

    const handleCancel = () => {
        abortRef.current && abortRef.current.abort();
        rest.onClose();
    };

    const handleSubmit = async () => {
        let timeoutID;
        try {
            setStep(STEPS.REDIRECTING);
            timeoutID = setTimeout(() => {
                setStep(STEPS.REDIRECTED);
            }, PROCESSING_DELAY);
            abortRef.current = new AbortController();
            await process({ Token: token, api, approvalURL, secureURL, signal: abortRef.current.signal });
            onSubmit(toParams(params, token));
            rest.onClose();
        } catch (error) {
            clearTimeout(timeoutID);
            rest.onClose();
            setStep(STEPS.FAIL);
            // if not coming from API error
            if (error.message && !error.config) {
                setError(error);
                createNotification({ text: error.message, type: 'error' });
            }
        }
    };

    return (
        <FormModal
            title={TITLES[step]}
            onSubmit={handleSubmit}
            onClose={handleCancel}
            small={true}
            hasClose={false}
            footer={
                step === STEPS.REDIRECT ? (
                    <>
                        <ResetButton>{c('Action').t`Cancel`}</ResetButton>
                        <PrimaryButton type="submit">{c('Action').t`Verify`}</PrimaryButton>
                    </>
                ) : null
            }
{'fraction_non_alphanumeric': 0.1365845192641444, 'fraction_numerical': 0.0017355085039916696, 'mean_word_length': 2.1717116125481564, 'pattern_counts': {'":': 0, '<': 21, '<?xml version=': 0, '>': 27, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '4940447', 'n_tokens_mistral': 1654, 'n_tokens_neox': 1619, 'n_words': 348}