Enhancement/ssr country data

gatsby-config.js

@@ -42,7 +42,8 @@ module.exports = {
     {
       resolve: 'gatsby-source-filesystem',
       options: {
-        path: 'content/',
+        name: 'content',
+        path: `${__dirname}/content`,
       },
     },
     {

netlify/edge-functions/get_country.js

@@ -0,0 +1,5 @@
+export default async (req, { geo }) => {
+  return Response.json({ country: geo?.country?.code });
+};
+
+export const config = { path: '/api/get_country' };

package.json

@@ -43,7 +43,6 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "reactstrap": "^9.2.0",
-    "request-ip": "^3.3.0",
     "sass": "^1.68.0",
     "styled-components": "^6.0.8",
     "yup": "^1.3.2"

src/api/create_order.js

@@ -81,5 +81,5 @@ export default async function handler(req, res) {
 }
 
 function createOrderId() {
-  return crypto.randomBytes(16).toString('hex');
+  return crypto.randomBytes(8).toString('hex');
 }

src/pages/confirmation.js

@@ -12,6 +12,9 @@ export const query = graphql`
           scholarship_info
           contact_email
           confirmation_message
+          currency {
+            symbol
+          }
           payment_options {
             bank_transfer
             mobile_money_transfer
@@ -29,15 +32,18 @@ export default function Confirmation({ data }) {
     contact_email,
     confirmation_message,
     payment_options,
+    currency,
   } = data.allRetreatsYaml.edges[0].node;
   const [needScholarship, setNeedScholarship] = useState(false);
   const [paymentMethod, setPaymentMethod] = useState();
+  const [totalPayable, setTotalPayable] = useState(0);
 
   useEffect(() => {
     const params = new URLSearchParams(location.search);
     setNeedScholarship(params.get('need_scholarship') === 'true');
     setPaymentMethod(params.get('payment_method'));
-  }, [needScholarship, paymentMethod]);
+    setTotalPayable(parseInt(params.get('total_payable') || 0, 10));
+  }, [needScholarship, paymentMethod, totalPayable]);
 
   return (
     <div className="px-2 py-5 mt-5 border-bottom">
@@ -56,14 +62,22 @@ export default function Confirmation({ data }) {
             />
           </div>
         )}
-        {paymentMethod && payment_options[paymentMethod] && (
-          <div>
-            <strong>Payment</strong>
-            <div className="my-2 respect-newlines">
-              {payment_options[paymentMethod]}
+        {!needScholarship &&
+          paymentMethod &&
+          payment_options[paymentMethod] && (
+            <div>
+              <strong>Payment</strong>
+              <div className="my-2 respect-newlines">
+                {payment_options[paymentMethod]}
+              </div>
+              {totalPayable > 0 && (
+                <div className="my-2">
+                  Total Payable: {totalPayable}
+                  {currency.symbol}
+                </div>
+              )}
             </div>
-          </div>
-        )}
+          )}
         <div className="mb-5 mt-3 text-center">
           <a href={`mailto:${contact_email}`} className="btn btn-secondary">
             Contact us

src/pages/index.js

@@ -3,13 +3,31 @@ import PropTypes from 'prop-types';
 import { graphql } from 'gatsby';
 import { GatsbyImage, getImage } from 'gatsby-plugin-image';
 import classnames from 'classnames';
-import marked from '../lib/marked';
 import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
+import axios from 'axios';
+// import requestIp from 'request-ip';
 import format from 'date-fns/format';
+import marked from '../lib/marked';
 
 import Nav from '../components/Nav';
 import RegistrationForm from '../components/RegistrationForm';
 
+// @todo may be rename DOMAIN_HOST to BASE_URL
+
+export async function getServerData() {
+  try {
+    const { data } = await axios.get(
+      process.env.DOMAIN_HOST + '/api/get_country',
+    );
+    return { props: data.country, status: 200 };
+  } catch (error) {
+    console.log(error.toString());
+    return {
+      props: { country: '', status: 200 },
+    };
+  }
+}
+
 // get the latest retreat by sorting latest
 export const query = graphql`
   query {
@@ -106,7 +124,7 @@ export const query = graphql`
   }
 `;
 
-export default function Home({ data }) {
+export default function Home({ data, serverData }) {
   // display the latest retreat
   const {
     title,
@@ -352,6 +370,7 @@ export default function Home({ data }) {
               currency={currency}
               contact_email={contact_email}
               registration_info={marked(registration.text)}
+              country={serverData.country}
             />
           </div>
         </Section>
@@ -362,6 +381,7 @@ export default function Home({ data }) {
 
 Home.propTypes = {
   data: PropTypes.object,
+  serverData: PropTypes.object,
 };
 
 /* eslint-disable */