Repository: mdn/kuma

Issue:
T - Create landing page (FAQ) for Subscriptions
## 💬 Description
Create a landing page for Subscriptions in React, so we can reuse components. The page will live at /payments. 

## ✅ Acceptance Criteria
- [ ] User can navigate to /payments page
- [ ] User can read FAQ about why we are doing this and what to expect 
- [ ] User viewing on a smaller screen does not have a terrible experience

_Note: The "Help grow MDN" callout in the header is **not** expected to be completed during this sprint_
 
## 👷‍♀ Tasks
- [x] Add a new route and view in Django for /payments
- [x] Create React component, borrowing content from existing [Thank You page](https://wiki.developer.mozilla.org/en-US/payments/recurring)
- [x] Update copy to match what's in [latest copy edits](https://docs.google.com/document/d/1TH-P-hcZY1UzBtXDGGZnF3jTCy7b-cgC3TUo4Vwxfdc/edit?usp=sharing )

## 🎨 Design
https://app.abstract.com/projects/9decc480-70fc-11e9-9453-4f3fbffea7ce/branches/master/commits/5eb3004bb0e0aeb362aae44b3da2fa7d15d893cb/files/96E76C7B-2AF8-4473-A39E-E81890F91955/layers/0A8C3971-7D07-40BF-96B5-3B467D450CC4?mode=build&selected=734966551-1AF136E1-5788-4D35-A3CF-0E452D009A7B

~~https://mozilla.invisionapp.com/share/TDVED747SB9#/screens/399165366~~

## 🔦 Context
Please see Schalk's comment https://github.com/mdn/kuma/issues/6581#issuecomment-591376908




Discussion:
Task 1: Move content from the existing "Thank You" page (https://wiki.developer.mozilla.org/en-US/payments/recurring) to a new FAQ page. 

@atopal Do you have a url preference for the FAQ page? Perhaps `/payments/faq`? 
How about just /payments?
/payments sounds good. I had thought of this page as the "FAQ" page, but this naming implies that it will essentially the landing page for payments, which is helpful for me to know. 

Resolving patch:
diff --git a/kuma/payments/urls.py b/kuma/payments/urls.py
--- a/kuma/payments/urls.py
+++ b/kuma/payments/urls.py
@@ -15,4 +15,5 @@
         views.recurring_payment_management,
         name="recurring_payment_management",
     ),
+    re_path(r"", views.index, name="payments_index"),
 ]
diff --git a/kuma/payments/views.py b/kuma/payments/views.py
--- a/kuma/payments/views.py
+++ b/kuma/payments/views.py
@@ -16,6 +16,11 @@
 log = logging.getLogger("kuma.payments.views")
 
 
+@never_cache
+def index(request):
+    return render(request, "payments/index.html")
+
+
 @waffle_flag("subscription")
 @ensure_wiki_domain
 @never_cache
diff --git a/kuma/urls.py b/kuma/urls.py
--- a/kuma/urls.py
+++ b/kuma/urls.py
@@ -14,7 +14,6 @@
 from kuma.dashboards.urls import lang_urlpatterns as dashboards_lang_urlpatterns
 from kuma.dashboards.views import index as dashboards_index
 from kuma.landing.urls import lang_urlpatterns as landing_lang_urlpatterns
-from kuma.payments import views as payment_views
 from kuma.payments.urls import lang_urlpatterns as payments_lang_urlpatterns
 from kuma.search.urls import (
     lang_base_urlpatterns as search_lang_base_urlpatterns,
@@ -94,17 +93,16 @@
     re_path(r"^dashboards/", include(dashboards_lang_urlpatterns))
 )
 urlpatterns += [re_path("users/", include("kuma.users.urls"))]
-urlpatterns += i18n_patterns(
-    re_path(r"^payments/$", payment_views.contribute, name="payments"),
-)
 urlpatterns += i18n_patterns(
     re_path(
         r"^contribute/$",
-        ensure_wiki_domain(RedirectView.as_view(url=reverse_lazy("payments"))),
+        RedirectView.as_view(url=reverse_lazy("payments_index")),
         name="redirect-to-payments",
     ),
 )
-urlpatterns += i18n_patterns(re_path(r"^payments/", include(payments_lang_urlpatterns)))
+urlpatterns += i18n_patterns(
+    re_path(r"^payments/?", include(payments_lang_urlpatterns))
+)
 urlpatterns += i18n_patterns(
     re_path("", decorator_include(never_cache, users_lang_urlpatterns))
 )


Test patch:
diff --git a/kuma/payments/tests/test_views.py b/kuma/payments/tests/test_views.py
--- a/kuma/payments/tests/test_views.py
+++ b/kuma/payments/tests/test_views.py
@@ -16,6 +16,13 @@ def stripe_user(wiki_user):
     return wiki_user
 
 
+@pytest.mark.django_db
+def test_payments_index(client):
+    """Viewing the payments index page doesn't require you to be logged in"""
+    response = client.get(reverse("payments_index"))
+    assert response.status_code == 200
+
+
 @pytest.mark.django_db
 @override_flag("subscription", True)
 @mock.patch("kuma.payments.views.get_stripe_customer_data", return_value=True)
@@ -167,7 +174,6 @@ def test_recurring_payment_management_not_logged_in(get, cancel_, client):
 @pytest.mark.parametrize(
     "endpoint",
     [
-        "payments",
         "payment_terms",
         "recurring_payment_initial",
         "recurring_payment_subscription",