@commercelayer/react-components
Version:
The Official Commerce Layer React Components
2 lines • 1.79 kB
JavaScript
"use client";
import{jsx as _jsx}from"react/jsx-runtime";import{useContext,useEffect,useState}from"react";import PaymentMethodChildrenContext from"../../context/PaymentMethodChildrenContext";import Parent from"../utils/Parent";import PaymentMethodContext from"../../context/PaymentMethodContext";import OrderContext from"../../context/OrderContext";import useCustomContext from"../../utils/hooks/useCustomContext";import PlaceOrderContext from"../../context/PlaceOrderContext";export function PaymentMethodRadioButton(props){const{onChange,...p}=props,{payment,paymentSelected,setPaymentSelected,clickableContainer}=useCustomContext({context:PaymentMethodChildrenContext,contextComponentName:"PaymentMethod",currentComponentName:"PaymentMethodRadioButton",key:"payment"}),{order}=useContext(OrderContext),{setPaymentMethod,setLoading}=useContext(PaymentMethodContext),{status}=useContext(PlaceOrderContext),[disabled,setDisabled]=useState(!1),orderId=order?.id||"",paymentResource=payment?.payment_source_type,paymentMethodId=payment?.id??"",name=`payment-${orderId}`,checked=paymentSelected===payment?.id;useEffect(()=>{setDisabled(status==="placing")},[status]);const handleOnChange=async e=>{if(e.stopPropagation(),!checked){if(setPaymentSelected&&setPaymentSelected(paymentMethodId),setLoading({loading:!0}),!clickableContainer){const{order:order2}=await setPaymentMethod({paymentResource,paymentMethodId});onChange&&onChange({payment,order:order2})}setLoading({loading:!1})}},id=payment?.payment_source_type,parentProps={handleOnChange,checked,id,name,disabled,...props};return props.children?_jsx(Parent,{...parentProps,children:props.children}):_jsx("input",{title:name,type:"radio",id,onChange:e=>{handleOnChange(e)},checked,disabled,...p})}export default PaymentMethodRadioButton;