From 9e433e6c798dad8234a10b0848ec567ca80eb803 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tom=C3=A1s=20Palma?= <up202108880@edu.fe.up.pt>
Date: Tue, 4 Apr 2023 15:37:14 +0100
Subject: [PATCH] feature: companies can now quick edit their offers

---
 .../Offers/Manage/CollapsedQuickOfferEdit.js  |  40 +++
 .../Offers/Manage/CompanyOffersActions.js     |  11 +
 .../Manage/CompanyOffersManagementWidget.js   | 170 +++++----
 .../CompanyOffersManagementWidget.spec.js     | 335 +++++++++++++-----
 .../Offers/Manage/QuickOfferEditForm.js       | 100 ++++++
 .../PublicationEndDateComponent.js            |  29 +-
 src/hooks/useOfferForm.js                     |   4 +-
 7 files changed, 525 insertions(+), 164 deletions(-)
 create mode 100644 src/components/Company/Offers/Manage/CollapsedQuickOfferEdit.js
 create mode 100644 src/components/Company/Offers/Manage/QuickOfferEditForm.js

diff --git a/src/components/Company/Offers/Manage/CollapsedQuickOfferEdit.js b/src/components/Company/Offers/Manage/CollapsedQuickOfferEdit.js
new file mode 100644
index 00000000..a0aa4bb4
--- /dev/null
+++ b/src/components/Company/Offers/Manage/CollapsedQuickOfferEdit.js
@@ -0,0 +1,40 @@
+import React, { useState } from "react";
+import PropTypes from "prop-types";
+import { Box, Button, Collapse, Typography } from "@material-ui/core";
+import { KeyboardArrowDown, KeyboardArrowUp } from "@material-ui/icons";
+import { QuickOfferEditForm } from "./QuickOfferEditForm";
+
+const CollapsedQuickOfferEdit = ({ offerId, isMobile }) => {
+    const [collapse, setCollapse] = useState(false);
+
+    return isMobile ? (
+        <>
+            <Box
+                display="flex"
+                alignSelf="center"
+                alignItems="center"
+                flexDirection="row"
+            >
+                <Typography align="center">Quick Edit Offer</Typography>
+                <Button
+                    onClick={() => setCollapse(!collapse)}
+                    size="small"
+                    margin="dense"
+                    endIcon={collapse ? <KeyboardArrowUp /> : <KeyboardArrowDown />}
+                />
+            </Box>
+            <Collapse in={collapse}>
+                <QuickOfferEditForm offerId={offerId} />
+            </Collapse>
+        </>
+    ) : (
+        <QuickOfferEditForm offerId={offerId} showTitle={true} />
+    );
+};
+
+CollapsedQuickOfferEdit.propTypes = {
+    offerId: PropTypes.string.isRequired,
+    isMobile: PropTypes.bool.isRequired,
+};
+
+export default CollapsedQuickOfferEdit;
diff --git a/src/components/Company/Offers/Manage/CompanyOffersActions.js b/src/components/Company/Offers/Manage/CompanyOffersActions.js
index 45b076a2..c2c3c96b 100644
--- a/src/components/Company/Offers/Manage/CompanyOffersActions.js
+++ b/src/components/Company/Offers/Manage/CompanyOffersActions.js
@@ -39,6 +39,17 @@ const CompanyOffersActions = ({
                                 </IconButton>
                             </Link>
                         </Tooltip>
+                        <Tooltip title="Quick Offer Edit Actions">
+                            <IconButton
+                                aria-label="More Actions"
+                                edge="end"
+                                onClick={(e) => {
+                                    e.stopPropagation(); toggleCollapse();
+                                }}
+                            >
+                                {!isCollapseOpen ? <ExpandMore /> : <ExpandLess />}
+                            </IconButton>
+                        </Tooltip>
                     </>
                 ) : (
                     <IconButton
diff --git a/src/components/Company/Offers/Manage/CompanyOffersManagementWidget.js b/src/components/Company/Offers/Manage/CompanyOffersManagementWidget.js
index 530e9725..f2b10f45 100644
--- a/src/components/Company/Offers/Manage/CompanyOffersManagementWidget.js
+++ b/src/components/Company/Offers/Manage/CompanyOffersManagementWidget.js
@@ -10,7 +10,24 @@ import useSession from "../../../../hooks/useSession";
 import { fetchCompanyOffers } from "../../../../services/companyOffersService";
 import ControlledSortableSelectableTable from "../../../../utils/Table/ControlledSortableSelectableTable";
 import FilterableTable from "../../../../utils/Table/FilterableTable";
-import { alphabeticalSorter, GenerateTableCellFromField } from "../../../../utils/Table/utils";
+import {
+    alphabeticalSorter,
+    GenerateTableCellFromField,
+} from "../../../../utils/Table/utils";
+import { columns } from "./CompanyOffersManagementSchema";
+import PropTypes from "prop-types";
+import useSession from "../../../../hooks/useSession";
+import {
+    OfferTitleFilter,
+    PublishDateFilter,
+    PublishEndDateFilter,
+    LocationFilter,
+} from "../Filters/index";
+import { Edit as EditIcon } from "@material-ui/icons";
+import { Link } from "react-router-dom";
+import { addSnackbar } from "../../../../actions/notificationActions";
+import { connect } from "react-redux";
+import { RowActions } from "./CompanyOffersActions";
 import Offer from "../../../HomePage/SearchResultsArea/Offer/Offer";
 import { OfferConstants } from "../../../Offers/Form/OfferUtils";
 import { LocationFilter, OfferTitleFilter, PublishDateFilter, PublishEndDateFilter } from "../Filters/index";
@@ -18,6 +35,7 @@ import { RowActions } from "./CompanyOffersActions";
 import { columns } from "./CompanyOffersManagementSchema";
 import OfferTitle from "./CompanyOffersTitle";
 import CompanyOffersVisibilityActions from "./CompanyOffersVisibilityActions";
+import CollapsedQuickOfferEdit from "./CollapsedQuickOfferEdit";
 
 const generateRow = ({
     title, location, publishDate, publishEndDate, isHidden, isArchived, hiddenReason,
@@ -53,25 +71,35 @@ const sorters = {
 
 const filters = [
     { id: "offer-title-filter", render: OfferTitleFilter },
-    { id: "publish-date-filter",
+    {
+        id: "publish-date-filter",
         render: PublishDateFilter,
         props: {
             onChange: (date, filtersContext, setFiltersContext) => {
-                setFiltersContext((filtersContext) => ({ ...filtersContext, minDate: date }));
+                setFiltersContext((filtersContext) => ({
+                    ...filtersContext,
+                    minDate: date,
+                }));
             },
         },
     },
-    { id: "publish-end-date-filter",
+    {
+        id: "publish-end-date-filter",
         render: PublishEndDateFilter,
         props: {
             onChange: (date, filtersContext, setFiltersContext) => {
-                setFiltersContext((filtersContext) => ({ ...filtersContext, minDate: date }));
+                setFiltersContext((filtersContext) => ({
+                    ...filtersContext,
+                    minDate: date,
+                }));
             },
         },
     },
     { id: "location-filter", render: LocationFilter },
 ];
 
+export const OfferManagementContext = React.createContext();
+
 const CompanyOffersManagementWidget = ({ addSnackbar, isMobile }) => {
     const { data, isLoggedIn } = useSession();
     const [offers, setOffers] = useState({});
@@ -176,47 +204,50 @@ const CompanyOffersManagementWidget = ({ addSnackbar, isMobile }) => {
         const offerRoute = `/offer/${rowKey}`;
         const mobileFieldKeys = ["location", "publishEndDate"];
 
-        return (
-            isMobile && (
-                <>
-                    <div className={classes.payloadSection}>
-                        <Grid container alignItems="center">
-                            <Grid item xs={6}>
-                                <Typography className={classes.collapsableTitles} variant="body1">
-                                    Actions
-                                </Typography>
-                            </Grid>
-                            <Grid item xs={6} justifyContent="center">
-                                <CompanyOffersVisibilityActions
-                                    offer={row?.payload.offer}
-                                    getOfferVisibility={row?.payload.getOfferVisibility}
-                                    setOfferVisibility={row?.payload.setOfferVisibility}
-                                    offerId={row?.payload.offerId}
-                                />
-                                <Tooltip title="Edit Offer">
-                                    <Link to={offerRoute}>
-                                        <IconButton aria-label="Edit Offer">
-                                            <EditIcon color="secondary" fontSize="medium" />
-                                        </IconButton>
-                                    </Link>
-                                </Tooltip>
-                            </Grid>
-                        </Grid>
-                    </div>
-
-                    {mobileFieldKeys.map((colKey) => (
-                        <div key={colKey} className={classes.payloadSection}>
-                            <Divider />
+        return !isMobile ? (
+            <CollapsedQuickOfferEdit
+                offerId={rowKey}
+                offers={offers}
+                setOffers={setOffers}
+            />
+        ) : (
+            <>
+                <div className={classes.payloadSection}>
+                    <Grid container alignItems="center">
+                        <Grid item xs={6}>
                             <Typography className={classes.collapsableTitles} variant="body1">
-                                {columns[colKey]?.label}
+                Actions
                             </Typography>
-                            <Typography variant="body2">
-                                {row.fields[colKey].value}
-                            </Typography>
-                        </div>
-                    ))}
-                </>
-            )
+                        </Grid>
+                        <Grid item xs={6} justifyContent="center">
+                            <CompanyOffersVisibilityActions offer={row?.payload.offer} />
+                            <Tooltip title="Edit Offer">
+                                <Link to={offerRoute}>
+                                    <IconButton aria-label="Edit Offer">
+                                        <EditIcon color="secondary" fontSize="medium" />
+                                    </IconButton>
+                                </Link>
+                            </Tooltip>
+                        </Grid>
+                    </Grid>
+                    <CollapsedQuickOfferEdit
+                        offerId={rowKey}
+                        isMobile={isMobile}
+                    />
+                </div>
+
+                {mobileFieldKeys.map((colKey) => (
+                    <div key={colKey} className={classes.payloadSection}>
+                        <Divider />
+                        <Typography className={classes.collapsableTitles} variant="body1">
+                            {columns[colKey]?.label}
+                        </Typography>
+                        <Typography variant="body2">
+                            {row.fields[colKey].value}
+                        </Typography>
+                    </div>
+                ))}
+            </>
         );
     }, [classes.collapsableTitles, classes.payloadSection, isMobile, offers]);
 
@@ -224,32 +255,33 @@ const CompanyOffersManagementWidget = ({ addSnackbar, isMobile }) => {
         rowKey: PropTypes.string.isRequired,
     };
 
-
     return (
-        <FilterableTable
-            title="Offers Management"
-            tableComponent={ControlledSortableSelectableTable}
-            defaultSort="publishStartDate"
-            defaultOrderAscending={false}
-            rows={offers}
-            setInitialRows={setOffers}
-            columns={columns}
-            sorters={sorters}
-            filters={filters}
-            RowActions={RowActions}
-            rowsPerPage={5}
-            stickyHeader
-            emptyMessage="No offers here."
-            RowContent={RowContent}
-            RowCollapseComponent={RowCollapseComponent}
-            handleSelect={() => {}}
-            handleSelectAll={() => {}}
-            isSelectableTable={false}
-            isLoading={isLoading}
-            error={error}
-            mobileColumns={mobileCols}
-            hasMaxHeight={false}
-        />
+        <OfferManagementContext.Provider value={{ offers, setOffers }}>
+            <FilterableTable
+                title="Offers Management"
+                tableComponent={ControlledSortableSelectableTable}
+                defaultSort="publishStartDate"
+                defaultOrderAscending={false}
+                rows={offers}
+                setInitialRows={setOffers}
+                columns={columns}
+                sorters={sorters}
+                filters={filters}
+                RowActions={RowActions}
+                rowsPerPage={5}
+                stickyHeader
+                emptyMessage="No offers here."
+                RowContent={RowContent}
+                RowCollapseComponent={RowCollapseComponent}
+                handleSelect={() => {}}
+                handleSelectAll={() => {}}
+                isSelectableTable={false}
+                isLoading={isLoading}
+                error={error}
+                mobileColumns={mobileCols}
+                hasMaxHeight={false}
+            />
+        </OfferManagementContext.Provider>
     );
 };
 
diff --git a/src/components/Company/Offers/Manage/CompanyOffersManagementWidget.spec.js b/src/components/Company/Offers/Manage/CompanyOffersManagementWidget.spec.js
index 405f2a90..42d1e305 100644
--- a/src/components/Company/Offers/Manage/CompanyOffersManagementWidget.spec.js
+++ b/src/components/Company/Offers/Manage/CompanyOffersManagementWidget.spec.js
@@ -1,7 +1,14 @@
 import React from "react";
 import {
-    screen, waitFor, queryByText, getByLabelText,
-    fireEvent, act, getByTestId, queryByTestId,
+    screen,
+    waitFor,
+    queryByText,
+    getByLabelText,
+    fireEvent,
+    act,
+    getByTestId,
+    queryByTestId,
+    queryByTitle,
 } from "@testing-library/react";
 
 import CompanyOffersManagementWidget from "./CompanyOffersManagementWidget";
@@ -75,7 +82,10 @@ describe("App", () => {
     ];
 
     beforeEach(() => {
-        useSession.mockReturnValue({ data: { company: { name: "company1", _id: "company_id" } }, isLoggedIn: true });
+        useSession.mockReturnValue({
+            data: { company: { name: "company1", _id: "company_id" } },
+            isLoggedIn: true,
+        });
     });
 
     afterEach(() => {
@@ -83,12 +93,15 @@ describe("App", () => {
     });
 
     it("Renders Loading", () => {
-        companyOffersService.fetchCompanyOffers.mockImplementationOnce(() => new Promise(() => { }));
+        companyOffersService.fetchCompanyOffers.mockImplementationOnce(
+            () => new Promise(() => { }),
+        );
 
         renderWithStoreAndTheme(
             <MuiPickersUtilsProvider utils={DateFnsUtils}>
                 <CompanyOffersManagementWidget />
-            </MuiPickersUtilsProvider>, { initialState: {}, theme }
+            </MuiPickersUtilsProvider>,
+            { initialState: {}, theme },
         );
 
         // Use getBy by default when element should be available
@@ -101,9 +114,9 @@ describe("App", () => {
     });
 
     it("Loads Valid Offers", async () => {
-        companyOffersService.fetchCompanyOffers.mockImplementationOnce(() => new Promise((resolve) =>
-            resolve(MOCK_OFFERS)
-        ));
+        companyOffersService.fetchCompanyOffers.mockImplementationOnce(
+            () => new Promise((resolve) => resolve(MOCK_OFFERS)),
+        );
 
         // By waiting for act it executes all the async code at once
         // Need to wrap with BrowserRouter since there is a Link inside
@@ -112,74 +125,202 @@ describe("App", () => {
                 <MuiPickersUtilsProvider utils={DateFnsUtils}>
                     <CompanyOffersManagementWidget />
                 </MuiPickersUtilsProvider>
-            </BrowserRouter>, { initialState: {}, theme }
+            </BrowserRouter>,
+            { initialState: {}, theme },
         );
 
         // wait for the wrapped assertions to pass within a certain timeout window (wait for all updates to complete)
-        await waitFor(() => {
-            expect(screen.getByText("Offers Management")).toBeInTheDocument();
+        await waitFor(
+            () => {
+                expect(screen.getByText("Offers Management")).toBeInTheDocument();
+
+                for (const offer of MOCK_OFFERS) {
+                    try {
+                        const offerRow = screen.queryByText(offer.title).closest("tr");
+
+                        expect(
+                            queryByText(
+                                offerRow,
+                                format(parseISO(offer.publishDate), "yyyy-MM-dd"),
+                            ),
+                        ).toBeInTheDocument();
+                        expect(
+                            queryByText(
+                                offerRow,
+                                format(parseISO(offer.publishEndDate), "yyyy-MM-dd"),
+                            ),
+                        ).toBeInTheDocument();
+                        expect(queryByText(offerRow, offer.location)).toBeInTheDocument();
+
+                        expect(
+                            queryByTitle(offerRow, "Quick Offer Edit Actions"),
+                        ).toBeInTheDocument();
+                    } catch (e) {
+                        throw new Error(`Failed checking Offer ${offer.title}\n\n${e}`);
+                    }
+                }
+            },
+            {
+                timeout: 1000,
+            },
+        );
+    });
 
-            for (const offer of MOCK_OFFERS) {
-                try {
-                    const offerRow = screen.queryByText(offer.title).closest("tr");
+    it("Should show quick edit offer actions menu upon clicking on collapsable", async () => {
+        companyOffersService.fetchCompanyOffers.mockImplementationOnce(
+            () => new Promise((resolve) => resolve([MOCK_OFFERS[0]])),
+        );
 
-                    expect(queryByText(offerRow, format(parseISO(offer.publishDate), "yyyy-MM-dd"))).toBeInTheDocument();
-                    expect(queryByText(offerRow, format(parseISO(offer.publishEndDate), "yyyy-MM-dd"))).toBeInTheDocument();
-                    expect(queryByText(offerRow, offer.location)).toBeInTheDocument();
+        renderWithStoreAndTheme(
+            <BrowserRouter>
+                <MuiPickersUtilsProvider utils={DateFnsUtils}>
+                    <SnackbarProvider>
+                        <CompanyOffersManagementWidget />
+                    </SnackbarProvider>
+                </MuiPickersUtilsProvider>
+            </BrowserRouter>,
+            { initialState: {}, theme },
+        );
 
-                    expect(getByLabelText(offerRow, "Edit Offer")).toBeInTheDocument();
-                } catch (e) {
-                    throw new Error(`Failed checking Offer ${offer.title}\n\n${e}`);
-                }
-            }
-        }, {
-            timeout: 1000,
+        await waitFor(
+            async () => {
+                const quickOfferEditCollapsableButton = screen.getByTitle(
+                    "Quick Offer Edit Actions",
+                );
+
+                await fireEvent.click(quickOfferEditCollapsableButton);
+
+                expect(screen.getByText("Quick Edit Offer")).toBeInTheDocument();
+            },
+            {
+                timeout: 1000,
+            },
+        );
+    });
+
+    it("Should change the value of the publish end date through the quick offer actions menu", async () => {
+        addSnackbar.mockImplementationOnce(() => ({ type: "" }));
+
+        editOfferService.mockImplementationOnce(
+            () => new Promise((resolve) => resolve({})),
+        );
+
+        companyOffersService.fetchCompanyOffers.mockImplementationOnce(
+            () => new Promise((resolve) => resolve([MOCK_OFFERS[0]])),
+        );
+
+        renderWithStoreAndTheme(
+            <BrowserRouter>
+                <MuiPickersUtilsProvider utils={DateFnsUtils}>
+                    <SnackbarProvider>
+                        <CompanyOffersManagementWidget />
+                    </SnackbarProvider>
+                </MuiPickersUtilsProvider>
+            </BrowserRouter>,
+            { initialState: {}, theme },
+        );
+
+        const newPublishEndDateString = "2020-08-20T22:59:59.000Z";
+        const newPublishEndDate = new Date(Date.parse(newPublishEndDateString));
+
+        let quickOfferEditCollapsableButton;
+        await waitFor(
+            () => {
+                quickOfferEditCollapsableButton = screen.getByTitle(
+                    "Quick Offer Edit Actions",
+                );
+            },
+            {
+                timeout: 1000,
+            },
+        );
+
+        await act(() => {
+            fireEvent.click(quickOfferEditCollapsableButton);
+        });
+
+        const publishEndDateInput = screen.getByLabelText("Publication End Date *");
+        await act(() => {
+            fireEvent.focus(publishEndDateInput);
+            fireEvent.change(publishEndDateInput, {
+                target: { value: format(newPublishEndDate, "yyyyMMdd") },
+            });
+            fireEvent.blur(publishEndDateInput);
         });
+
+        expect(
+            screen.getByDisplayValue(newPublishEndDateString.split("T")[0]),
+        ).not.toBeNull();
+
+        const submitButton = screen.getByTestId("submit-offer");
+        await act(() => {
+            fireEvent.click(submitButton);
+        });
+
+        expect(editOfferService).toHaveBeenCalledWith(
+            expect.objectContaining({
+                offerId: MOCK_OFFERS[0]["_id"],
+                publishEndDate: new Date(newPublishEndDate.setHours(23, 59, 59, 0)),
+            }),
+        );
+
+        expect(addSnackbar).toHaveBeenCalledTimes(1);
     });
 
     it("Loads Empty Offers", async () => {
-        companyOffersService.fetchCompanyOffers.mockImplementationOnce(() => new Promise((resolve) =>
-            resolve([])
-        ));
+        companyOffersService.fetchCompanyOffers.mockImplementationOnce(
+            () => new Promise((resolve) => resolve([])),
+        );
         // By waiting for act it executes all the async code at once
         renderWithStoreAndTheme(
             <MuiPickersUtilsProvider utils={DateFnsUtils}>
                 <CompanyOffersManagementWidget />
-            </MuiPickersUtilsProvider>, { initialState: {}, theme }
+            </MuiPickersUtilsProvider>,
+            { initialState: {}, theme },
         );
 
-        await waitFor(() => {
-            expect(screen.getByText("Offers Management")).toBeInTheDocument();
+        await waitFor(
+            () => {
+                expect(screen.getByText("Offers Management")).toBeInTheDocument();
 
-            expect(screen.getByText("No offers here.")).toBeInTheDocument();
-        }, {
-            timeout: 1000,
-        });
+                expect(screen.getByText("No offers here.")).toBeInTheDocument();
+            },
+            {
+                timeout: 1000,
+            },
+        );
     });
 
     it("Error fetching offers", async () => {
         addSnackbar.mockImplementationOnce(() => ({ type: "" }));
 
-        companyOffersService.fetchCompanyOffers.mockImplementationOnce(() => new Promise((resolve, reject) =>
-            reject([{ msg: "Error fetching offers" }])
-        ));
+        companyOffersService.fetchCompanyOffers.mockImplementationOnce(
+            () =>
+                new Promise((resolve, reject) =>
+                    reject([{ msg: "Error fetching offers" }]),
+                ),
+        );
 
         // By waiting for act it executes all the async code at once
         renderWithStoreAndTheme(
             <MuiPickersUtilsProvider utils={DateFnsUtils}>
                 <CompanyOffersManagementWidget />
-            </MuiPickersUtilsProvider>, { initialState: {}, theme }
+            </MuiPickersUtilsProvider>,
+            { initialState: {}, theme },
         );
 
-        await waitFor(() => {
-            expect(screen.getByText("Offers Management")).toBeInTheDocument();
+        await waitFor(
+            () => {
+                expect(screen.getByText("Offers Management")).toBeInTheDocument();
 
-            expect(screen.getByText("No offers here.")).toBeInTheDocument();
+                expect(screen.getByText("No offers here.")).toBeInTheDocument();
 
-            expect(addSnackbar).toHaveBeenCalledTimes(1);
-        }, {
-            timeout: 1000,
-        });
+                expect(addSnackbar).toHaveBeenCalledTimes(1);
+            },
+            {
+                timeout: 1000,
+            },
+        );
     });
 
     it("Should only render mobile columns on mobile device", async () => {
@@ -188,9 +329,9 @@ describe("App", () => {
         const MOBILE_WIDTH_PX = 360;
         window.matchMedia = createMatchMedia(MOBILE_WIDTH_PX);
 
-        companyOffersService.fetchCompanyOffers.mockImplementationOnce(() => new Promise((resolve) =>
-            resolve(MOCK_OFFERS)
-        ));
+        companyOffersService.fetchCompanyOffers.mockImplementationOnce(
+            () => new Promise((resolve) => resolve(MOCK_OFFERS)),
+        );
 
         renderWithStoreAndTheme(
             <MuiPickersUtilsProvider utils={DateFnsUtils}>
@@ -198,31 +339,38 @@ describe("App", () => {
                     <Notifier />
                     <CompanyOffersManagementWidget isMobile={true} />
                 </SnackbarProvider>
-            </MuiPickersUtilsProvider>, { initialState: {}, theme }
+            </MuiPickersUtilsProvider>,
+            { initialState: {}, theme },
         );
 
         const mobileCols = ["title", "publishStartDate", "actions"];
-        await waitFor(() => {
-            for (const [col, val] of Object.entries(columns)) {
-                if (mobileCols.includes(col)) {
-                    expect(screen.getByRole("button", { name: val.label })).toBeInTheDocument();
-                } else {
-                    expect(screen.queryByRole("button", { name: val.label })).not.toBeInTheDocument();
+        await waitFor(
+            () => {
+                for (const [col, val] of Object.entries(columns)) {
+                    if (mobileCols.includes(col)) {
+                        expect(
+                            screen.getByRole("button", { name: val.label }),
+                        ).toBeInTheDocument();
+                    } else {
+                        expect(
+                            screen.queryByRole("button", { name: val.label }),
+                        ).not.toBeInTheDocument();
+                    }
                 }
-            }
-        }, {
-            timeout: 1000,
-        });
+            },
+            {
+                timeout: 1000,
+            },
+        );
     });
 
     it("Should render mobile collapsable content on mobile device", async () => {
         const MOBILE_WIDTH_PX = 360;
         window.matchMedia = createMatchMedia(MOBILE_WIDTH_PX);
 
-        companyOffersService.fetchCompanyOffers.mockImplementationOnce(() => new Promise((resolve) =>
-            resolve(MOCK_OFFERS)
-        ));
-
+        companyOffersService.fetchCompanyOffers.mockImplementationOnce(
+            () => new Promise((resolve) => resolve(MOCK_OFFERS)),
+        );
 
         await act(() =>
             renderWithStoreAndTheme(
@@ -233,25 +381,40 @@ describe("App", () => {
                             <CompanyOffersManagementWidget isMobile={true} />
                         </SnackbarProvider>
                     </MuiPickersUtilsProvider>
-                </BrowserRouter>, { initialState: {}, theme })
+                </BrowserRouter>,
+                { initialState: {}, theme },
+            ),
         );
 
         for (const offer of MOCK_OFFERS) {
             try {
                 const offerRow = screen.queryByText(offer.title)?.closest("tr");
 
-                expect(queryByText(offerRow, format(parseISO(offer.publishDate), "yyyy-MM-dd"))).toBeInTheDocument();
+                expect(
+                    queryByText(
+                        offerRow,
+                        format(parseISO(offer.publishDate), "yyyy-MM-dd"),
+                    ),
+                ).toBeInTheDocument();
 
                 fireEvent.click(getByLabelText(offerRow, "More Actions"));
 
-                expect(getByLabelText(offerRow.nextElementSibling, "Edit Offer")).toBeInTheDocument();
-                expect(queryByText(offerRow.nextElementSibling, offer.location)).toBeInTheDocument();
-                expect(queryByText(offerRow.nextElementSibling, format(parseISO(offer.publishEndDate), "yyyy-MM-dd"))).toBeInTheDocument();
+                expect(
+                    getByLabelText(offerRow.nextElementSibling, "Edit Offer"),
+                ).toBeInTheDocument();
+                expect(
+                    queryByText(offerRow.nextElementSibling, offer.location),
+                ).toBeInTheDocument();
+                expect(
+                    queryByText(
+                        offerRow.nextElementSibling,
+                        format(parseISO(offer.publishEndDate), "yyyy-MM-dd"),
+                    ),
+                ).toBeInTheDocument();
             } catch (e) {
                 throw new Error(`Failed checking Offer ${offer.title}\n\n${e}`);
             }
         }
-
     });
 
     it("Should hide/enable offer when clicking the hide/enable offer button", async () => {
@@ -269,8 +432,9 @@ describe("App", () => {
                     <MuiPickersUtilsProvider utils={DateFnsUtils}>
                         <CompanyOffersManagementWidget />
                     </MuiPickersUtilsProvider>
-                </BrowserRouter>, { initialState: {}, theme }
-            )
+                </BrowserRouter>,
+                { initialState: {}, theme },
+            ),
         );
 
         const offerRow = screen.queryByText(offer.title).closest("tr");
@@ -312,8 +476,9 @@ describe("App", () => {
                     <MuiPickersUtilsProvider utils={DateFnsUtils}>
                         <CompanyOffersManagementWidget />
                     </MuiPickersUtilsProvider>
-                </BrowserRouter>, { initialState: {}, theme }
-            )
+                </BrowserRouter>,
+                { initialState: {}, theme },
+            ),
         );
 
         const offerRow = screen.queryByText(offer.title).closest("tr");
@@ -333,14 +498,19 @@ describe("App", () => {
         addSnackbar.mockImplementationOnce(() => ({ type: "" }));
 
         const offer = MOCK_OFFERS[0];
-        companyOffersService.fetchCompanyOffers.mockImplementationOnce(() => new Promise((resolve) =>
-            resolve([offer])
-        ));
+        companyOffersService.fetchCompanyOffers.mockImplementationOnce(
+            () => new Promise((resolve) => resolve([offer])),
+        );
 
-        hideOfferService.mockImplementationOnce(() => new Promise((resolve, reject) =>
-            reject([{ msg: "Error fetching offers" }])
-        ));
-        enableOfferService.mockImplementation(() => new Promise((resolve) => resolve()));
+        hideOfferService.mockImplementationOnce(
+            () =>
+                new Promise((resolve, reject) =>
+                    reject([{ msg: "Error fetching offers" }]),
+                ),
+        );
+        enableOfferService.mockImplementation(
+            () => new Promise((resolve) => resolve()),
+        );
 
         await act(() =>
             renderWithStoreAndTheme(
@@ -348,8 +518,9 @@ describe("App", () => {
                     <MuiPickersUtilsProvider utils={DateFnsUtils}>
                         <CompanyOffersManagementWidget />
                     </MuiPickersUtilsProvider>
-                </BrowserRouter>, { initialState: {}, theme }
-            )
+                </BrowserRouter>,
+                { initialState: {}, theme },
+            ),
         );
 
         const offerRow = screen.queryByText(offer.title).closest("tr");
diff --git a/src/components/Company/Offers/Manage/QuickOfferEditForm.js b/src/components/Company/Offers/Manage/QuickOfferEditForm.js
new file mode 100644
index 00000000..a09edaac
--- /dev/null
+++ b/src/components/Company/Offers/Manage/QuickOfferEditForm.js
@@ -0,0 +1,100 @@
+import React, { useCallback, useContext } from "react";
+import PropTypes from "prop-types";
+import PublicationEndDateComponent from "../../../Offers/Form/form-components/PublicationEndDateComponent";
+import EditOfferSchema from "../../../Offers/Edit/EditOfferSchema";
+import { Box, Button, Typography } from "@material-ui/core";
+import useOfferForm from "../../../../hooks/useOfferForm";
+import { editOffer } from "../../../../services/offerService";
+import { parseRequestErrors } from "../../../Offers/Form/OfferUtils";
+import { useDispatch } from "react-redux";
+import { addSnackbar } from "../../../../actions/notificationActions";
+import { OfferManagementContext } from "./CompanyOffersManagementWidget";
+
+export const QuickOfferEditForm = ({ offerId, showTitle = false }) => {
+    const { offers, setOffers } = useContext(OfferManagementContext);
+
+    const dispatch = useDispatch();
+    const dispatchAddSnackbarAction = useCallback(
+        (notification) => {
+            dispatch(addSnackbar(notification));
+        },
+        [dispatch],
+    );
+
+    const { publishEndDate } = offers[offerId]["fields"];
+
+    const { control, fields, errors } = useOfferForm(EditOfferSchema, {
+        publishEndDate: publishEndDate.value,
+    });
+
+    const isObjectEmpty = useCallback(
+        (object) =>
+            Object.keys(object).length === 0 &&
+            Object.getPrototypeOf(object) === Object.prototype,
+        [],
+    );
+
+    const displaySuccessMessage = useCallback(() => {
+        dispatchAddSnackbarAction({
+            message: "Successfully updated",
+        });
+    }, [dispatchAddSnackbarAction]);
+
+    const displayErrorMessage = useCallback(
+        (err) => {
+            dispatchAddSnackbarAction({
+                message: `${parseRequestErrors(err).generalErrors[0].message}`,
+            });
+        },
+        [dispatchAddSnackbarAction],
+    );
+
+    const changeOfferValues = useCallback(() => {
+        const newDate = fields.publishEndDate?.toISOString();
+        publishEndDate.value = newDate.slice(0, newDate.indexOf("T"));
+        setOffers({ ...offers });
+    }, [fields.publishEndDate, offers, publishEndDate.value, setOffers]);
+
+    const onSubmit = (e) => {
+        e.preventDefault();
+
+        if (isObjectEmpty(errors)) {
+            editOffer({ offerId: offerId, publishEndDate: fields.publishEndDate })
+                .then(() => {
+                    displaySuccessMessage();
+
+                    changeOfferValues();
+                })
+                .catch((err) => {
+                    displayErrorMessage(err);
+                });
+        }
+    };
+
+    return (
+        <form onSubmit={(e) => onSubmit(e)} aria-label="Quick Offer Edit Form">
+            {showTitle && <Typography align="center">Quick Edit Offer</Typography>}
+            <Box display="flex" alignItems="center" flexDirection="column">
+                <PublicationEndDateComponent
+                    fields={fields}
+                    control={control}
+                    showInfoTooltip={false}
+                    errors={errors}
+                />
+                <Button
+                    variant="contained"
+                    color="primary"
+                    type="submit"
+                    data-testid="submit-offer"
+                >
+                    Submit
+                </Button>
+            </Box>
+        </form>
+    );
+};
+
+QuickOfferEditForm.propTypes = {
+    offerId: PropTypes.string.isRequired,
+    showTitle: PropTypes.bool.isRequired,
+};
diff --git a/src/components/Offers/Form/form-components/PublicationEndDateComponent.js b/src/components/Offers/Form/form-components/PublicationEndDateComponent.js
index 6056845a..20187e33 100644
--- a/src/components/Offers/Form/form-components/PublicationEndDateComponent.js
+++ b/src/components/Offers/Form/form-components/PublicationEndDateComponent.js
@@ -5,7 +5,9 @@ import { KeyboardDatePicker } from "@material-ui/pickers";
 import { Tooltip } from "@material-ui/core";
 import { Info } from "@material-ui/icons";
 
-const PublicationEndDateComponent = ({ fields, disabled, errors, requestErrors, control, datePickerProps }) => (
+const PublicationEndDateComponent = ({
+    fields, disabled, errors, requestErrors, control, datePickerProps, showInfoTooltip = true,
+}) => (
     <>
         <Controller
             name="publishEndDate"
@@ -30,21 +32,25 @@ const PublicationEndDateComponent = ({ fields, disabled, errors, requestErrors,
                     variant="inline"
                     autoOk
                     format="yyyy-MM-dd"
-                    minDate={fields.publishDate}
+                    minDate={fields?.publishDate}
                     error={!!errors?.publishEndDate ||
-                            !!requestErrors.publishEndDate}
-                    helperText={errors.publishEndDate?.message ||
-                            requestErrors.publishEndDate?.message || " "}
+                            !!requestErrors?.publishEndDate}
+                    helperText={errors?.publishEndDate?.message ||
+                            requestErrors?.publishEndDate?.message || " "}
                     {...datePickerProps}
                 />)}
             control={control}
         />
-        <Tooltip
-            title="The offer will only be visible until this date"
-            placement="top"
-        >
-            <Info fontSize="small" />
-        </Tooltip>
+        {showInfoTooltip ?
+            <Tooltip
+                title="The offer will only be visible until this date"
+                placement="top"
+            >
+                <Info fontSize="small" />
+            </Tooltip>
+
+            : ""
+        }
     </>
 );
 
@@ -55,6 +61,7 @@ PublicationEndDateComponent.propTypes = {
     requestErrors: PropTypes.object,
     control: PropTypes.object.isRequired,
     datePickerProps: PropTypes.object,
+    showInfoTooltip: PropTypes.bool,
 };
 
 export default PublicationEndDateComponent;
diff --git a/src/hooks/useOfferForm.js b/src/hooks/useOfferForm.js
index 03d1cb06..e2d4f173 100644
--- a/src/hooks/useOfferForm.js
+++ b/src/hooks/useOfferForm.js
@@ -7,7 +7,7 @@ import useTechSelector from "../components/utils/offers/useTechSelector";
 import { INITIAL_JOB_DURATION } from "../reducers/searchOffersReducer";
 import useSession from "./useSession";
 
-export default (schema) => {
+export default (schema, overrideDefaultValues) => {
     const { handleSubmit, formState, control, setValue, getValues, clearErrors, reset } = useForm({
         mode: "all",
         resolver: yupResolver(schema),
@@ -15,7 +15,7 @@ export default (schema) => {
         defaultValues: {
             title: "",
             publishDate: defaultDates.getPublishDate(),
-            publishEndDate: defaultDates.getPublishEndDate(),
+            publishEndDate: overrideDefaultValues?.publishEndDate ?? defaultDates.getPublishEndDate(),
             jobDuration: [INITIAL_JOB_DURATION, INITIAL_JOB_DURATION + 1],
             jobStartDate: null,
             description: "",