{"action":"created","issue":{"url":"https://api.github.com/repos/gocardless/splash-pages/issues/168","labels_url":"https://api.github.com/repos/gocardless/splash-pages/issues/168/labels{/name}","comments_url":"https://api.github.com/repos/gocardless/splash-pages/issues/168/comments","events_url":"https://api.github.com/repos/gocardless/splash-pages/issues/168/events","html_url":"https://github.com/gocardless/splash-pages/issues/168","id":81071724,"number":168,"title":"Have a better way of expressing intent using the <Translation> tag","user":{"login":"Ken-Lo","id":6426688,"avatar_url":"https://avatars.githubusercontent.com/u/6426688?v=3","gravatar_id":"","url":"https://api.github.com/users/Ken-Lo","html_url":"https://github.com/Ken-Lo","followers_url":"https://api.github.com/users/Ken-Lo/followers","following_url":"https://api.github.com/users/Ken-Lo/following{/other_user}","gists_url":"https://api.github.com/users/Ken-Lo/gists{/gist_id}","starred_url":"https://api.github.com/users/Ken-Lo/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/Ken-Lo/subscriptions","organizations_url":"https://api.github.com/users/Ken-Lo/orgs","repos_url":"https://api.github.com/users/Ken-Lo/repos","events_url":"https://api.github.com/users/Ken-Lo/events{/privacy}","received_events_url":"https://api.github.com/users/Ken-Lo/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":4,"created_at":"2015-05-26T18:02:53Z","updated_at":"2015-05-29T14:49:00Z","closed_at":null,"body":"So far, there are four main categories of intent when using the `<Translation>` component in the splash pages.\r\n\r\n1. **Country-specific info**\r\nShowing information that's specific to a certain country. For example: UK-only case studies or FR merchant logos. This intent is well served by the `<Translation>` component:\r\n    ```jsx\r\n    <Translation locales='en-GB'>\r\n      UK specific info, logos, etc.\r\n    </Translation>\r\n    <Translation locales='en-IE'>\r\n      IE specific info, logos, etc.\r\n    </Translation>\r\n    etc\r\n    ```\r\n\r\n2. **Domestic scheme & currency specific info**\r\nShow different information depending on the domestic DD scheme or currency in that country.\r\n    ```jsx\r\n    <Translation locales={['en-GB']}> // Bacs\r\n      Bacs, Direct Debit Guarantee, collect £s, etc.\r\n    </Translation>\r\n    <Translation locales={['en']} exclude={['en-GB']}> // SEPA\r\n      SEPA, SEPA Customer Protection, collect €, etc.\r\n    </Translation>\r\n```\r\nExamples: \r\n * [app/pages/faq/merchants/direct-debit/faq-merchants-direct-debit.en.js:11](https://github.com/gocardless/splash-pages/blob/dev/app/pages/faq/merchants/direct-debit/faq-merchants-direct-debit.en.js#L11)\r\n  * [app/pages/faq/merchants/security/faq-merchants-security.en.js:64](https://github.com/gocardless/splash-pages/blob/dev/app/pages/faq/merchants/security/faq-merchants-security.en.js#L64)\r\n\r\n  This probably breaks down once we start adding additional schemes or countries (it becomes an ever-growing list of locales to specify in every file). \r\n\r\n3. **Signup process dependent info**\r\nShow different information depending on whether self-serve sign-up is available (e.g. start taking payments now or contact sales CTA). At present, the intent is specified as follows:\r\n    ```jsx\r\n     // Here, {['en-GB']} is a white list of locales who can sign up immediately\r\n    <Translation locales={['en-GB']}>\r\n      Start taking payments today\r\n    </Translation>\r\n    <Translation locales={['en']} exclude={['en-GB']}>\r\n      Contact sales\r\n    </Translation>\r\n```\r\n\r\n  Examples:\r\n  * [app/pages/faq/merchants/signing-up/faq-merchants-signing-up.en.js:13](https://github.com/gocardless/splash-pages/blob/dev/app/pages/faq/merchants/signing-up/faq-merchants-signing-up.en.js#L13)\r\n  * [app/pages/features/features.en.js:120](https://github.com/gocardless/splash-pages/blob/dev/app/pages/features/features.en.js#L120)\r\n\r\n4. **Product dependent info**\r\nShow different information depending on whether Basic/BasicPro is available in that country. So far, we specified the intent as follows:\r\n    ```jsx\r\n     // Here, {['en-GB', 'en-IE']} is a list of locales with Basic pricing\r\n    <Translation locales={['en-GB','en-IE']}>\r\n      We charge <Message message='pricing.per_transaction_amount_normal' /> capped at <Message message=\"pricing.cost_cap\" />.\r\n    </Translation>\r\n    <Translation locales={['en']} exclude={['en-GB','en-IE']}>\r\n      We charge you a <Message message='pricing.pro_monthly_fee' /> monthly fee and a fee for each transaction.\r\n    </Translation>\r\n```\r\n  Example:\r\n  * [app/pages/pricing/pricing.en.js#L11](https://github.com/gocardless/splash-pages/blob/dev/app/pages/pricing/pricing.en.js#L11)\r\n\r\n  As a special case, [app/pages/features/features.en.js:421](https://github.com/gocardless/splash-pages/blob/dev/app/pages/features/features.en.js#L421) uses a further `<Translation>` block to show different screenshots depending on the dashboard version.\r\n\r\nIt would be good to update `<Translation>` so we can better express what the Translation is meant for.\r\nUse case 1 is already well served with the current design.\r\nUse case 2 probably requires a new component (especially if we want to handle more than 2 schemes)\r\nUse cases 3 and 4 can potentially be solved by storing a central list somewhere (otherwise you need to manually go through all of the files to update the locale list when launching basic pricing or self-serve signup)."},"comment":{"url":"https://api.github.com/repos/gocardless/splash-pages/issues/comments/106835044","html_url":"https://github.com/gocardless/splash-pages/issues/168#issuecomment-106835044","issue_url":"https://api.github.com/repos/gocardless/splash-pages/issues/168","id":106835044,"user":{"login":"harrison","id":20165,"avatar_url":"https://avatars.githubusercontent.com/u/20165?v=3","gravatar_id":"","url":"https://api.github.com/users/harrison","html_url":"https://github.com/harrison","followers_url":"https://api.github.com/users/harrison/followers","following_url":"https://api.github.com/users/harrison/following{/other_user}","gists_url":"https://api.github.com/users/harrison/gists{/gist_id}","starred_url":"https://api.github.com/users/harrison/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/harrison/subscriptions","organizations_url":"https://api.github.com/users/harrison/orgs","repos_url":"https://api.github.com/users/harrison/repos","events_url":"https://api.github.com/users/harrison/events{/privacy}","received_events_url":"https://api.github.com/users/harrison/received_events","type":"User","site_admin":false},"created_at":"2015-05-29T14:49:00Z","updated_at":"2015-05-29T14:49:00Z","body":"yeah I like the `IfX` convention, would have to be one name, so `IfBacs`, `IfSignupAvailable` etc. Would you want to give a go at adding some when there's stuff to update/add? We're full steam on admin/aml for a couple weeks now."}}