Add Urgent vs Standard emails to Contact Form

config-example.js

@@ -10,6 +10,7 @@ module.exports = {
   COUCHDB_ADMIN_USERNAME: "username",
   COUCHDB_ADMIN_PASSWORD: "password",
   SUPPORT_EMAIL: "some@email.com",
+  SUPPORT_URGENT_EMAIL: "urgent@email.com",
   LOGROCKET_APPID: "asdf/app-name",
   STRIPE_PUBLIC_KEY: "pk_test_123412341234",
   PRICE_DATA :

src/elm/Doc/ContactForm.elm

@@ -1,7 +1,7 @@
 module Doc.ContactForm exposing (Model, Msg, init, send, update, view)
 
-import Html exposing (Html, a, br, button, div, form, input, label, p, small, text, textarea)
-import Html.Attributes exposing (href, id, placeholder, readonly, rows, type_, value)
+import Html exposing (Html, a, br, button, div, form, input, label, p, small, span, text, textarea)
+import Html.Attributes exposing (checked, class, for, href, id, name, placeholder, readonly, rows, type_, value)
 import Html.Events exposing (onClick, onInput, onSubmit)
 import Http
 import Json.Encode as Enc
@@ -18,14 +18,21 @@ type alias Model =
     { fromField : String
     , bodyField : String
     , subjectField : String
+    , requestType : RequestType
     }
 
 
+type RequestType
+    = Standard
+    | Urgent
+
+
 init : String -> Model
 init email =
     { fromField = email
     , bodyField = ""
     , subjectField = "Could you help me with this?"
+    , requestType = Standard
     }
 
 
@@ -37,6 +44,7 @@ type Msg
     = UpdateFromField String
     | UpdateSubjectField String
     | UpdateBodyField String
+    | UpdateRequestType RequestType
 
 
 update : Msg -> Model -> Model
@@ -51,6 +59,9 @@ update msg model =
         UpdateBodyField newStr ->
             { model | bodyField = newStr }
 
+        UpdateRequestType newReqType ->
+            { model | requestType = newReqType }
+
 
 send : (Result Http.Error () -> msg) -> Model -> Cmd msg
 send msg model =
@@ -64,7 +75,7 @@ send msg model =
 toValue : Model -> Enc.Value
 toValue model =
     Enc.object
-        [ ( "toEmail", Enc.string "{%SUPPORT_EMAIL%}" )
+        [ ( "toEmail", Enc.string <| supportEmailString model.requestType )
         , ( "fromEmail", Enc.string model.fromField )
         , ( "subject", Enc.string model.subjectField )
         , ( "body", Enc.string model.bodyField )
@@ -75,7 +86,7 @@ toValue model =
 -- VIEW
 
 
-view : Language -> { closeMsg : msg, submitMsg : Model -> msg, tagger : Msg -> msg, copyEmail : msg } -> Model -> List (Html msg)
+view : Language -> { closeMsg : msg, submitMsg : Model -> msg, tagger : Msg -> msg, copyEmail : Bool -> msg } -> Model -> List (Html msg)
 view lang { closeMsg, submitMsg, tagger, copyEmail } model =
     [ form [ id "contact-form", onSubmit <| submitMsg model ]
         [ input
@@ -88,17 +99,56 @@ view lang { closeMsg, submitMsg, tagger, copyEmail } model =
             []
         , input [ id "contact-subject", value model.subjectField, onInput <| tagger << UpdateSubjectField ] []
         , textarea [ id "contact-body", onInput <| tagger << UpdateBodyField, rows 7 ] []
+        , div []
+            [ input
+                [ id "contact-urgency-standard"
+                , name "contact-urgency"
+                , type_ "radio"
+                , value "standard"
+                , onClick <| tagger <| UpdateRequestType Standard
+                , checked (model.requestType == Standard)
+                ]
+                []
+            , label [ for "contact-urgency-standard" ] [ span [] [ text "Standard Request " ], span [ id "std-req-info", class "extra-info" ] [ text " (Checked every Wednesday)" ] ]
+            ]
+        , div []
+            [ input
+                [ id "contact-urgency-urgent"
+                , name "contact-urgency"
+                , type_ "radio"
+                , value "urgent"
+                , onClick <| tagger <| UpdateRequestType Urgent
+                , checked (model.requestType == Urgent)
+                ]
+                []
+            , label [ for "contact-urgency-urgent" ] [ span [] [ text "Urgent Request " ], span [ id "urg-req-info", class "extra-info" ] [ text " (Notification to Developer's Phone)" ] ]
+            ]
+        , br [] []
         , button [ id "contact-send", type_ "submit" ] [ text "Send Now" ]
         ]
     , p [] [ text "or" ]
-    , p [] [ text "send an email instead : ", br [] [], a [ href <| mailto model ] [ text "{%SUPPORT_EMAIL%}" ], small [ id "email-copy-btn", onClick copyEmail ] [ text "copy" ] ]
+    , p []
+        [ text "send an email instead : "
+        , br [] []
+        , a [ href <| mailto model ] [ text <| supportEmailString model.requestType ]
+        , small [ id "email-copy-btn", onClick <| copyEmail (model.requestType == Urgent) ] [ text "copy" ]
+        ]
     ]
-        |> modalWrapper closeMsg Nothing (tr lang EmailSupport)
+        |> modalWrapper closeMsg Nothing (Just [ ( "red-alert", model.requestType == Urgent ) ]) (tr lang EmailSupport)
+
+
+supportEmailString req =
+    case req of
+        Standard ->
+            "{%SUPPORT_EMAIL%}"
+
+        Urgent ->
+            "{%SUPPORT_URGENT_EMAIL%}"
 
 
 mailto : Model -> String
 mailto model =
-    "mailto:{%SUPPORT_EMAIL%}"
+    ("mailto:" ++ supportEmailString model.requestType)
         ++ toQuery
             [ string "subject" model.subjectField
             , string "body" model.bodyField

src/elm/Doc/UI.elm

@@ -716,7 +716,7 @@ viewTemplateSelector language msgs =
             ]
         ]
     ]
-        |> modalWrapper msgs.modalClosed Nothing "New Document"
+        |> modalWrapper msgs.modalClosed Nothing Nothing "New Document"
 
 
 viewWordCount :
@@ -752,7 +752,7 @@ viewWordCount model msgs =
     , hr [] []
     , span [] [ text ("Total Cards in Tree : " ++ String.fromInt stats.cards) ]
     ]
-        |> modalWrapper msgs.modalClosed Nothing "Word Counts"
+        |> modalWrapper msgs.modalClosed Nothing Nothing "Word Counts"
 
 
 

src/elm/Import/Bulk/UI.elm

@@ -214,7 +214,7 @@ view lang { state } =
                         , text " to download your v1 files manually."
                         ]
                     ]
-                        |> modalWrapper ModalClosed Nothing "Import From Gingko v1"
+                        |> modalWrapper ModalClosed Nothing Nothing "Import From Gingko v1"
 
                 LoggedIn ->
                     [ p [] [ text "To transfer multiple trees from your old account to this new one, follow these steps." ]
@@ -236,7 +236,7 @@ view lang { state } =
                         , button [ onClick FileRequested ] [ text "Browse..." ]
                         ]
                     ]
-                        |> modalWrapper ModalClosed Nothing "Import From Gingko v1"
+                        |> modalWrapper ModalClosed Nothing Nothing "Import From Gingko v1"
 
                 LoggedOut ->
                     [ p [] [ text "To transfer trees from your old account, you need to be logged in to it." ]
@@ -256,7 +256,7 @@ view lang { state } =
                         , text " to download your v1 files manually."
                         ]
                     ]
-                        |> modalWrapper ModalClosed Nothing "Import From Gingko v1"
+                        |> modalWrapper ModalClosed Nothing Nothing "Import From Gingko v1"
 
                 Manual ->
                     [ p []
@@ -281,7 +281,7 @@ view lang { state } =
                         , button [ onClick FileRequested ] [ text "Browse..." ]
                         ]
                     ]
-                        |> modalWrapper ModalClosed Nothing "Import From Gingko v1"
+                        |> modalWrapper ModalClosed Nothing Nothing "Import From Gingko v1"
 
         ImportSelecting importSelection ->
             let
@@ -298,7 +298,7 @@ view lang { state } =
                 ]
             , button [ onClick SelectionDone, disabled isDisabled ] [ text "Import Selected Trees" ]
             ]
-                |> modalWrapper ModalClosed Nothing "Import From Gingko v1"
+                |> modalWrapper ModalClosed Nothing Nothing "Import From Gingko v1"
 
         ImportSaving importSelection ->
             let
@@ -313,7 +313,7 @@ view lang { state } =
                 , text "This might take a while..."
                 ]
             ]
-                |> modalWrapper ModalClosed Nothing "Import From Gingko v1"
+                |> modalWrapper ModalClosed Nothing Nothing "Import From Gingko v1"
 
 
 viewSelectionEntry : Language -> { selected : Bool, tree : ( String, Metadata, Tree ) } -> Html Msg

src/elm/Page/Doc.elm

@@ -262,7 +262,7 @@ type Msg
     | ClickedEmailSupport
     | TourStep (Maybe Int)
     | ContactFormMsg ContactForm.Model ContactForm.Msg
-    | CopyEmailClicked
+    | CopyEmailClicked Bool
     | ContactFormSubmitted ContactForm.Model
     | ContactFormSent (Result Http.Error ())
       -- Import
@@ -760,8 +760,12 @@ update msg ({ workingTree } as model) =
         ContactFormMsg formModel formMsg ->
             ( { model | modalState = ContactForm (ContactForm.update formMsg formModel) }, Cmd.none )
 
-        CopyEmailClicked ->
-            ( model, send <| CopyToClipboard "{%SUPPORT_EMAIL%}" "#email-copy-btn" )
+        CopyEmailClicked isUrgent ->
+            if isUrgent then
+                ( model, send <| CopyToClipboard "{%SUPPORT_URGENT_EMAIL%}" "#email-copy-btn" )
+
+            else
+                ( model, send <| CopyToClipboard "{%SUPPORT_EMAIL%}" "#email-copy-btn" )
 
         ContactFormSubmitted formModel ->
             ( model, ContactForm.send ContactFormSent formModel )

src/elm/SharedUI.elm

@@ -2,12 +2,12 @@ module SharedUI exposing (modalWrapper)
 
 import Ant.Icons.Svg as Icons
 import Html exposing (Html, a, button, div, h1, h2, text)
-import Html.Attributes exposing (class, height, id, width)
+import Html.Attributes exposing (class, classList, height, id, width)
 import Html.Events exposing (onClick)
 
 
-modalWrapper : msg -> Maybe String -> String -> List (Html msg) -> List (Html msg)
-modalWrapper closeMsg id_ titleString body =
+modalWrapper : msg -> Maybe String -> Maybe (List ( String, Bool )) -> String -> List (Html msg) -> List (Html msg)
+modalWrapper closeMsg id_ classList_ titleString body =
     let
         idAttr =
             case id_ of
@@ -16,9 +16,17 @@ modalWrapper closeMsg id_ titleString body =
 
                 Nothing ->
                     []
+
+        otherClasses =
+            case classList_ of
+                Just list ->
+                    list
+
+                Nothing ->
+                    []
     in
     [ div [ class "modal-overlay", onClick closeMsg ] []
-    , div [ class "modal" ]
+    , div [ classList ([ ( "modal", True ) ] ++ otherClasses) ]
         [ div [ class "modal-header" ]
             [ h2 [] [ text titleString ]
             , div [ class "close-button", onClick closeMsg ] [ Icons.closeCircleOutlined [ width 20, height 20 ] ]

src/elm/Upgrade.elm

@@ -138,7 +138,7 @@ view model =
                 [ viewPWYWForm model ]
            )
     )
-        |> modalWrapper UpgradeModalClosed (Just "upgrade-modal") "Upgrade Gingko Writer"
+        |> modalWrapper UpgradeModalClosed (Just "upgrade-modal") Nothing "Upgrade Gingko Writer"
 
 
 viewCopy : Html Msg

src/static/style.css

@@ -181,7 +181,7 @@ body {
 #form-page span.alt-action {
   color: #888;
 }
-#form-page .extra-info {
+.extra-info {
   color: #888;
   width: 30ch;
 }
@@ -222,7 +222,7 @@ body {
 .center-form .alt-action {
   text-align: center;
 }
-#form-page input, #contact-form input, #contact-form textarea {
+#form-page input, #contact-form input:not([type='radio']), #contact-form textarea {
   border: 1px solid gray;
   padding: .5em 1em;
   font-size: 1em;
@@ -1109,6 +1109,23 @@ ul.dropdown > li > span.no-interaction:hover {
   top: 39px;
 }
 
+.modal.red-alert {
+  background: #ffebee;
+}
+.modal.red-alert .modal-header{
+  background: #ef5350;
+  color: white;
+}
+.modal.red-alert #contact-send {
+  background: #f44336;
+}
+.modal:not(.red-alert) #urg-req-info, .modal.red-alert #std-req-info {
+  visibility: hidden;
+}
+.modal.red-alert #urg-req-info, .modal:not(.red-alert) #std-req-info {
+  visibility: visible;
+}
+
 #contact-form {
   display: flex;
   flex-direction: column;

webpack.config.js

@@ -63,6 +63,7 @@ const brT = prepTranslation("br", br);
 const allLanguageStrings = [].concat(zhHansT, zhHantT, esT, frT, ruT, deT, nlT, huT, svT, caT, brT)
 const otherReplacements = [
     {search: "{%SUPPORT_EMAIL%}", replace: config.SUPPORT_EMAIL, flags: 'g'}
+  , {search: "{%SUPPORT_URGENT_EMAIL%}", replace: config.SUPPORT_URGENT_EMAIL, flags: 'g'}
   , {search: "{%HOMEPAGE_URL%}", replace: config.HOMEPAGE_URL, flags: 'g'}
 ];