JSFiddle - React, Tailwind, and code Playground

by Vladymyr Shevchuk

HTML

<div>
  Price: 499$
  <form id="payment">
    <label class="payment-method">
      <input checked name="payment-type" type="radio" value="unicrypt">  
      Unicrypt
    </label>
    <label class="payment-method">
      <input name="payment-type" type="radio" value="bitcoin">    
      Bitcoin
    </label>
    <div>
      <label class="payment-method">
        <input name="payment-type" type="radio" value="fatherOfWallets">    
        Father of Wallets
      </label>
      <div id="fofw" class="hide">
        <input id="code" type="text" placeholder="Father of Wallets code">
      </div>
    </div>

    <div>
      <input id="comment" type="text" placeholder="comment">
    </div>
    <div>
      <input type="submit" value="pay">
    </div>
    <div>
      <input type="reset">
    </div>
  </form>
</div>

CSS

.payment-method {
  display: block;
}

.hide {
  display: none;
}

JavaScript

const validateComment = () => comment.value === "111";
const validateCode = () => code.value === "222";

const showCommentPopup = isCommentValid => {
	const price = isCommentValid ? "0$" : "499$"
	confirm(`Confirm payment \nYour price is ${price}`);
}

const showFatherOfWalletPopup = isCodeValid => {
	const message = isCodeValid 
  	? 'Success: Your FofW code is valid, you will be redirected...'
    : 'Error: Your code is not valid!';
    
  alert(message);
}

payment.addEventListener('submit', event => {
	event.preventDefault();

	const active = Array.from(event.target.elements).find(item => {
    return item.type === "radio" && item.checked;
  });
  
  const isCommentValid = validateComment();
  
  state[active.value].pay(isCommentValid);
  
  // if comment existed
  	// if comment is valid - show popup with discount
    // else comment is not valid - pass throw general flow
    	// if "Father of Wallets" selected
      	// if "FofW" code is valid - redirec
        // else "FofW" code is not valid
  // else pass throw general flow
});

payment.addEventListener('reset', event => {
	console.error('reset', event);
  fofw.classList.add('hide');
});

payment.addEventListener('change', event => {
  if (event.target.type === "radio") {
    if (event.target.value === "fatherOfWallets") {
  		fofw.classList.remove('hide');
    } else {
  		fofw.classList.add('hide');
    }
  }
});

const state = {
  unicrypt: {
  	pay (isCommentValid) {
      showCommentPopup(isCommentValid);
    }
  },
  bitcoin: {
  	pay (isCommentValid) {
      showCommentPopup(isCommentValid);
    }
  },
  fatherOfWallets: {
  	pay (isCommentValid) {
			if (isCommentValid) {
	      return showCommentPopup(isCommentValid);      
      } 
      
      const isCodeValid = validateCode();
        
			showFatherOfWalletPopup(isCodeValid);
    }
  }
}