YAML file structure

We need a config file that describes problems and solutions. We need them locali[zs]ed too.

The structure, leaving out the obvious localisation keys:

• problemGroups: will hold mappings between problems and solutions
  • <topic> e.g. administrative: the stuff that goes into the first dropdown in the interface.
    • description: This goes in the first dropdown list as a label.
    • describe: This will show above the second dropdown when this topic is selected.
    • problems: List of problems under this group.
      • <topic> e.g. invoicing: the stuff that goes into the second dropdown in the interface.
        • description: This goes in the second dropdown list as a label.
        • intro: Introduction to the suggested solutions
        • suggestions: These are the links to helpdesk pages etc.
          • link: Link to an article
          • description: Description of an article or solution

I've put an example below.

---
problemGroups:
  administrative:
    description:
      nl: Administratieve vraag
      en: Administrative question
    describe:
      nl: Hoe zou je jouw administratieve vraag het beste omschrijven?
      en: How would you best describe your adminstrative question?
    problems:
      invoicing:
        description:
          nl: Ik heb een vraag over een factuur
          en: I have a question regarding an invoice
        intro: 
          nl: "Hier zijn een paar van de meest voorkomende voorbeelden van vragen over facturen:"
          en: "Here are some of the most common examples of invoice questions:"
        suggestions:
        - nl:
            link: https://greenhost.nl/contact/#betalingsgegevens
            description: Ik heb betalingsgegevens van Greenhost nodig
          en:
            link: https://greenhost.net/contact/#payment-details
            description: I need Greenhost's payment information.
      legal:
        description:
          nl: Ik heb een juridische vraag
          en: I have a legal question
        intro: 
          nl: "Hier zijn een paar van de meest voorkomende voorbeelden juridische vragen:"
          en: "Here are some of the most common examples of legal questions:"
        suggestions:
          - nl:
              link: https://greenhost.nl/juridisch/algemene-voorwaarden/
              description: Waar vind ik de algemene voorwaarden?
            en:
              link: https://greenhost.net/legal/terms-and-conditions/
              description: Where can I find your terms and conditions?
  technical:
    description:
      nl: Technisch
      en: Technical
    describe:
      nl: Hoe zou je jouw technische vraag of probleem het beste omschrijven?
      en: How would you best describe your adminstrative question?
    problems:
      hosting:
        description:
          nl: Mijn website is niet bereikbaar of werkt niet goed
          en: My website is not reachable or is not working properly
        intro: 
          nl: "Hier zijn mogelijke oplossingen voor veelvoorkomende website issues:"
          en: "Here are some solutions to some of the most common website issues:"
        suggestions:
        - nl:
            link: https://greenhost.nl/helpdesk/website/hostingserverbeheer/#onderhoudacties
            description: Server processen herstarten
          en:
            link: https://greenhost.net/helpdesk/website/hosting-management/#maintenance
            description: Restart server processes
        - nl:
            link: https://media.giphy.com/media/QEs1TwxdJHMli/giphy.gif
            description: De gremlin status vernieuwen
          en:
            link: https://media.giphy.com/media/QEs1TwxdJHMli/giphy.gif
            description: Recyling the gremlin states

I will figure out how to map this into the i18n library so it can be rendered.

added 1 deleted label

assigned to @tin

changed the description

@tin, if you already started on this, I edited it just now, with new insights gained.

looking great, I'll work from this. cheers

FYI, I've implemented it, from now on, if changes happen, I need to know. We can always make them of course..

added Doing label

Here's the full YAML structure for all content on the form except for the health check. @chris I made some changes to the structure (mainly the fact that only "technical" has subgroups so I removed subgroups from other options, and I did change some variable names).

I will send it over to Jesse for filling in; @chris do let me know if there's anything super broken with the current formatting and I will amend.

contact-form-content.yml

assigned to @chris and unassigned @tin

If it's not too late, I would like the languages to be at the top of the structure, the code was getting overly complicated and I guess it's even nice for the translator. Something like this:

---
urgentRequestFee: 420
localisations:
  en:
    translation:
      language: English
      title: Report a problem
      subtitle: Let's troubleshoot together. What type of issue are you experiencing?
      selectProblemGroup: Select an issue type..
      selectProblem: Select issue..
      urgency:
        legend: Confirm urgent request
        foldText: Urgent request?
        intro:
          p1: >-
            CAUTION: by selecting this, your request will escalate to highest
            priority and immediately alert on-call operators, 24/7.
          p2: >-
            You will be billed {{ urgencyFee }} for this type of request, unless we
            find that the urgency of your issue was justified through risk of
            immediate and irreparable damage.
          p3: >-
            If you are okay with this, type: "URGENT" below and then click on
            "Submit Urgent Request"
        submit: Submit Urgent Request
        urgent: URGENT
      problemGroups:
        administrative:
          description: Administrative question
          problemDescribe: How would you best describe your adminstrative question?
          problems:
            invoicing:
              description: I have a question regarding an invoice
              suggestionDescription: "Here are some of the most common examples of invoice questions:"
              suggestions:
              - link: https://greenhost.net/contact/#payment-details
                description: I need Greenhost's payment information.
            legal:
              description: I have a legal question
              suggestionDescription: "Here are some of the most common examples of legal questions:"
              suggestions:
              - link: https://greenhost.net/legal/terms-and-conditions/
                description: Where can I find your terms and conditions?
        technical:
          description: Technical
          problemDescribe: How would you best describe your adminstrative question?
          problems:
            hosting:
              description: My website is not reachable or is not working properly
              suggestionDescription: "Here are some solutions to some of the most common website issues:"
              suggestions:
              - link: https://greenhost.net/helpdesk/website/hosting-management/#maintenance
                description: Restart server processes
              - link: https://media.giphy.com/media/QEs1TwxdJHMli/giphy.gif
                description: Recyling the gremlin states
  nl:
    translation:
      language: Nederlands
      title: Meld een probleem
      subtitle: >-
        Laten we samen uitzoeken wat er aan de hand is. Wat voor soort probleem ervaar
        je?
      selectProblemGroup: Selecteer een type issue..
      selectProblem: Selecteer issue..
      urgency:
        legend: Urgent verzoek bevestigen
        foldText: Urgent verzoek?
        intro:
          p1: >-
            LET OP: wanneer u deze optie kiest, zal uw verzoek naar het hoogste
            escalatieniveau worden gebracht en onmiddelijk mensen van de
            storingsdienst alarmeren, 24/7.
          p2: >-
            U zult voor dit type verzoek een factuur ontvangen van {{ urgencyFee }},
            tenzij we van mening zijn dat de urgentie van het issue gerechtvaardigd is
            door het risico op onmiddelijke, onherstelbare schade.
          p3: >-
            Wanneer u hiermee akkoort gaat, type: "URGENT" en klik op "Verstuur urgent
            verzoek"
        submit: Verstuur urgent verzoek
        urgent: URGENT

      problemGroups:
        administrative:
          description: Administratieve vraag
          problemDescribe: Hoe zou je jouw administratieve vraag het beste omschrijven?
          problems:
            invoicing:
              description: Ik heb een vraag over een factuur
              suggestionDescription: "Hier zijn een paar van de meest voorkomende voorbeelden van vragen over facturen:"
              suggestions:
              - link: https://greenhost.nl/contact/#betalingsgegevens
                description: Ik heb betalingsgegevens van Greenhost nodig
            legal:
              description: Ik heb een juridische vraag
              suggestionDescription: "Hier zijn een paar van de meest voorkomende voorbeelden juridische vragen:"
              suggestions:
              - link: https://greenhost.nl/juridisch/algemene-voorwaarden/
                description: Waar vind ik de algemene voorwaarden?
        technical:
          description: Technisch
          problemDescribe: Hoe zou je jouw technische vraag of probleem het beste omschrijven?
          problems:
            hosting:
              description: Mijn website is niet bereikbaar of werkt niet goed
              suggestionDescription: "Hier zijn mogelijke oplossingen voor veelvoorkomende website issues:"
              suggestions:
              - link: https://greenhost.nl/helpdesk/website/hostingserverbeheer/#onderhoudacties
                description: Server processen herstarten
              - link: https://media.giphy.com/media/QEs1TwxdJHMli/giphy.gif
                description: De gremlin status vernieuwen
                

If it's already filled in, I can map it to this format too.

Oh and this also makes it the i18n file.

I see you uploaded a file too, changed some keys, will try to reflect them in code.. The main request is the en/nl key at the top rather than bottom.

@jesse this is what the YAML structure looks like today, can you have a look and see that it makes sense to you? You can add or remove problemGroups, problems, and suggestions at will, no need for the same to be available in the other language. Also note it is now indeed possible to make suggestions for problemGroups as well as for problems.

# This determines where to mount the "app" in the DOM.
mountingElementId: 'helpful-contact-form'
urgentRequestFee: 420
localisations:
  en:
    translation:
      language: English
      title: Report a problem
      subtitle: Let's troubleshoot together. What type of issue are you experiencing?
      selectProblemGroup: Select an issue type..
      selectProblem: Select issue..
      problemDescribe: 'The nature of my problem is:'
      submit: Submit request
      urgency:
        legend: Confirm urgent request
        foldText: Urgent request?
        intro: |-
          __CAUTION__: by selecting this, your request will escalate to highest priority
          and immediately alert on-call operators, 24/7.

          You will be billed {{ urgencyFee }} for this type of request, unless we find
          that the urgency of your issue was justified through risk of
          immediate and irreparable damage.

          If you are okay with this, type: `URGENT` below and then click on "Submit
          Urgent Request"
        submit: Submit Urgent Request
        urgent: URGENT
        typeUrgentHere: Type URGENT in capital letters here to unlock the urgent submit button.
      contact:
        title: Tell us about your problem
        name: "Name:"
        phone: "Phone number:"
        email: "E-mail address:"
        message: "Your description of the problem:"
        tell-us: What do you want to tell us?
        details: Contact details
        identification: Client identification (can be your company name, an invoice number, or a domain name)
      problemGroups:
        administrative:
          description: Administrative question
          suggestionDescription: 'Here are some of the most common examples of administrative questions:'
          suggestions:
            - link: https://greenhost.net/contact/#payment-details
              description: I need Greenhost's payment information.
            - link: https://greenhost.net/legal/terms-and-conditions/
              description: Where can I find your terms and conditions?
        technical:
          description: Technical
          problemDescribe: How would you best describe your technical question?
          suggestionDescription: "Here are some solutions to some of the most common technical issues:"
          suggestions: 
            - link: "https://greenhost.net/helpdesk/website/hosting-management/#maintenance"
              description: Generic technical problems fix
          problems:
            hosting:
              description: My website is not reachable or is not working properly
              suggestionDescription:
                'Here are some solutions to some of the most common
                website issues:'
              suggestions:
                - link: https://greenhost.net/helpdesk/website/hosting-management/#maintenance
                  description: Restart server processes
                - link: https://media.giphy.com/media/QEs1TwxdJHMli/giphy.gif
                  description: Recyling the gremlin states
  nl:
    translation:
      language: Nederlands
      title: Meld een probleem
      subtitle: Laten we samen uitzoeken wat er aan de hand is. Wat voor soort
        probleem ervaar je?
      selectProblemGroup: Selecteer een type issue..
      selectProblem: Selecteer issue..
      problemDescribe: 'De aard van mijn probleem is:'
      submit: Verstuur verzoek
      urgency:
        legend: Urgent verzoek bevestigen
        foldText: Urgent verzoek?
        intro: >-
          __LET OP__: wanneer u deze optie kiest, zal uw verzoek naar het hoogste
          escalatieniveau worden gebracht en onmiddelijk mensen van de
          storingsdienst alarmeren, 24/7.

          U zult voor dit type verzoek een factuur ontvangen van {{ urgencyFee }},
          tenzij we van mening zijn dat de urgentie van het issue
          gerechtvaardigd is door het risico op onmiddelijke, onherstelbare
          schade.

          Wanneer u hiermee akkoort gaat, type: `URGENT` en klik op "Verstuur urgent
          verzoek"
        submit: Verstuur urgent verzoek
        urgent: URGENT
        typeUrgentHere: Type hier URGENT in hoofdletters om een urgent verzoek te kunnen sturen.
      contact:
        title: Vertel ons over uw probleem
        name: "Naam:"
        phone: "Telefoonnumer:"
        email: "E-mailadres:"
        message: "Uw omschrijving van het probleem:"
        tell-us: Wat wilt u ons vertellen?
        details: Contactgegevens
        identification: Klant identificatie (dit mag uw bedrijfsnaam, een factuurnummer, of een domein zijn)
      problemGroups:
        administrative:
          description: Administratieve vraag
          suggestionDescription:
            'Hier zijn een paar van de meest voorkomende voorbeelden
            van administratieve vragen:'
          suggestions:
            - link: https://greenhost.nl/contact/#betalingsgegevens
              description: Ik heb betalingsgegevens van Greenhost nodig
            - link: https://greenhost.nl/juridisch/algemene-voorwaarden/
              description: Waar vind ik de algemene voorwaarden?
        technical:
          description: Technisch
          problemDescribe: Hoe zou je jouw technische vraag of probleem het beste omschrijven?
          problems:
            hosting:
              description: Mijn website is niet bereikbaar of werkt niet goed
              suggestionDescription:
                'Hier zijn mogelijke oplossingen voor veelvoorkomende
                website issues:'
              suggestions:
                - link: https://greenhost.nl/helpdesk/website/hostingserverbeheer/#onderhoudacties
                  description: Server processen herstarten
                - link: https://media.giphy.com/media/QEs1TwxdJHMli/giphy.gif
                  description: De gremlin status vernieuwen

Of course you can edit it here by merge request, and I can check the syntax and structure for you.

If this works for you, please close this issue.

unassigned @chris

closed