Add countries endpoint and data

Author: imranhsayed

pages/checkout.js

@@ -1,24 +1,29 @@
 import Layout from '../src/components/layout';
-import { HEADER_FOOTER_ENDPOINT } from '../src/utils/constants/endpoints';
+import {
+	HEADER_FOOTER_ENDPOINT,
+	WOOCOMMERCE_COUNTRIES_ENDPOINT,
+} from '../src/utils/constants/endpoints';
 import axios from 'axios';
 import CheckoutForm from '../src/components/checkout/checkout-form';
 
-export default function Checkout({ headerFooter }) {
+export default function Checkout({ headerFooter, countries }) {
 	return (
 		<Layout headerFooter={headerFooter || {}}>
 			<h1>Checkout</h1>
-			<CheckoutForm countriesData={null}/>
+			<CheckoutForm countriesData={countries}/>
 		</Layout>
 	);
 }
 
 export async function getStaticProps() {
 
 	const { data: headerFooterData } = await axios.get( HEADER_FOOTER_ENDPOINT );
-	
+	const { data: countries } = await axios.get( WOOCOMMERCE_COUNTRIES_ENDPOINT );
+
 	return {
 		props: {
 			headerFooter: headerFooterData?.data ?? {},
+			countries: countries || {}
 		},
 
 		/**

src/components/checkout/form-elements/input-field.js

@@ -3,11 +3,11 @@ import PropTypes from 'prop-types';
 import Abbr from "./abbr";
 
 const InputField = ({ handleOnChange, inputValue, name, type, label, errors, placeholder, required, containerClassNames, isShipping }) => {
-	
+
 	const inputId = `${name}-${isShipping ? 'shipping' : ''}`;
-	
+
 	console.log( 'inputValue', inputValue );
-	
+
 	return (
 		<div className={containerClassNames}>
 			<label className="leading-7 text-sm text-gray-700" htmlFor={inputId}>

src/utils/constants/endpoints.js

@@ -6,3 +6,6 @@ export const GET_PRODUCTS_ENDPOINT = `${process.env.NEXT_PUBLIC_SITE_URL}/api/ge
  * @type {string}
  */
 export const CART_ENDPOINT = `${process.env.NEXT_PUBLIC_WORDPRESS_SITE_URL}/wp-json/rae/v1/cart/items/`;
+
+// Countries
+export const WOOCOMMERCE_COUNTRIES_ENDPOINT = `${process.env.NEXT_PUBLIC_WORDPRESS_SITE_URL}/wp-json/rae/v1/wc/countries/`;