unsupported.js 1.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657
  1. const html = require('choo/html');
  2. const modal = require('./modal');
  3. module.exports = function(state, emit) {
  4. let strings = {};
  5. let why = '';
  6. let url = '';
  7. if (state.params.reason !== 'outdated') {
  8. strings = unsupportedStrings(state);
  9. why = html`
  10. <a
  11. class="text-blue"
  12. href="https://github.com/mozilla/send/blob/master/docs/faq.md#why-is-my-browser-not-supported"
  13. >
  14. ${state.translate('notSupportedLink')}
  15. </a>
  16. `;
  17. url =
  18. 'https://www.mozilla.org/firefox/new/?utm_campaign=send-acquisition&utm_medium=referral&utm_source=send.firefox.com';
  19. } else {
  20. strings = outdatedStrings(state);
  21. url = 'https://support.mozilla.org/kb/update-firefox-latest-version';
  22. }
  23. return html`
  24. <main class="main">
  25. ${state.modal && modal(state, emit)}
  26. <section
  27. class="flex flex-col items-center justify-center text-center bg-white m-6 px-6 py-8 border border-grey-30 md:border-none md:px-12 md:py-16 shadow w-full md:h-full dark:bg-grey-90"
  28. >
  29. <h1 class="text-3xl font-bold">${strings.header}</h1>
  30. <p class="mt-4 mb-8 max-w-md leading-normal">${strings.description}</p>
  31. ${why}
  32. <a href="${url}" class="btn rounded-lg mt-8 px-8">
  33. ${strings.button}
  34. </a>
  35. </section>
  36. </main>
  37. `;
  38. };
  39. function outdatedStrings(state) {
  40. return {
  41. header: state.translate('notSupportedHeader'),
  42. description: state.translate('notSupportedOutdatedDetail'),
  43. button: state.translate('updateFirefox')
  44. };
  45. }
  46. function unsupportedStrings(state) {
  47. return {
  48. header: state.translate('notSupportedHeader'),
  49. description: state.translate('notSupportedDescription'),
  50. button: state.translate('downloadFirefox')
  51. };
  52. }