This repository has been archived by the owner on Feb 23, 2024. It is now read-only.
/
index.js
121 lines (113 loc) · 3.21 KB
/
index.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
/**
* External dependencies
*/
import { __ } from '@wordpress/i18n';
import { useState, useEffect, useRef } from '@wordpress/element';
import { Button } from '@woocommerce/base-components/cart-checkout';
import { ValidatedTextInput } from '@woocommerce/base-components/text-input';
import Label from '@woocommerce/base-components/label';
import { ValidationInputError } from '@woocommerce/base-components/validation';
import LoadingMask from '@woocommerce/base-components/loading-mask';
import PropTypes from 'prop-types';
import { withInstanceId } from '@woocommerce/base-hocs/with-instance-id';
import { useValidationContext } from '@woocommerce/base-context';
import Panel from '@woocommerce/base-components/panel';
/**
* Internal dependencies
*/
import './style.scss';
const TotalsCouponCodeInput = ( {
instanceId,
isLoading = false,
initialOpen = false,
onSubmit = () => {},
} ) => {
const [ couponValue, setCouponValue ] = useState( '' );
const currentIsLoading = useRef( false );
const { getValidationError, getValidationErrorId } = useValidationContext();
const validationError = getValidationError( 'coupon' );
useEffect( () => {
if ( currentIsLoading.current !== isLoading ) {
if ( ! isLoading && couponValue && ! validationError ) {
setCouponValue( '' );
}
currentIsLoading.current = isLoading;
}
}, [ isLoading, couponValue, validationError ] );
const textInputId = `wc-block-coupon-code__input-${ instanceId }`;
return (
<Panel
className="wc-block-coupon-code"
hasBorder={ true }
initialOpen={ initialOpen }
title={
<Label
label={ __(
'Coupon Code?',
'woo-gutenberg-products-block'
) }
screenReaderLabel={ __(
'Introduce Coupon Code',
'woo-gutenberg-products-block'
) }
htmlFor={ textInputId }
/>
}
titleTag="h2"
>
<LoadingMask
screenReaderLabel={ __(
'Applying coupon…',
'woo-gutenberg-products-block'
) }
isLoading={ isLoading }
showSpinner={ false }
>
<div className="wc-block-coupon-code__content">
<form className="wc-block-coupon-code__form">
<ValidatedTextInput
id={ textInputId }
errorId="coupon"
className="wc-block-coupon-code__input"
label={ __(
'Enter code',
'woo-gutenberg-products-block'
) }
value={ couponValue }
ariaDescribedBy={ getValidationErrorId(
textInputId
) }
onChange={ ( newCouponValue ) => {
setCouponValue( newCouponValue );
} }
validateOnMount={ false }
focusOnMount={ true }
showError={ false }
/>
<Button
className="wc-block-coupon-code__button"
disabled={ isLoading || ! couponValue }
showSpinner={ isLoading }
onClick={ ( e ) => {
e.preventDefault();
onSubmit( couponValue );
} }
type="submit"
>
{ __( 'Apply', 'woo-gutenberg-products-block' ) }
</Button>
</form>
<ValidationInputError
propertyName="coupon"
elementId={ textInputId }
/>
</div>
</LoadingMask>
</Panel>
);
};
TotalsCouponCodeInput.propTypes = {
onSubmit: PropTypes.func,
isLoading: PropTypes.bool,
};
export default withInstanceId( TotalsCouponCodeInput );