14627 ui for email notifications

components/case/summary.js

@@ -1047,6 +1047,12 @@ const CaseSummary = (props) => {
                                                                         "case:watch-this-case-link"
                                                                     )}
                                                                 </button>
+                                                                <button className="govuk-link mailNotification">
+                                                                    Send me
+                                                                    email
+                                                                    updates
+                                                                </button>
+
                                                                 {/* <button
                                                         onClick={
                                                             handleOpenModal
@@ -1105,6 +1111,12 @@ const CaseSummary = (props) => {
                                                                     "case:watch-this-case-link"
                                                                 )}
                                                             </button>
+
+                                                            <button className="govuk-link mailNotification">
+                                                                Send me email
+                                                                updates
+                                                            </button>
+
                                                             {/* <button
                                                     onClick={handleOpenModal}
                                                 >

components/myportal/searchcases.js

@@ -175,8 +175,8 @@ let CaseSearch = (props) => {
                             <Link
                                 href={
                                     router.locale == "cy"
-                                        ? "/cyswllt"
+                                        ? "/fymhorth/cyswllt"
-                                        : "/contactus"
+                                        : "/myportal/contactus"
                                 }
                                 className="govuk-button withChevron govuk-button-cta"
                             >

components/search/searchresults.js

@@ -100,6 +100,35 @@ const SearchResults = (props) => {
             });
     };
 
+    const selectEmailNotifications = (
+        emailaddress,
+        loggedInUser,
+        incidentID,
+        appealType
+    ) => {
+        let updateBody = {
+            "pinswg_WatchedCase@odata.bind": "/incidents(" + incidentID + ")",
+            "pinswg_Contact@odata.bind": "/contacts(" + loggedInUser + ")",
+            "pinswg_appealcasetype": +appealType,
+        };
+
+        console.log("Email signed up");
+        // createWatchedCases(updateBody)
+        //     .then((data) => data)
+        //     .then(() => {
+        //         getWatchedCasesProxy(props.accountDetails.loggedinUserId).then(
+        //             (data) => {
+        //                 setWatchedCases(data),
+        //                     getDetailsProxy(data, "myWatchedCases").then(
+        //                         (data) => {
+        //                             setWatchedCasesDetails(data);
+        //                         }
+        //                     );
+        //             }
+        //         );
+        //     });
+    };
+
     const isWatchedCase = (whichIncident) => {
         let isWatched = jsonpath({
             path:
@@ -114,6 +143,20 @@ const SearchResults = (props) => {
         return isWatched;
     };
 
+    const isEmailNotifications = (whichIncident) => {
+        let isWatched = jsonpath({
+            path:
+                "$..value[?(@ && @._pinswg_watchedcase_value=='" +
+                whichIncident +
+                "')]",
+
+            json: watchedCases,
+            eval: true,
+        });
+
+        return isWatched;
+    };
+
     const deleteItem = (caseID, topThreeType) => {
         let cookies = parseCookies();
         topThreeType == "watchedCases" &&
@@ -600,6 +643,28 @@ const SearchResults = (props) => {
                                                     <span className="eye"></span>
                                                 </button>
                                             )}
+                                            <button
+                                                className="govuk-summary-list__actionLink mailLink"
+                                                title="Email about changes"
+                                                onClick={() => {
+                                                    confirm(
+                                                        " Do you want to be sent email updates for " +
+                                                            item.title +
+                                                            "?"
+                                                    ) &&
+                                                        selectEmailNotifications(
+                                                            props.accountDetails
+                                                                .accountDetails
+                                                                .emailaddress1,
+                                                            props.accountDetails
+                                                                .loggedinUserId,
+                                                            item.incidentid,
+                                                            item.pinswg_appealcasetype
+                                                        );
+                                                }}
+                                            >
+                                                <span className="mailicon icon"></span>
+                                            </button>
                                         </dd>
                                     )}
 
@@ -642,6 +707,30 @@ const SearchResults = (props) => {
                                                 >
                                                     <span className="eye"></span>
                                                 </button>
+                                                <button
+                                                    className="govuk-summary-list__actionLink mailLink"
+                                                    title="Email about changes"
+                                                    onClick={() => {
+                                                        confirm(
+                                                            " Do you want to be sent email updates for " +
+                                                                item.title +
+                                                                "?"
+                                                        ) &&
+                                                            selectEmailNotifications(
+                                                                props
+                                                                    .accountDetails
+                                                                    .accountDetails
+                                                                    .emailaddress1,
+                                                                props
+                                                                    .accountDetails
+                                                                    .loggedinUserId,
+                                                                item.incidentid,
+                                                                item.pinswg_appealcasetype
+                                                            );
+                                                    }}
+                                                >
+                                                    <span className="mailicon icon"></span>
+                                                </button>
                                             </dd>
                                         )}
                                 </div>

i18n.js

@@ -12,6 +12,7 @@ module.exports = {
         "*": ["common", "search"],
         "/": ["common", "home", "case"],
         "/contactus": ["newappeal", "account"],
+        "/myportal/contactus": ["newappeal", "account"],
         "/error": ["common", "home", "myportal"],
         "/furtherdetails": ["common", "home", "myportal"],
         "/myportal": ["myportal", "common", "home", "case"],

styles/sass/welshgov/_application.scss

@@ -2469,6 +2469,8 @@ ul#sharePageLinks.active {
         display: block;
     }
 
+
+
     .eye {
         /* margin: 90px; */
         width: 13px;
@@ -2494,9 +2496,79 @@ ul#sharePageLinks.active {
         top: 3px;
         background-color: #aa1111;
     }
+
+    &.mailLink {
+        width: 24px;
+        display: block;
+        margin-top: 5px;
+
+    }
+
+    .icon {
+        margin: 1px;
+        background-color: #fff;
+        border: 1px solid #aa1111;
+        display: inline-block;
+        position: relative;
+        vertical-align: top;
+        margin-top: 0px;
+        margin-left: -3px;
+    }
+
+    .icon:after,
+    .icon:before {
+        background: #fff;
+        border: 1px solid #aa1111;
+        content: "";
+        position: absolute;
+    }
+
+    .icon:hover,
+    .icon:hover:after,
+    .icon:hover:before {
+        background-color: #fff;
+    }
+
+
+    .mailicon {
+        height: 11px;
+        top: 0px;
+        width: 17px;
+        margin-top: 2px;
+    }
+
+    .mailicon:after,
+    .mailicon:before {
+        border-top: none;
+        top: 4px;
+        width: 8px;
+    }
+
+    .mailicon:after {
+        left: -1px;
+        -webkit-transform: rotate(25deg);
+        -moz-transform: rotate(25deg);
+        -ms-transform: rotate(25deg);
+        -o-transform: rotate(25deg);
+        transform: rotate(25deg);
+    }
+
+    .mailicon:before {
+        right: -1px;
+        -webkit-transform: rotate(-25deg);
+        -moz-transform: rotate(-25deg);
+        -ms-transform: rotate(-25deg);
+        -o-transform: rotate(-25deg);
+        transform: rotate(-25deg);
+    }
+
+
+
 }
 
 
+
+
 // modal timeout
 
 .modal {
@@ -2748,7 +2820,8 @@ fade {
 
 }
 
-.govuk-link.watchCase {
+.govuk-link.watchCase,
+.govuk-link.mailNotification {
     background-color: transparent;
     border: none;
     cursor: pointer;
@@ -2763,6 +2836,8 @@ fade {
     }
 }
 
+
+
 .fieldArrayLink {
     border: none;
     background: no-repeat;