website/frontend/src/Pages/Contact.elm

module Pages.Contact exposing (Model, Msg, page)

import Config.Data.Identity exposing (pageNames)
import Config.Helpers.CardFormat
    exposing
        ( cardContentSpacing
        , cardFormatter
        , cardMaker
        , cardSubTitleMaker
        , cardTitleMaker
        , desktopCardMaker
        , desktopImageBoxSize
        , desktopImageSize
        , fieldSpacer
        , mobileCardMaker
        , mobileImageBoxSize
        , mobileImageSize
        , topLevelBox
        )
import Config.Helpers.Format exposing (..)
import Config.Helpers.Header
    exposing
        ( Header
        , headerMaker
        )
import Config.Helpers.Response
    exposing
        ( pageList
        , topLevelContainer
        )
import Config.Helpers.StrengthBar
    exposing
        ( barMaker
        , barPadding
        )
import Config.Helpers.ToolTip exposing (..)
import Config.Helpers.Viewport exposing (resetViewport)
import Config.Pages.Contact.Types exposing (..)
import Config.Pages.Interviews.Types exposing (..)
import Config.Pages.Products.Types exposing (..)
import Config.Style.Colour exposing (colourTheme)
import Config.Style.Transitions
    exposing
        ( hoverFontDarkOrange
        , transitionStyleFast
        , transitionStyleSlow
        )
import Effect exposing (Effect)
import Element as E exposing (..)
import Element.Background as B
import Element.Border as D
import Element.Font as F
import Html.Attributes as H exposing (style)
import Layouts
import Page exposing (Page)
import Route exposing (Route)
import Shared exposing (..)
import View exposing (View)


page : Shared.Model -> Route () -> Page Model Msg
page shared route =
    Page.new
        { init = init
        , update = update
        , subscriptions = subscriptions
        , view = view shared
        }
        |> Page.withLayout toLayout


toLayout : Model -> Layouts.Layout Msg
toLayout model =
    Layouts.Navbar {}



-- INIT


type alias Model =
    {}


init : () -> ( Model, Effect Msg )
init () =
    ( {}
    , Effect.map
        (\_ -> NoOp)
        (Effect.sendCmd resetViewport)
    )



-- UPDATE


type Msg
    = NoOp


update : Msg -> Model -> ( Model, Effect Msg )
update msg model =
    case msg of
        NoOp ->
            ( model
            , Effect.none
            )



-- SUBSCRIPTIONS


subscriptions : Model -> Sub Msg
subscriptions model =
    Sub.none



-- VIEW


view : Shared.Model -> Model -> View Msg
view shared model =
    { title = pageNames.pageContact
    , attributes = []
    , element = contactContainer shared.device
    }


contactContainer : Device -> Element msg
contactContainer device =
    topLevelContainer (contactList device)


contactList : Device -> Element msg
contactList device =
    column pageList <|
        List.concat
            (case ( device.class, device.orientation ) of
                _ ->
                    [ [ instructionMaker ] ]
            )


contactHeader : Header
contactHeader =
    let
        name =
            "Contact"
    in
    { headerTitle = String.toUpper name
    , headerBody = "fasdklfjasdlk;fjasdl;fjasdfl;kasjdfl;askdja;lsdkjas;ldfj"
    }


instructionMaker : Element msg
instructionMaker =
    row
        topLevelBox
        [ cardMaker
            [ cardTitleMaker (String.toUpper pageNames.pageContact)
            , cardFormatter
                [ cardContentSpacing
                    [ column
                        fieldSpacer
                        [ cardSubTitleMaker
                            [ instructionBody ]
                        ]
                    ]
                ]
            ]
        ]


instructionBody : Element msg
instructionBody =
    column
        [ spacing 10
        , paddingEach
            { top = 10
            , bottom = 0
            , left = 0
            , right = 0
            }
        ]
        [ paragraph
            ([ F.color colourTheme.textLightGrey
             , paragraphSpacing
             , paragraphFontSize
             ]
                ++ [ F.alignLeft
                   , width fill
                   ]
            )
            [ text "The following terms may seem unreasonable to some, but after years on a large platform, I've learned the importance of filtering the criticisms I receive. Most feedback I receive is just vague gesturing and lacks substance, making some sort of quality filter essential. Thank you for your patience and understanding." ]
        , paragraph
            ([ F.color colourTheme.textLightGrey
             , paragraphSpacing
             , paragraphFontSize
             ]
                ++ [ F.alignLeft
                   , width fill
                   ]
            )
            [ text "Please keep in mind that any failure to comply with the following terms and conditions will forfeit your access to my time and attention. I ask that you respect my time and read these terms carefully. You are the one requesting an audience with me, and my time is mine to donate as I see fit. If you wish to submit your criticisms, you must do so on my terms, following the rules and conditions that streamline the process for me." ]
        , paragraph
            ([ F.color colourTheme.textLightGrey
             , paragraphSpacing
             , paragraphFontSize
             , F.bold
             ]
                ++ [ F.center
                   , width fill
                   , paddingEach
                        { top = 10
                        , bottom = 10
                        , left = 0
                        , right = 0
                        }
                   ]
            )
            [ el
                [ F.color colourTheme.textLightOrange
                , F.size 18
                ]
              <|
                text "Terms and Conditions"
            ]
        , column [ spacing 10 ] <|
            List.indexedMap
                (\index term ->
                    row
                        [ spacing 10
                        , width fill
                        ]
                        [ column
                            [ width <| px 15
                            , alignTop
                            ]
                            [ el [ alignRight ] <| text (String.fromInt (index + 1) ++ ". ") ]
                        , column
                            [ spacing 10
                            , width fill
                            , alignRight
                            ]
                            [ paragraph
                                [ width fill
                                , F.size 16
                                , F.alignLeft
                                ]
                                term
                            ]
                        ]
                )
                termsAndConditions
        , paragraph
            ([ F.color colourTheme.textLightGrey
             , paragraphSpacing
             , paragraphFontSize
             , F.bold
             ]
                ++ [ F.center
                   , width fill
                   , paddingEach
                        { top = 10
                        , bottom = 10
                        , left = 0
                        , right = 0
                        }
                   ]
            )
            [ el
                [ F.color colourTheme.textLightOrange
                , F.size 18
                ]
              <|
                text "Additional Clarifications"
            ]
        , paragraph
            ([ F.color colourTheme.textLightGrey
             , paragraphSpacing
             , paragraphFontSize
             ]
                ++ [ F.alignLeft
                   , width fill
                   ]
            )
            [ text "• "
            , text "You are only allowed to post one criticism at a time in the "
            , newTabLink []
                { url = "https://discord.com/channels/692563032546476062/1301247050796634182"
                , label = el orangeFormat <| text "🔎┃criticism"
                }
            , text " channel. You may post an additional criticism only after the previous one has been addressed and resolved to my satisfaction. This policy aims to reduce spamming, rambling, and Gish galloping, and to encourage linear discourse."
            ]
        , paragraph
            ([ F.color colourTheme.textLightGrey
             , paragraphSpacing
             , paragraphFontSize
             ]
                ++ [ F.alignLeft
                   , width fill
                   ]
            )
            [ text "• ", text "You may or may not be asked to voice chat about your criticism. While your willingness to engage in voice chat is a necessary condition for submitting your criticism, it does not guarantee that a voice chat will be requested. If your initial criticism is clear and I agree with it, then no voice chat will be required." ]
        , paragraph
            ([ F.color colourTheme.textLightGrey
             , paragraphSpacing
             , paragraphFontSize
             ]
                ++ [ F.alignLeft
                   , width fill
                   ]
            )
            [ text "• ", text "You may or may not be asked to have your criticism formalized. While your willingness to have your criticism formalized is a necessary condition for submitting your criticism, it does not guarantee that a formalization will be requested. If your initial criticism is clear and I agree with it, then no formalization will be required." ]
        , paragraph
            ([ F.color colourTheme.textLightGrey
             , paragraphSpacing
             , paragraphFontSize
             ]
                ++ [ F.alignLeft
                   , width fill
                   ]
            )
            [ text "• "
            , text "If I find it necessary to access a text-based channel (for simple clarifying questions, for example), then either I or a moderator will open a new thread in the "
            , newTabLink []
                { url = "https://discord.com/channels/692563032546476062/1301247050796634182"
                , label = el orangeFormat <| text "🔎┃criticism"
                }
            , text " channel. There we can then engage in a text-based discussion and/or ping other users if needed."
            ]
        , paragraph
            ([ F.color colourTheme.textLightGrey
             , paragraphSpacing
             , paragraphFontSize
             ]
                ++ [ F.alignLeft
                   , width fill
                   ]
            )
            [ text "• ", text "I will only request that your criticism be formalized if I do not understand it and we have exhausted all other reasonable means of clarification. If formalization is requested, you will not need to do it yourself, as I recognize that not everyone understands formal logic. If formalization is requested and I am unavailable to assist you, you may ping the @Logic role, and another user may help you." ]
        ]


darkFormat : Attr decorative msg
darkFormat =
    F.color colourTheme.textDarkGrey


orangeFormat : List (Attr () msg)
orangeFormat =
    [ F.color colourTheme.textLightOrange
    , hoverFontDarkOrange
    , transitionStyleFast
    ]


rounding : Attribute msg
rounding =
    D.rounded 10


termsAndConditions : List (List (Element msg))
termsAndConditions =
    [ [ row []
            [ paragraph [ alignLeft ]
                [ text "You will register an account with "
                , newTabLink []
                    { url = "https://discord.com/login"
                    , label = el orangeFormat <| text "Discord"
                    }
                , text " (if you haven't already)."
                ]
            ]
      ]
    , [ row [ alignLeft ]
            [ text "You will join the "
            , newTabLink []
                { url = "https://discord.com/invite/VzU8yCvYX8"
                , label = el orangeFormat <| text "upRootNutrition"
                }
            , text " Discord Server (if you haven't already)."
            ]
      ]
    , [ row [ alignLeft ]
            [ text "You will click the \"😃\" emoji to enter the server (if you haven't already)."
            ]
      ]
    , [ paragraph [ alignLeft ]
            [ text "You will locate the "
            , newTabLink []
                { url = "https://discord.com/channels/692563032546476062/826225570219687956"
                , label = el orangeFormat <| text "💻┃general"
                }
            , text " channel in General category."
            ]
      ]
    , [ row [ F.alignLeft, alignLeft ]
            [ paragraph [ alignLeft ]
                [ text "You will post exactly this in the "
                , newTabLink []
                    { url = "https://discord.com/channels/692563032546476062/826225570219687956"
                    , label = el orangeFormat <| text "💻┃general"
                    }
                , text " channel:"
                ]
            , column
                [ paddingEach
                    { top = 10
                    , bottom = 10
                    , left = 0
                    , right = 0
                    }
                , alignLeft
                ]
                [ paragraph
                    [ paddingEach
                        { top = 15
                        , bottom = 15
                        , left = 20
                        , right = 20
                        }
                    , B.color colourTheme.backgroundLightGrey
                    , rounding
                    , width fill
                    , spacing 8
                    ]
                    [ text "\"@Moderators I have a criticism for Nick.\""
                    ]
                ]
            ]
      ]
    , [ el [ alignLeft ] <| text "You will then receive the @Critic role." ]
    , [ paragraph [ alignLeft ]
            [ text "You will locate the "
            , newTabLink []
                { url = "https://discord.com/channels/692563032546476062/1301247050796634182"
                , label = el orangeFormat <| text "🔎┃criticism"
                }
            , text " channel in the General category."
            ]
      ]
    , [ paragraph [ alignLeft ]
            [ paragraph [ F.alignLeft ]
                [ text "You will post your criticism in the "
                , newTabLink []
                    { url = "https://discord.com/channels/692563032546476062/1301247050796634182"
                    , label = el orangeFormat <| text "🔎┃criticism"
                    }
                , text " channel with this exact format:"
                ]
            ]
      , column
            [ paddingEach
                { top = 10
                , bottom = 10
                , left = 0
                , right = 0
                }
            , alignLeft
            ]
            [ column
                [ paddingEach
                    { top = 15
                    , bottom = 15
                    , left = 20
                    , right = 20
                    }
                , B.color colourTheme.backgroundLightGrey
                , rounding
                , width fill
                , spacing 8
                ]
                [ text "\"Hello, <@191027366640877568>. I have a criticism for you."
                , row [ alignLeft ]
                    [ paragraph []
                        [ text "Proposition: "
                        , el [ darkFormat ] <| text "specify the exact proposition you are addressing."
                        ]
                    ]
                , row [ alignLeft ]
                    [ paragraph []
                        [ text "Link: "
                        , el [ darkFormat ] <| text "provide a url to the claim, with a timestamp if applicable."
                        ]
                    ]
                , row [ alignLeft ]
                    [ paragraph []
                        [ text "Reason for Error: "
                        , el [ darkFormat ] <| text "explain exactly why you believe this claim is in error."
                        ]
                    ]
                , row [ alignLeft ]
                    [ paragraph []
                        [ text "Suggested Correction (if any): "
                        , el [ darkFormat ] <| text "provide the corrected information or perspective."
                        ]
                    ]
                , row [ alignLeft ]
                    [ paragraph []
                        [ text "Additional Comments: "
                        , el [ darkFormat ] <| text "any other relevant thoughts or context."
                        , text "\""
                        ]
                    ]
                ]
            ]
      ]
    , [ el [ alignLeft ] <| text "You will not post additional criticisms until the last one has been resolved." ]
    , [ paragraph [ alignLeft ]
            [ text "You will not post anything other than criticisms in the "
            , newTabLink [ alignLeft ]
                { url = "https://discord.com/channels/692563032546476062/1301247050796634182"
                , label = el orangeFormat <| text "🔎┃criticism"
                }
            , text " channel."
            ]
      ]
    , [ el [ alignLeft ] <| text "You must be willing to converse over voice chat." ]
    , [ el [ alignLeft ] <| text "You must be willing to have your criticism formalized." ]
    ]