First working iteration

Adjust tests, update TS, add return links, refactor, etc

Sort out setup_future_usage issue

Remove unused bits, tailor other bits

Add appearance obj

Add different theme objects

DRY

Use card element for subscriptions, refactor things

Fix a wrong type

Update import

Adjust tests

Fix things, and paths

Fix footer form anomaly

Improve TS on application.tsx

Add stripe version to footer cache key

Fix test

Force dark colors on premium and insiders

Refactor things, make card element options adaptive

Format utils better

Pass amount from backend

Delete unused component

Lazy load stripe.js (#5843)

Add styling for load error and loading

Tweak margins

Fix the world (#5861)

* Fix the world

* Tidy up, optimise ExercismStripeElements

* Tidy up StripeForm

* add off_session on Stripe::Subscription.create

* Refactor Form, useStripeForm

* Leave things at a simple, working state

* Fix tests

* One more fix

---------

Co-authored-by: dem4ron <demaaron88@gmail.com>

Author: dem4ron

app/commands/payments/stripe/payment_intent/create_for_payment.rb

@@ -4,11 +4,15 @@ class Payments::Stripe::PaymentIntent::CreateForPayment
   initialize_with :customer_id, :amount_in_cents
 
   def call
-    Stripe::PaymentIntent.create(
+    options = {
       customer: customer_id,
       amount: amount_in_cents,
       currency: 'usd',
-      setup_future_usage: 'off_session'
-    )
+      automatic_payment_methods: {
+        enabled: true
+      }
+    }
+
+    Stripe::PaymentIntent.create(**options)
   end
 end

app/css/application.postcss.css

@@ -35,6 +35,7 @@
 @import "./components/social-icon";
 @import "./components/blog-post";
 @import "./components/donations-form";
+@import "./components/donation-card-error";
 @import "./components/toast";
 @import "./components/contributions-summary";
 @import "./components/progress";

app/css/components/donation-card-error.css

@@ -0,0 +1,7 @@
+.c-donation-card-error {
+    @apply mt-16 text-center;
+    @apply text-15 text-darkRed font-semibold leading-150;
+    @apply border-2 border-darkRed rounded-8;
+    @apply bg-lightRed;
+    @apply py-12 px-24;
+}

app/css/components/donations-form.css

@@ -151,13 +151,7 @@
                 }
             }
         }
-        & .card-error {
-            @apply mt-16 text-center;
-            @apply text-15 text-darkRed font-semibold leading-150;
-            @apply border-2 border-darkRed rounded-8;
-            @apply bg-lightRed;
-            @apply py-12 px-24;
-        }
+
         & .extra-info {
             @apply mt-16;
             @apply text-13 leading-160 text-textColor6 text-center;

app/helpers/react_components/donations/footer_form.rb

@@ -1,6 +1,7 @@
 module ReactComponents
   module Donations
     class FooterForm < ReactComponent
+      # this is cached in view_components/site_footer.rb
       def to_s
         super(
           "donations-footer-form",
@@ -15,7 +16,8 @@ def to_s
             captcha_required: !current_user || current_user.captcha_required?,
             recaptcha_site_key: ENV.fetch('RECAPTCHA_SITE_KEY', Exercism.secrets.recaptcha_site_key),
             links: {
-              settings: Exercism::Routes.donations_settings_url
+              settings: Exercism::Routes.donations_settings_url,
+              donate: Exercism::Routes.donate_url
             }
           }
         )

app/helpers/react_components/donations/premium_subscription_form.rb

@@ -4,7 +4,8 @@ def to_s
       "premium-subscription-form",
       {
         links: { cancel:, update_to_monthly: update_to_plan(:month), update_to_annual: update_to_plan(:year),
-                 insiders_path: Exercism::Routes.insiders_path, premium_redirect_link: Exercism::Routes.premium_path },
+                 insiders_path: Exercism::Routes.insiders_path, premium_redirect_link: Exercism::Routes.premium_path,
+                 premium_redirect_url: Exercism::Routes.premium_url },
         user_signed_in: user_signed_in?,
         captcha_required: !current_user || current_user.captcha_required?,
         recaptcha_site_key: ENV.fetch('RECAPTCHA_SITE_KEY', Exercism.secrets.recaptcha_site_key)

app/helpers/react_components/insiders/insiders_status.rb

@@ -7,6 +7,7 @@ def to_s
           {
             status: current_user.insiders_status,
             insiders_status_request: Exercism::Routes.api_user_url(current_user),
+            amount: 499,
             activate_insider_link: Exercism::Routes.activate_insiders_api_user_path,
             user_signed_in: user_signed_in?,
             captcha_required: !current_user || current_user.captcha_required?,

app/helpers/react_components/premium/price_option.rb

@@ -10,6 +10,7 @@ def to_s
             captcha_required: !current_user || current_user.captcha_required?,
             recaptcha_site_key: ENV.fetch('RECAPTCHA_SITE_KEY', Exercism.secrets.recaptcha_site_key),
             premium_redirect_link: Exercism::Routes.premium_path,
+            premium_redirect_url: Exercism::Routes.premium_url,
             insiders_redirect_link: Exercism::Routes.insiders_path
           }.merge(send("data_for_#{type}"))
         )

app/helpers/view_components/site_footer.rb

@@ -18,6 +18,7 @@ def cache_key
       parts = digests
       parts << ::Track.active.count
       parts << user_part
+      parts << stripe_version
 
       parts.join(':')
     end
@@ -28,6 +29,8 @@ def user_part
       current_user.captcha_required? ? 2 : 1
     end
 
+    def stripe_version = 2
+
     def digests
       %w[external shared].map do |file|
         Digest::SHA1.hexdigest(File.read(Rails.root.join('app', 'views', 'components', 'footer', "#{file}.html.haml")))

app/javascript/components/community/video-grid/index.tsx

@@ -14,15 +14,17 @@ import type { Request } from '@/hooks'
 import type { VideoTrack } from '@/components/types'
 import type { CommunityVideoType } from '@/components/types'
 
-type VideoGridProps = {
-  data: {
-    tracks: VideoTrack[]
-    itemsPerRow: number
-    request: Request
-  }
+export type VideoGridProps = {
+  tracks: VideoTrack[]
+  itemsPerRow: number
+  request: Request
 }
 
-export function VideoGrid({ data }: VideoGridProps): JSX.Element {
+export function VideoGrid({
+  tracks,
+  itemsPerRow,
+  request,
+}: VideoGridProps): JSX.Element {
   const {
     resolvedData,
     page,
@@ -32,7 +34,7 @@ export function VideoGrid({ data }: VideoGridProps): JSX.Element {
     selectedTrack,
     criteria,
     setCriteria,
-  } = useVideoGrid(data.request, data.tracks)
+  } = useVideoGrid(request, tracks)
 
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const timer = useRef<any>()
@@ -52,7 +54,7 @@ export function VideoGrid({ data }: VideoGridProps): JSX.Element {
   return (
     <>
       <VideoGridHeader
-        tracks={data.tracks}
+        tracks={tracks}
         handleTrackChange={handleTrackChange}
         selectedTrack={selectedTrack}
       />
@@ -71,7 +73,7 @@ export function VideoGrid({ data }: VideoGridProps): JSX.Element {
 
       <ResultsZone isFetching={isFetching}>
         <div
-          className={`grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-${data.itemsPerRow} gap-16`}
+          className={`grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-${itemsPerRow} gap-16`}
         >
           {resolvedData && resolvedData.results.length > 0 ? (
             resolvedData.results.map((video) => (