import React, { useContext } from 'react'; import { useFormik } from 'formik'; import { useCartData, useTranslation } from './app-state'; import { addPromotion, removeCartItem } from './service'; import './Promotion.scss'; import { APIErrorContext } from "./APIErrorProvider"; interface FormValues { promoCode: string, } interface PromotionProps { promotionItems: any } export const Promotion: React.FC<PromotionProps> = (props) => { const { promotionItems } = props; const { t } = useTranslation(); const { updateCartItems } = useCartData(); const mcart = localStorage.getItem('mcart') || ''; const { addError } = useContext(APIErrorContext); const initialValues:FormValues = { promoCode: '', }; const {handleSubmit, handleChange, values, errors, setErrors} = useFormik({ initialValues, onSubmit: (values) => { addPromotion(mcart, values.promoCode) .then(() => { updateCartItems(); setErrors({promoCode: ''}); values.promoCode = '' }) .catch(error => { console.error(error); addError(error.errors); }) }, }); const handleRemove = () => { removeCartItem(mcart, promotionItems[0].id) .then(() => { updateCartItems(); }) .catch(error => { addError(error.errors); console.error(error); }) }; return ( <div className="promotion"> <p className="promotion__txt">{t('gift-card')}</p> {promotionItems && promotionItems.length > 0 ? ( <div className="promotion__wrapper"> <span className="promotion__code">{promotionItems[0].sku}</span> <button className="epbtn --secondary" onClick={handleRemove}>{t('remove')}</button> </div> ) : ( <form className="epform" onSubmit={handleSubmit}> <div className={`epform__group ${errors.promoCode ? '--error' : ''}`}> <input className="epform__input" id="promoCode" type="text" aria-label={t('promo-code')} onChange={handleChange} value={values.promoCode} /> <div className="epform__error"> {errors.promoCode ? errors.promoCode : null} </div> </div> <div className="epform__group --btn-container"> <button className="epbtn --ghost" type="submit" disabled={!values.promoCode}> {t('apply')} </button> </div> </form> )} </div> ) };