Release v0.6.2 - pull request #106 from bardsley/develop

This release adds:
- Check-in from Attendee list
- Various hygiene factors around code and TS
- Branch protection+ for main
- No longer crashes on admin logout
- Playwright e2e tests for purchasing flow and website links 

The test seems to fails but only on CI, checked manually and all looks fine

.github/workflows/main-pr-from-develop-only.yml

@@ -0,0 +1,18 @@
+name: Main Branch Protection
+
+on:
+  pull_request:
+    branches:
+      - main
+
+jobs:
+  check-branch:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Check branch
+        run: |
+          if [[ ${GITHUB_HEAD_REF} != develop ]] && ! [[ ${GITHUB_HEAD_REF} =~ ^hotfix/ ]]; 
+          then
+            echo "Error: Pull request must come from 'develop' or 'hotfix/' branch"
+            exit 1
+          fi

.github/workflows/playwright.yml

@@ -0,0 +1,30 @@
+name: Playwright Tests
+on:
+  deployment_status:
+env:
+  VERCEL_AUTOMATION_BYPASS_SECRET: ${{ secrets.VERCEL_AUTOMATION_BYPASS_SECRET }}
+  PLAYWRIGHT_TEST_BASE_URL: ${{ github.event.deployment_status.target_url }}
+jobs:
+  test:
+    timeout-minutes: 60
+    runs-on: ubuntu-latest
+    if: github.event.deployment_status.state == 'success'
+    steps:
+    - name: Url of the deployment
+      run: echo $PLAYWRIGHT_TEST_BASE_URL
+    - uses: actions/checkout@v4
+    - uses: actions/setup-node@v4
+      with:
+        node-version: lts/*
+    - name: Install dependencies
+      run: npm install -g yarn && yarn
+    - name: Install Playwright
+      run: npx playwright install --with-deps
+    - name: Run Playwright tests
+      run: npx playwright test
+    - uses: actions/upload-artifact@v4
+      if: always()
+      with:
+        name: playwright-report
+        path: playwright-report/
+        retention-days: 30

.gitignore

@@ -30,6 +30,11 @@ npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 
+#Playwright Tests
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/
+
 .tina/__generated__
 sendgrid.env
-

README.md

@@ -1,3 +1,6 @@
+Testing the vercel nameing and PRs
+----------------------------------
+
 Useful Links
 ============
 - [Beta site (develop branch)](https://beta.merseysidelatinfestival.co.uk/)
@@ -24,21 +27,20 @@ Both to think and discuss
 
 Adam
 ----
-- [ ] Scanned no signed in
 - [ ] Checked in at, by, using
-- [ ] Build a interface for cash sales
 - [ ] Disclaimer on food choices
 - [ ] Default prose styles e.g. <article class="prose prose-img:rounded-xl prose-headings:underline prose-a:text-blue-600">{{ markdown }}</article>
 - [ ] Return page from checkout
 - [ ] Allow change name / email for attendee. 
 - [ ] Clear cache on purchase
 ---
+- [x] Build a interface for cash sales
+- [x] Scanned no signed in
 - [x] Merseyside small logo
-- [ ] Optimise images
+- [x] Optimise images
 - [x] Video of dancing for hero
 - [x] Add see through option for a section
 - [x] Add title to features section
-
 - [X] Hydration error in production
 - [x] Reverse artist video animation 
 - [x] Student isn't coming through 

app/[...filename]/page.tsx

@@ -9,8 +9,11 @@ export default async function Page({
 }: {
   params: { filename: string[] };
 }) {
-
-  // console.log("PAGE:",params);
+  const clerkregex = /^clerk_(.*)$/;
+  if(clerkregex.test(params.filename[0])) {
+    redirect(`/admin`);
+  }
+  console.log("PAGE:",params,clerkregex.test(params.filename[0]));
   try {
     const data = await client.queries.page({
       relativePath: `${params.filename}.mdx`,

app/api/ticket/update/route.ts

@@ -19,12 +19,12 @@ export async function POST(req: NextRequest) {
     const user = await currentUser() // && user && user.publicMetadata.role === 'admin' ? 'admin' : 'attendee'
     if(!user){ return Response.json({error: "User is not signed in."}, { status: 401 }); }
     if(!user.publicMetadata.admin){ return Response.json({error: "User is does not have change details permissions."}, { status: 401 });}
-    requester = 'admin'
+    requester = `admin#${user.id}#${user.firstName}-${user.lastName}`
   } else {
     requester = 'attendee'
   }
 
-  const apiRequest = `${process.env.LAMBDA_PREFERENCES}?requested=info&email=${orig_email}&ticketnumber=${orig_ticket_number}`
+  const apiRequest = `${process.env.LAMBDA_PREFERENCES}?requested=info&email=${orig_email.replace("+","%2B")}&ticketnumber=${orig_ticket_number}`
 
   const currentAttendeeResponse = await fetch(apiRequest,{
     method: 'GET',
@@ -54,7 +54,8 @@ export async function POST(req: NextRequest) {
     email: orig_email,
     name_to: name,
     email_to: email,
-    phone_to: phone
+    phone_to: phone,
+    source: requester
   }
 
   if(process.env.NEXT_PUBLIC_INTERNAL_DEBUG) { console.log("newTicketInfo",newTicketInfo) }
@@ -77,3 +78,8 @@ export async function POST(req: NextRequest) {
     return NextResponse.json({error: error},{status: 500})
   }
 }
+
+export async function GET(_req: NextRequest) {
+  const user = await currentUser() // && user && user.publicMetadata.role === 'admin' ? 'admin' : 'attendee'
+  return NextResponse.json({user: user},{status:200})
+}

app/checkout/checkout-client.tsx

@@ -95,7 +95,7 @@ export default function CheckoutClient() {
               return (
                 <div className="mt-3" key={field.name}>
                   { field.type && field.type == 'hidden' ? null 
-                  : <label htmlFor="email" className="block text-sm font-medium leading-6 text-white capitalize">
+                  : <label htmlFor={field.name} className="block text-sm font-medium leading-6 text-white capitalize">
                       {field.label || field.name }
                     </label>
                   }
@@ -141,8 +141,8 @@ export default function CheckoutClient() {
        </>
     </Container>) : null }
 
-    <Container size="small" width="medium" className=" text-white w-full rounded-3xl border border-richblack-700 bg-richblack-500 py-0 md:pt-6 md:pb-16 px-3 md:px-0 flex flex-col ">
-      <h2 className="text-xl flex items-center -ml-6">
+    <Container size="small" width="medium" className=" text-white w-full rounded-3xl border border-richblack-700 bg-richblack-500 py-0 md:pt-6 pb-6 md:pb-16 px-3 md:px-0 flex flex-col ">
+      <h2 className="text-xl flex items-center -ml-12 md:-ml-6">
       <Icon data={{name: "BiPound", color: "green", style: "circle", size: "medium"}} className="mr-2 border border-richblack-700"></Icon>
         Payment
       </h2>

components/admin/lists/ticketRow.tsx

@@ -3,6 +3,8 @@ import { BiCreditCard, BiLogoSketch, BiLeftArrowCircle, BiSolidRightArrowSquare
 import { Menu, MenuButton, MenuItem, MenuItems } from '@headlessui/react'
 import { EllipsisVerticalIcon, CurrencyPoundIcon, ClipboardIcon, ExclamationTriangleIcon } from '@heroicons/react/24/solid'
 import { format,fromUnixTime } from 'date-fns';
+import { scanIn } from '@lib/fetchers';
+import { mutate } from 'swr';
 
 const TicketStatusIcon = ({attendee})  => {
   const PaymentIcon = attendee.status === 'paid_stripe' ? <BiCreditCard title="Paid Online" className='w-6 h-6' /> 
@@ -37,7 +39,9 @@ export const TicketRow = ({attendee,setActiveTicket, setNameChangeModalActive, s
       <td className="hidden px-3 py-4 text-sm text-inherit lg:table-cell">{attendee.email}</td>
       <td className="hidden px-3 py-4 text-sm text-inherit sm:table-cell">{passString}</td>
       <td className="px-3 py-4 text-sm text-gray-200 text-nowrap align-center">
-        {attendee.checkin_at ? format(fromUnixTime(attendee.checkin_at),'EEE HH:mm') :  <button className='bg-green-700 rounded-full px-4 py-1'>Check in</button>}
+        {attendee.checkin_at 
+          ? <button onClick={() => {scanIn(attendee.ticket_number, attendee.email, true); setTimeout(() => mutate('/api/admin/attendees'),200)}}>{format(fromUnixTime(attendee.checkin_at),'EEE HH:mm')}</button>
+          : <button className='bg-green-700 rounded-full px-4 py-1' onClick={() => {scanIn(attendee.ticket_number, attendee.email); setTimeout(() => mutate('/api/admin/attendees'),200)}}>Check in</button>}
       </td>
       <td className='hidden sm:table-cell px-3 py-0 text-xl align-middle'>
         <TicketStatusIcon attendee={attendee}/>

components/admin/modals/nameChangeModal.tsx

@@ -68,7 +68,7 @@ export default function NameChangeModal({ticket,open,onClose,refreshFunction}) {
               <button
                 type="submit"
                 disabled={isSubmitting}
-                className="inline-flex w-full justify-center rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 sm:col-start-2"
+                className="inline-flex w-full justify-center rounded-md bg-green-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 sm:col-start-2"
               >
                 Change
               </button>

components/admin/scan/ScanSuccessDialog.tsx

@@ -1,16 +1,8 @@
 import useSWR from "swr";
 import { itemsFromPassCombination} from '@components/ticketing/pricingUtilities'
 import { format } from "date-fns";
-
-const fetcher = (url: string) => fetch(url).then((res) => res.json());
-
-const scanIn = async (ticket_number,email,reset=false) => {
-  const apiResponse = await fetch(`/api/admin/scan/${ticket_number}`,{
-    method: "POST",
-    body: JSON.stringify({email:email,reset: reset}),
-  })
-  return apiResponse.json()
-}
+import { fetcher, scanIn } from "@lib/fetchers";
+// const fetcher = (url: string) => fetch(url).then((res) => res.json());
 
 const ScanSuccessDialog = ({scan,onClick}) => {
   const {data, error, isLoading, isValidating} = useSWR(`/api/admin/scan/${scan}`, fetcher, { keepPreviousData: false });

components/admin/ticket.tsx

@@ -6,9 +6,7 @@ import { format, fromUnixTime } from "date-fns";
 import Link from "next/link";
 import NameChangeModal from './modals/nameChangeModal';
 import TicketTransferModal from './modals/ticketTransferModal';
-
-
-const fetcher = (url: string) => fetch(url).then((res) => res.json());
+import { fetcher } from  "@lib/fetchers";
 
 const accessToThings = (access:number[],) => {
   let products = []

components/admin/ticketList.tsx

@@ -7,8 +7,7 @@ import NameChangeModal from './modals/nameChangeModal';
 import TicketTransferModal from './modals/ticketTransferModal';
 import { filterItems, filter, FilterSelector, FilterLabel } from './lists/filterable';
 import { TicketRow } from './lists/ticketRow';
-
-const fetcher = (url: string) => fetch(url).then((res) => res.json());
+import { fetcher } from  "@lib/fetchers";
 
 export default function TicketList() {
 

components/admin/userList.tsx

@@ -2,8 +2,7 @@
 import useSWR, {useSWRConfig} from "swr";
 import { EnvelopeIcon, ClockIcon } from '@heroicons/react/20/solid'
 import { format } from "date-fns";
-
-const fetcher = (url: string) => fetch(url).then((res) => res.json());
+import { fetcher } from  "@lib/fetchers";
 
 export default function UserList({loggedInUser}) {
   const { mutate } = useSWRConfig()

components/nav/nav-items.tsx

@@ -42,7 +42,7 @@ export default function NavItems({ navs }: { navs: any }) {
   const { theme } = useLayout();
   const searchParams = useSearchParams()
   const draft = searchParams.get('draft')
-  const filteredNavs = draft || process.env.NODE_ENV == 'development' ? navs : navs.filter((item)=>{return item.visible})
+  const filteredNavs = draft ? navs : navs.filter((item)=>{return item.visible})
   return (
     <>
       {draft ? (<a className="block text-xs bg-chillired-800 text-white w-96 text-center rounded-b-md absolute right-0 z-50" href="/">Currently showing Draft Content, Click to Hide</a>) : null}

components/nav/nav-mobile.tsx

@@ -4,7 +4,7 @@ import { useSearchParams } from 'next/navigation'
 export default function NavMobile({ navs }: { navs: any }) {
   const searchParams = useSearchParams()
   const draft = searchParams.get('draft')
-  const filteredNavs = draft || process.env.NODE_ENV == 'development' ? navs : navs.filter((item)=>{return item.visible})
+  const filteredNavs = draft ? navs : navs.filter((item)=>{return item.visible})
   return (
     <div className="mt-6 flow-root">
       <div className="-my-6 divide-y divide-gray-500/10">

components/preferences/MealPreferences.tsx

@@ -101,6 +101,7 @@ const MealPreferences = ({preferences,setPreferences}) =>{
 
         { preferences.dietary_requirements.selected.includes('other') ? (
           <div className="mt-6">
+            <label htmlFor="other" className=''>Please give more details</label>
           <textarea
             id="other"
             name="other"

components/ticketing/PassCard.tsx

@@ -13,6 +13,7 @@ export const PassCard = ({passName, clickFunction, pass, priceModel, hasASaving,
     <div
       onClick={clickFunction}
       key={passName}
+      title={passName}
       className={`relative flex flex-col justify-between rounded-3xl bg-richblack-600 ${passPadding} shadow-xl 
       ring-1 ring-gray-900/10  text-white border border-richblack-500 ${hoverClasses} ${cardWidthClasses}`}
     >

components/ticketing/PricingTable.tsx

@@ -119,7 +119,7 @@ const PricingTable = ({fullPassFunction,scrollToElement}:{fullPassFunction?:Func
         priceModel={priceModel}
       />
 
-      <div className="mx-auto w-full  max-w-2xl  items-start mt-10 mb-10 rounded-lg border border-gray-900 bg-gray-50 text-richblack-700 shadow-lg">
+      <div title="Checkout" className="mx-auto w-full  max-w-2xl  items-start mt-10 mb-10 rounded-lg border border-gray-900 bg-gray-50 text-richblack-700 shadow-lg">
       { priceModel === 'studentCost' && totalCost && totalCost > 0 ? (
           <div className='rounded-t-md border-t-gray-600 border border-b-0 border-l-0 border-r-0 bg-gold-500 p-2 font-bold text-center'>This is a student only ticket deal!</div>) 
         : null }

content/global/index.json

@@ -28,7 +28,7 @@
         "visible": true
       },
       {
-        "href": "/pricing",
+        "href": "pricing",
         "label": "Passes",
         "visible": false
       },

lib/fetchers.ts

@@ -0,0 +1,11 @@
+const fetcher = (url: string) => fetch(url).then((res) => res.json());
+
+const scanIn = async (ticket_number,email,reset=false) => {
+  const apiResponse = await fetch(`/api/admin/scan/${ticket_number}`,{
+    method: "POST",
+    body: JSON.stringify({email:email,reset: reset}),
+  })
+  return apiResponse.json()
+}
+
+export {fetcher,scanIn}

package.json

@@ -12,9 +12,11 @@
     "dev:build": "next build"
   },
   "devDependencies": {
+    "@faker-js/faker": "^8.4.1",
     "@next/bundle-analyzer": "^14.2.5",
+    "@playwright/test": "^1.46.0",
     "@svgr/webpack": "^8.1.0",
-    "@tinacms/cli": "^1.5.52",
+    "@tinacms/cli": "^1.5.53",
     "@types/js-cookie": "^3.0.0",
     "@types/node": "^20.14.4",
     "@types/react": "^18.3.3",
@@ -60,7 +62,7 @@
     "swr": "^2.2.5",
     "tailwind-merge": "^2.3.0",
     "tailwindcss": "^3.2.4",
-    "tinacms": "^2.1.0",
+    "tinacms": "^2.1.1",
     "typescript": "^5.5.3",
     "yup": "^1.4.0"
   },