11import React , { useState , useEffect } from "react" ;
2- import { useNavigate } from "react-router-dom" ;
2+ import { useNavigate , Link } from "react-router-dom" ;
3+ import editIcon from "../assets/editIcon.svg" ;
34import "./checkout.css" ;
45import { GetProductPriceWithSize } from "../products/GetProductPriceWithSize" ;
56
@@ -12,6 +13,14 @@ function CheckoutDetails() {
1213 const [ shipping , setShipping ] = useState ( 0 ) ;
1314 const [ paying , setPaying ] = useState ( 1 ) ;
1415 const [ location , setLocation ] = useState ( "" ) ;
16+ const DEFAULT_PICKUP_OPTIONS = [
17+ "Dollar General (OH-309, Iberia, OH)" ,
18+ "Northmor School (Galion, OH)" ,
19+ "St. Joseph Catholic Church (Galion, OH)" ,
20+ "St. Joseph Catholic School (Galion, OH)"
21+ ] ;
22+ const [ pickupOptions , setPickupOptions ] = useState ( DEFAULT_PICKUP_OPTIONS ) ;
23+ const [ isAdmin , setIsAdmin ] = useState ( null ) ;
1524 const [ address , setAddress ] = useState ( "" ) ;
1625 const [ city , setCity ] = useState ( "" ) ;
1726 const [ state , setState ] = useState ( "" ) ;
@@ -31,6 +40,12 @@ function CheckoutDetails() {
3140
3241 // API Calls
3342 useEffect ( ( ) => {
43+ // fetch admin status for showing edit button
44+ fetch ( "/api/admin/admin.php" )
45+ . then ( ( response ) => response . json ( ) )
46+ . then ( ( data ) => setIsAdmin ( data . admin ) )
47+ . catch ( ( err ) => { console . error ( "Failed to fetch admin status" , err ) ; setIsAdmin ( 0 ) ; } ) ;
48+
3449 let oID = 0 ;
3550
3651 fetch ( "/api/admin/session.php" )
@@ -86,6 +101,48 @@ function CheckoutDetails() {
86101 setCustomHighTotal ( total ) ;
87102 }
88103 } ) ;
104+
105+ // fetch pickup locations from static text (expects a semicolon-separated string)
106+ ( async ( ) => {
107+ try {
108+ const formData = new FormData ( ) ;
109+ formData . append ( 'page' , 'checkout' ) ;
110+ formData . append ( 'location' , 'pickupLocations' ) ;
111+ const resp = await fetch ( '/api/admin/getStaticText.php' , {
112+ method : 'POST' ,
113+ body : formData ,
114+ } ) ;
115+ const data = await resp . json ( ) ;
116+ let items = [ ] ;
117+ if ( Array . isArray ( data ) ) {
118+ if ( data . every ( d => typeof d === 'string' ) ) {
119+ items = data . map ( s => s . trim ( ) ) . filter ( Boolean ) ;
120+ } else if ( data . every ( d => d && typeof d === 'object' && 'text' in d ) ) {
121+ items = data . map ( d => String ( d . text ) . trim ( ) ) . filter ( Boolean ) ;
122+ } else {
123+ items = data . map ( d => String ( d ) . trim ( ) ) . filter ( Boolean ) ;
124+ }
125+ } else if ( data && typeof data === 'object' ) {
126+ if ( 'text' in data ) {
127+ items = String ( data . text ) . split ( ';' ) . map ( s => s . trim ( ) ) . filter ( Boolean ) ;
128+ } else {
129+ items = Object . values ( data ) . map ( v => String ( v ) . trim ( ) ) . filter ( Boolean ) ;
130+ }
131+ } else if ( typeof data === 'string' ) {
132+ items = data . split ( ';' ) . map ( s => s . trim ( ) ) . filter ( Boolean ) ;
133+ }
134+
135+ if ( items . length > 0 ) {
136+ items . sort ( ( a , b ) => a . localeCompare ( b ) ) ;
137+ setPickupOptions ( items ) ;
138+ } else {
139+ setPickupOptions ( DEFAULT_PICKUP_OPTIONS ) ;
140+ }
141+ } catch ( err ) {
142+ console . error ( 'Failed to load pickup locations:' , err ) ;
143+ setPickupOptions ( DEFAULT_PICKUP_OPTIONS ) ;
144+ }
145+ } ) ( ) ;
89146 } , [ ] ) ;
90147
91148 useEffect ( ( ) => {
@@ -495,7 +552,19 @@ function CheckoutDetails() {
495552 </ div >
496553 < div className = "containerRow" >
497554 < div className = "mobileSplit100" >
498- < input type = "text" id = "adr" name = "address" className = "default-input" placeholder = "Iberia Dollar General" onChange = { ( event ) => setLocation ( event . target . value ) } />
555+ < select id = "pickupLocation" name = "pickupLocation" className = "default-input" value = { location } onChange = { ( event ) => setLocation ( event . target . value ) } >
556+ < option value = "" > Select a pickup location</ option >
557+ { pickupOptions && pickupOptions . length > 0 ? pickupOptions . map ( ( opt , idx ) => (
558+ < option key = { idx } value = { opt } > { opt } </ option >
559+ ) ) : null }
560+ </ select >
561+ { isAdmin > 0 && (
562+ < div style = { { marginTop : 8 } } >
563+ < Link to = "/editPickupLocations" className = "editLink" >
564+ < img src = { editIcon } alt = "Edit Icon" className = "editIcon" />
565+ </ Link >
566+ </ div >
567+ ) }
499568 </ div >
500569 </ div >
501570 < br /> < br />
0 commit comments