Support multiple links in consent notice and consent modal descriptions

[jossensei]

Description texts can only have a privacyPolicy link. I've a case where I need to also add e cookiePolicy link.

Instead of hardcoding each link, I've thought of a solution where an unlimited number of links could be added in the config file like:

...
  translations: {
    en: {
      consentModal: {
        description: "Here you can assess and customize the services that we'd like to use on this website. You're in charge! Enable or disable services as you see fit. {privacyPolicyText}",
      }
      links: {
        privacyPolicy: {
          name: "privacy policy",
          url: "/privacy-policy",
          text: "To learn more, please read our {privacyPolicy}."
        },
        cookiePolicy: {
          name: "cookie policy",
          url: "/cookie-policy"
        }
      },
...

So we can use {privacyPolicyText} (if the url is set), {privacyPolicy} or {cookiePolicy} (or cookiePolicyText if we set a "text" key in cookiePolicy)

In the utils/config.js we could export a getLinks function like

export function getLinks(config, lang, t) {
    if (undefined === config.translations[lang].links) return {};
    return Object.keys(config.translations[lang].links).reduce((a, key) => {
        const linkUrl = t(['links', key, 'url']);
        const linkName= t(['links', key, 'name']);
        if (undefined === linkUrl) return a;
        if (undefined === linkName) return a;
        a[key] = (<a key={key} href={linkUrl}>{linkName}</a>);
        const linkText = t(['links', key, 'text'], a);
        if (undefined === linkText) return a;
        a[key + 'Text'] = (<Fragment key={key + 'Text'}>{linkText}</Fragment>);
        return a;
    }, {});
}

And then in the consent-notice.jsx and consent-modal.jsx we could remove all the ppUrl and ppLink code to just add the links in the description :

                        <Text
                            config={config}
                            text={t(['consentNotice', 'description'], {
                                purposes: (
                                    <strong key="strong">{purposesText}</strong>
                                ),
                                learnMoreLink: learnMoreLink(),
                                ...getLinks(config, lang, t)
                            })}
                        />

                        <Text
                            config={config}
                            text={t(['consentModal', 'description'], {
                                ...getLinks(config, lang, t)
                            })}
                        />

[jossensei]

I've created an draft pull request to have an idea of the changes in translation files #452

[jossensei]

I 've juste updated to pull request to keep compatibility with current configuration format, and enhance getLinks to not look directly at "config" but use a modified version of t() to get subkeys of a specified key.

[jossensei]

I'll just use html description finally.