Update query.gg callouts (#294)

Author: tylermcginnis

app/components/DocsCalloutQueryGG.tsx

@@ -1,27 +1,40 @@
 import { LogoQueryGGSmall } from '~/components/LogoQueryGGSmall'
+import { useQueryGGPPPDiscount } from '~/hooks/useQueryGGPPPDiscount'
+
+export function DocsCalloutQueryGG() {
+  const ppp = useQueryGGPPPDiscount()
 
-export function DocsCalloutQueryGG(props: React.HTMLProps<HTMLDivElement>) {
   return (
-    <div {...props}>
+    <a
+      target="_blank"
+      className="cursor-pointer"
+      href="https://query.gg?s=tanstack"
+    >
       <div className="space-y-3">
         <h6 className="text-[.7rem] uppercase font-black opacity-50">
           Want to Skip the Docs?
         </h6>
         <LogoQueryGGSmall className="w-full" />
 
-        <blockquote className="text-xs -indent-[.45em] pl-2">
-          “This course is the best way to learn how to use React Query in
-          real-world applications.”
+        <blockquote className="text-sm -indent-[.45em] pl-2">
+          “If you're serious about *really* understanding React Query, there's
+          no better way than with query.gg”
           <cite className="italic block text-right">—Tanner Linsley</cite>
         </blockquote>
-        <a
-          className="block m-1 px-4 py-2 bg-gradient-to-r from-rose-500 to-violet-500 text-white rounded uppercase font-bold text-sm text-center"
-          href="https://query.gg?s=tanstack"
-          target="_blank"
-        >
-          Get the course
-        </a>
+
+        {ppp && (
+          <>
+            <p className="text-sm pl-2 py-2">
+              To help make query.gg more accessible, you can enable a regional
+              discount of {ppp.discount * 100}% off for being in {ppp.flag}{' '}
+              {ppp.country}.
+            </p>
+          </>
+        )}
+        <button className="block m-1 w-full mx-auto px-4 py-2 rounded uppercase font-bold text-sm text-center hover:bg-gray-100/70 dark:hover:bg-gray-800 cursor-default border-2 dark:border-gray-700/80">
+          {ppp ? ` Get ${ppp.discount * 100}% off ${ppp.flag}` : 'Learn More'}
+        </button>
       </div>
-    </div>
+    </a>
   )
 }

app/components/QueryGGBanner.tsx

@@ -1,34 +1,70 @@
-import { IoIosClose } from 'react-icons/io'
-import { useLocalStorage } from '~/utils/useLocalStorage'
-import { useClientOnlyRender } from '~/utils/useClientOnlyRender'
+import { useEffect, useState } from 'react'
+import headerCourse from '~/images/query-header-course.svg'
+import cornerTopLeft from '~/images/query-corner-top-left.svg'
+import cornerTopRight from '~/images/query-corner-top-right.svg'
+import cornerFishBottomRight from '~/images/query-corner-fish-bottom-right.svg'
+import { useQueryGGPPPDiscount } from '~/hooks/useQueryGGPPPDiscount'
 
 export function QueryGGBanner() {
-  const [hidden, setHidden] = useLocalStorage('pppbanner-hidden', false)
+  const ppp = useQueryGGPPPDiscount()
 
-  if (!useClientOnlyRender()) {
-    return null
+  let body = (
+    <>
+      <p className="text-lg">
+        “If you're serious about *really* understanding React Query, there's no
+        better way than with query.gg”
+      </p>
+      <p className="mt-2"> —Tanner Linsley</p>
+    </>
+  )
+
+  if (ppp) {
+    body = (
+      <>
+        <p className="text-lg font-bold mb-2">
+          We noticed you’re in {ppp.flag} {ppp.country}
+        </p>
+        <p>
+          To help make query.gg more globally accessible, you can enable a
+          regional discount of {ppp.discount * 100}% off.
+        </p>
+      </>
+    )
   }
 
   return (
-    <>
-      {!hidden && (
-        <div className="w-full bg-gradient-to-r from-red-500 to-amber-500 text-black text-sm text-center py-2 relative flex items-center justify-center">
-          <p>
-            Want to <span className="italic">skip the docs?</span> Check out{' '}
-            <a href="https://query.gg?s=tanstack">
-              <strong>query.gg</strong>
-            </a>{' '}
-            – the simplest way to master React Query.
-          </p>
-          <button
-            onClick={() => setHidden(true)}
-            className="absolute right-0"
-            aria-label="Hide Banner"
-          >
-            <IoIosClose size={30} className="text-black" />
-          </button>
+    <aside className="mx-auto w-full max-w-[1200px] p-8 flex justify-between items-center">
+      <div className="w-full xl:flex xl:gap-6 bg-[#f9f4da] border-4 border-[#231f20] relative">
+        <a
+          href="https://query.gg?s=tanstack"
+          className="xl:w-7/12 pb-4 grid grid-cols-[70px_1fr_70px] sm:grid-cols-[100px_1fr_100px] md:grid-cols-[140px_1fr_140px] xl:grid-cols-[110px_1fr] 2xl:grid-cols-[150px_1fr]"
+        >
+          <img src={cornerTopLeft} alt="sun" className="" />
+          <img
+            src={headerCourse}
+            alt="Query.gg - The Official React Query Course"
+            className="-mt-[1px] w-10/12 max-w-[350px] justify-self-center"
+          />
+          <img src={cornerTopRight} alt="moon" className="xl:hidden" />
+        </a>
+        <div className="hidden xl:block w-[80px] mr-[-55px] bg-[#231f20] border-4 border-r-0 border-[#f9f4da] border-s-[#f9f4da] shadow-[-4px_0_0_#231f20] -skew-x-[15deg] z-0"></div>
+        <div className="xl:w-5/12 py-2 xl:pb-0 grid xl:grid-cols-[1fr_90px] 2xl:grid-cols-[1fr_120px] justify-center bg-[#231f20] border-2 xl:border-4 xl:border-l-0 border-[#f9f4da] text-[#f9f4da] z-10">
+          <div className="my-2 text-center place-self-center">
+            {body}
+            <a
+              href="https://query.gg?s=tanstack"
+              className="mt-4 mb-1 xl:mb-2 px-6 py-2 inline-block bg-[#fcba28] text-[#231f20] rounded-full uppercase border border-black cursor-pointer font-black"
+            >
+              {ppp?.discount ? `Get ${ppp.discount * 100}% off` : 'Join now'}
+            </a>
+          </div>
+          <img
+            src={cornerFishBottomRight}
+            alt="mutated fish"
+            className="hidden xl:block self-end"
+          />
         </div>
-      )}
-    </>
+      </div>
+    </aside>
   )
 }

app/hooks/useQueryGGPPPDiscount.ts

@@ -0,0 +1,28 @@
+import { useState, useEffect } from 'react'
+
+type Discount = {
+  code: string
+  country: string
+  discount: number
+  flag: string
+}
+
+export function useQueryGGPPPDiscount() {
+  const [ppp, setPPP] = useState<Discount | null>(null)
+
+  useEffect(() => {
+    const handleFetch = async () => {
+      try {
+        const res = await fetch('https://ppp.uidotdev.workers.dev/')
+        const data = await res.json()
+        setPPP(data)
+      } catch (e) {
+        setPPP(null)
+      }
+    }
+
+    handleFetch()
+  }, [])
+
+  return ppp
+}