Merge branch 'main' into jbranchaud/sks-92-set-up-payment-options-for…

…-epic-react
skillrecordings · Mar 28, 2024 · 87ea22a · 87ea22a
2 parents 1eb1483 + 2a7b502
commit 87ea22a
Show file tree

Hide file tree

Showing 5 changed files with 48 additions and 47 deletions.
diff --git a/apps/epic-web/schemas/documents/event.tsx b/apps/epic-web/schemas/documents/event.tsx
@@ -30,7 +30,7 @@ export default defineType({
     }),
     defineField({
       name: 'startsAt',
-      title: 'Starts at (Pacific time)',
+      title: 'Starts at (in UTC)',
       description: 'When does the event start?',
       type: 'datetime',
       options: {
@@ -42,7 +42,7 @@ export default defineType({
     }),
     defineField({
       name: 'endsAt',
-      title: 'Ends at (Pacific time)',
+      title: 'Ends at (in UTC)',
       description: 'When does the event end?',
       type: 'datetime',
       options: {
@@ -71,7 +71,7 @@ export default defineType({
             }),
             defineField({
               name: 'startsAt',
-              title: 'Starts at (Pacific time)',
+              title: 'Starts at (in UTC)',
               description: 'When does the event start?',
               type: 'datetime',
               options: {
@@ -83,7 +83,7 @@ export default defineType({
             }),
             defineField({
               name: 'endsAt',
-              title: 'Ends at (Pacific time)',
+              title: 'Ends at (in UTC)',
               description: 'When does the event end?',
               type: 'datetime',
               options: {

diff --git a/apps/epic-web/src/pages/events/index.tsx b/apps/epic-web/src/pages/events/index.tsx
@@ -17,6 +17,7 @@ import Spinner from 'components/spinner'
 import {cn} from '@skillrecordings/ui/utils/cn'
 import Icon from 'components/icons'
 import {IS_PAST_CONF_24} from 'pages/conf'
+import {formatInTimeZone} from 'date-fns-tz'
 
 export const getStaticProps: GetStaticProps = async (context) => {
   const events = await getAllEvents()
@@ -41,6 +42,7 @@ const Events: React.FC<{events: Event[]}> = ({events}) => {
       ? new Date(event.events[0].startsAt) > new Date()
       : false,
   )
+  const PT = 'America/Los_Angeles'
 
   return (
     <Layout
@@ -75,14 +77,16 @@ const Events: React.FC<{events: Event[]}> = ({events}) => {
           const {title, image, slug, description, startsAt, endsAt, state} =
             event
           const eventDate =
-            startsAt && `${format(new Date(startsAt), 'MMMM d, yyyy')}`
+            startsAt &&
+            `${formatInTimeZone(new Date(startsAt), PT, 'MMMM d, yyyy')}`
           const eventTime =
             startsAt &&
             endsAt &&
-            `${format(new Date(startsAt), 'h:mm a')} — ${format(
-              new Date(endsAt),
+            `${formatInTimeZone(
+              new Date(startsAt),
+              PT,
               'h:mm a',
-            )}`
+            )} — ${formatInTimeZone(new Date(endsAt), PT, 'h:mm a')}`
 
           const {data: availability} =
             trpc.products.getQuantityAvailableById.useQuery(
@@ -166,7 +170,7 @@ const Events: React.FC<{events: Event[]}> = ({events}) => {
                             <CalendarIcon className="w-4 translate-y-0.5 text-blue-900/80 dark:text-indigo-200/80" />
                             <div>
                               <strong>{eventDate}</strong>
-                              <div>{eventTime} (PST)</div>
+                              <div>{eventTime} (PT)</div>
                             </div>
                           </div>
                         </div>
@@ -177,17 +181,19 @@ const Events: React.FC<{events: Event[]}> = ({events}) => {
                             <CalendarIcon className="w-4 translate-y-0.5 text-blue-900/80 dark:text-indigo-200/80" />
                             <div>
                               <strong>
-                                {format(
+                                {formatInTimeZone(
                                   new Date(event.events[0].startsAt),
+                                  PT,
                                   'MMMM d, yyyy',
                                 )}
                                 {' – '}
-                                {format(
+                                {formatInTimeZone(
                                   new Date(
                                     event.events[
                                       event.events.length - 1
                                     ].endsAt,
                                   ),
+                                  PT,
                                   'MMMM d, yyyy',
                                 )}
                               </strong>

diff --git a/apps/epic-web/src/templates/event-template.tsx b/apps/epic-web/src/templates/event-template.tsx
@@ -4,7 +4,6 @@ import MuxPlayer from '@mux/mux-player-react'
 import {EventJsonLd} from '@skillrecordings/next-seo'
 import {useRouter} from 'next/router'
 import Balancer from 'react-wrap-balancer'
-import {format} from 'date-fns'
 import {formatInTimeZone} from 'date-fns-tz'
 import Image from 'next/image'
 import Share from 'components/share'
@@ -18,19 +17,14 @@ import {
   LocationMarkerIcon,
 } from '@heroicons/react/outline'
 import {getOgImage} from 'utils/get-og-image'
-import {
-  PriceCheckProvider,
-  usePriceCheck,
-} from '@skillrecordings/skill-lesson/path-to-purchase/pricing-check-context'
+import {PriceCheckProvider} from '@skillrecordings/skill-lesson/path-to-purchase/pricing-check-context'
 import {Pricing} from '@skillrecordings/skill-lesson/path-to-purchase/pricing'
-import {trpc} from 'trpc/trpc.client'
 import type {
   CommerceProps,
   SanityProduct,
 } from '@skillrecordings/commerce-server/dist/@types'
 import {useCoupon} from '@skillrecordings/skill-lesson/path-to-purchase/use-coupon'
 import Link from 'next/link'
-import {cn} from '@skillrecordings/ui/utils/cn'
 import pluralize from 'pluralize'
 
 const EventTemplate: React.FC<
@@ -221,22 +215,18 @@ export const EventDetails: React.FC<{
   event: Event
 }> = ({event}) => {
   const {startsAt, endsAt, timezone, events, image} = event
+  const PT = 'America/Los_Angeles'
   const eventDate =
-    startsAt &&
-    `${formatInTimeZone(
-      new Date(startsAt),
-      'America/Los_Angeles',
-      'MMMM d, yyyy',
-    )}`
+    startsAt && `${formatInTimeZone(new Date(startsAt), PT, 'MMMM d, yyyy')}`
 
   const eventTime =
     startsAt &&
     endsAt &&
-    `${formatInTimeZone(
-      new Date(startsAt),
-      'America/Los_Angeles',
+    `${formatInTimeZone(new Date(startsAt), PT, 'h:mm a')} — ${formatInTimeZone(
+      new Date(endsAt),
+      PT,
       'h:mm a',
-    )} — ${formatInTimeZone(new Date(endsAt), 'America/Los_Angeles', 'h:mm a')}`
+    )}`
 
   interface GroupedEvents {
     [title: string]: {
@@ -249,25 +239,18 @@ export const EventDetails: React.FC<{
     events &&
     events.reduce((acc: any, event) => {
       const {title, startsAt, endsAt} = event
-      const formattedDate = `${format(
+
+      const formattedDate = `${formatInTimeZone(
         new Date(startsAt),
+        PT,
         'MMMM d, yyyy',
-        // 'America/Los_Angeles',
       )}`
 
-      const startTime = `${formatInTimeZone(
+      const timeRange = `${formatInTimeZone(
         new Date(startsAt),
-        'America/Los_Angeles',
-        'ha',
-      )}`
-
-      const endTime = `${formatInTimeZone(
-        new Date(endsAt),
-        'America/Los_Angeles',
+        PT,
         'ha',
-      )}`
-
-      const timeRange = `${startTime}-${endTime}`
+      )}-${formatInTimeZone(new Date(endsAt), PT, 'ha')}`
       if (!acc[title]) {
         acc[title] = {dates: [formattedDate], time: timeRange}
       } else {
@@ -303,9 +286,9 @@ export const EventDetails: React.FC<{
                 <strong className="text-lg font-semibold leading-tight">
                   {title}
                 </strong>
-                <div className="flex items-center gap-1 pt-1 text-sm">
-                  <CalendarIcon className="h-5 w-5 flex-shrink-0 text-gray-600 dark:text-blue-300" />{' '}
-                  <div>{formattedDates}</div>
+                <div className="mt-2 flex items-baseline gap-1 text-sm">
+                  <CalendarIcon className="relative h-5 w-5 flex-shrink-0 translate-y-1.5 text-gray-600 dark:text-blue-300" />{' '}
+                  <div>{formattedDates} (Pacific time)</div>
                 </div>
                 <div className="flex items-center gap-1 pt-1 text-sm">
                   <ClockIcon className="relative h-5 w-5 flex-shrink-0 text-gray-600 dark:text-blue-300" />{' '}
@@ -314,6 +297,18 @@ export const EventDetails: React.FC<{
               </li>
             )
           })}
+          {timezone && (
+            <div className="flex items-center gap-1 pt-1 text-sm">
+              <a
+                href={timezone}
+                rel="noopener noreferrer"
+                target="_blank"
+                className="font-normal underline"
+              >
+                timezones
+              </a>
+            </div>
+          )}
         </ul>
       ) : (
         <div className="flex flex-col text-base font-semibold opacity-90">

diff --git a/apps/pro-aws/src/styles/globals.css b/apps/pro-aws/src/styles/globals.css
@@ -1,3 +1,4 @@
+@import url('https://use.typekit.net/tjw2gng.css');
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
@@ -20,7 +21,6 @@
 @import './ui/button.css';
 @import './login.css';
 @import './commerce.css';
-@import url('https://use.typekit.net/tjw2gng.css');
 
 @layer base {
   :root {

diff --git a/packages/skill-lesson/lib/products.ts b/packages/skill-lesson/lib/products.ts
@@ -55,15 +55,15 @@ export const getProducts = async (productIds: string[]) => {
 
 export const getAllProducts = async () => {
   const products = await sanityClient.fetch(
-    groq`*[_type == 'product'][]{
+    groq`*[_type == 'product'][] | order(_createdAt desc){
     _id,
+    _createdAt,
     title,
     description,
     productId,
     state,
     type,
     "slug": slug.current,
-    _id,
     image {
       url,
       alt