Add findOffersForDate query

Author: yogeshnikam671

src/App.js

@@ -3,7 +3,7 @@ import FindAvailableProductForm from './components/FindAvailableProductForm';
 import ProductForm from './components/ProductForm';
 import { ToastContainer, toast } from 'react-toastify';
 import { useEffect } from 'react';
-import GetDispatchedProductByDateForm from './components/GetDispatchedProductByDateForm';
+import FindOffersForDate from './components/FindOffersForDate';
 
 function App() {
 
@@ -27,7 +27,7 @@ function App() {
       <br/>
       <FindAvailableProductForm/>
       <br/>
-      <GetDispatchedProductByDateForm/>
+      <FindOffersForDate/>
       <br/>
       <ToastContainer />
     </div>

src/__test__/App.test.js

@@ -6,7 +6,7 @@ import { ApolloProvider } from "@apollo/client";
 import client from "../apolloClient";
 import FindAvailableProductForm from "../components/FindAvailableProductForm";
 import { startGraphQlStub, stopGraphQlStub } from "specmatic";
-import GetDispatchedProductByDateForm from "../components/GetDispatchedProductByDateForm";
+import FindOffersForDate from "../components/FindOffersForDate";
 
 global.setImmediate = global.setImmediate || ((fn, ...args) => global.setTimeout(fn, 0, ...args));
 let stub;
@@ -74,20 +74,23 @@ describe("App component tests", () => {
     });
   });
 
-  test("should fetch dispatched product by date", async () => {
+  test("should fetch offers valid until date", async () => {
     render(
       <ApolloProvider client={client}>
-        <GetDispatchedProductByDateForm />
+        <FindOffersForDate />
       </ApolloProvider>
     );
 
-    fireEvent.change(screen.getByTestId("date"), { target: { value: "2020-12-12" } });
+    fireEvent.change(screen.getByTestId("date"), { target: { value: "2024-12-31" } });
     fireEvent.click(screen.getByTestId("submit"));
 
     await waitFor(() => {
-      expect(screen.getByText("12/12/2020")).toBeInTheDocument(); // Adjust the date format if needed
+      expect(screen.getByText("WKND30")).toBeInTheDocument(); 
+      expect(screen.getByText("12/12/2024")).toBeInTheDocument(); 
+      expect(screen.getByText("SUNDAY20")).toBeInTheDocument(); 
+      expect(screen.getByText("12/25/2024")).toBeInTheDocument(); 
     });
-});
+  });
 });
 
 afterAll(async () => {

src/components/GetDispatchedProductByDateForm.js renamed to src/components/FindOffersForDate.js

@@ -1,33 +1,33 @@
-import React, { useEffect, useState } from 'react';
+import React, { useState } from 'react';
 import { useLazyQuery, gql } from '@apollo/client';
 import { toast } from 'react-toastify';
 import 'react-toastify/dist/ReactToastify.css';
 
-const GetDispatchedProductByDateForm = () => {
+const FindOffersForDate = () => {
   const [date, setDate] = useState('');
-  const [dispatchedProduct, setDispatchedProduct] = useState(null);
+  const [offers, setOffers] = useState(null);
 
   const formatDateString = (dateString) => {
-    return dateString.replace(/-/g, '/'); // Replace hyphens with slashes
+    return dateString.replace(/-/g, '/'); 
   };
 
-  const GET_DISPATCHED_PRODUCT_BY_DATE = gql`
+  const FIND_OFFERS_FOR_DATE = gql`
     query {
-      getDispatchedProductByDate(date: "${formatDateString(date)}") {
-        id
-        dispatchDate
+      findOffersForDate(date: "${formatDateString(date)}") {
+        offerCode
+        validUntil
       }
     }
   `;
 
-  const [getDispatchedProductByDate, { loading }] = useLazyQuery(GET_DISPATCHED_PRODUCT_BY_DATE, {
+  const [findOffersForDate, { loading }] = useLazyQuery(FIND_OFFERS_FOR_DATE, {
     fetchPolicy: 'network-only',
     onCompleted: (data) => {
-      setDispatchedProduct(data.getDispatchedProductByDate);
+      setOffers(data.findOffersForDate);
     },
     onError: () => {
-      setDispatchedProduct(null);
-      toast.error('Error fetching dispatched product');
+      setOffers(null);
+      toast.error('Error fetching offers');
     },
   });
 
@@ -40,12 +40,12 @@ const GetDispatchedProductByDateForm = () => {
       return;
     }
 
-    getDispatchedProductByDate({ variables: { date } });
+    findOffersForDate({ variables: { date } });
   };
 
   return (
     <div className="max-w-md mx-auto p-8 bg-white shadow-lg rounded-lg">
-      <h1 className="text-2xl font-bold mb-4">Get Dispatched Product by Date</h1>
+      <h1 className="text-2xl font-bold mb-4">Find offers valid until a certain date</h1>
       <form onSubmit={handleSubmit}>
         <div className="mb-4">
           <label className="block text-gray-700 text-sm font-bold mb-2" htmlFor="date">
@@ -71,18 +71,21 @@ const GetDispatchedProductByDateForm = () => {
           </button>
         </div>
       </form>
-      {dispatchedProduct && (
-        <div className="mt-8">
-          <h2 className="text-xl font-bold mb-4">Dispatched Product</h2>
-          <div className="p-4 border rounded-lg bg-gray-50 shadow-sm">
-            <p><strong>ID:</strong> {dispatchedProduct.id}</p>
-            <p><strong>Dispatch Date:</strong> {new Date(dispatchedProduct.dispatchDate).toLocaleDateString()}</p>
+      {offers && offers.map(offer => {
+        return (<>
+          <div className="mt-8">
+            <div className="p-4 border rounded-lg bg-gray-50 shadow-sm">
+              <p><strong>Offer code:</strong> {offer.offerCode}</p>
+              <p><strong>Valid Until:</strong> {new Date(offer.validUntil).toLocaleDateString()}</p>
+            </div>
           </div>
-        </div>
-      )}
+          </>
+        )
+      })
+      }
     </div>
   );
 };
 
-export default GetDispatchedProductByDateForm;
+export default FindOffersForDate;