Skip to content

Commit a1e7f8c

Browse files
alexwpenginealexwpengine
committed
grouped products, clear up code, update db
1 parent f6d4694 commit a1e7f8c

File tree

25 files changed

+736
-423
lines changed

25 files changed

+736
-423
lines changed

‎examples/next/woocommerce/README.md‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -128,6 +128,7 @@ Install and activate these plugins in your WordPress admin:
128128
1. **WPGraphQL** - Exposes WordPress data via GraphQL
129129
2. **WPGraphQL Headless Login** - Enables authentication for headless setups
130130
3. **WPGraphQL for WooCommerce (WooGraphQL)** - Adds WooCommerce GraphQL support
131+
4. **WooCommerce**
131132

132133
### Plugin Configuration
133134

@@ -162,3 +163,5 @@ NEXT_PUBLIC_WORDPRESS_URL=https://your-wordpress-site.com
162163
npm run dev
163164
# or yarn dev / pnpm dev / bun dev
164165
```
166+
### Notes
167+
1. Single order (thank you page) can be accessed via http://localhost:3000/order-received/193?key=wc_order_UENFOwBPGaDlx. It's based on the wc_key instead of order id.

‎examples/next/woocommerce/example-app/src/components/Account/Login/LoginForm.tsx‎

Lines changed: 8 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ export default function LoginForm() {
1111
const [success, setSuccess] = useState(false);
1212

1313
const handleSubmit = async (e) => {
14-
e.preventDefault(); // ✅ Prevent page refresh
14+
e.preventDefault();
1515

1616
setError("");
1717
setSuccess(false);
@@ -25,20 +25,15 @@ export default function LoginForm() {
2525
setPassword("");
2626
} else {
2727
setError("Login failed. Please try again.");
28-
console.error("❌ Login failed - no success flag");
2928
}
30-
} catch (err) {
31-
console.error("❌ Login error caught:", err);
32-
33-
// ✅ Extract error message from different error formats
29+
} catch (err) {
30+
3431
let errorMessage = "An error occurred during login";
3532

3633
if (err.graphQLErrors && err.graphQLErrors.length > 0) {
37-
errorMessage = err.graphQLErrors[0].message;
38-
console.error("❌ GraphQL Error:", err.graphQLErrors[0]);
34+
errorMessage = err.graphQLErrors[0].message;
3935
} else if (err.networkError) {
40-
errorMessage = "Network error. Please check your connection.";
41-
console.error("❌ Network Error:", err.networkError);
36+
errorMessage = "Network error. Please check your connection.";
4237
} else if (err.message) {
4338
errorMessage = err.message;
4439
}
@@ -109,8 +104,7 @@ export default function LoginForm() {
109104
"Login"
110105
)}
111106
</button>
112-
113-
{/* ✅ Success Alert */}
107+
114108
{success && (
115109
<Alert className="bg-green-50 border-green-200">
116110
<div className="flex items-center">
@@ -129,9 +123,7 @@ export default function LoginForm() {
129123
</div>
130124
</div>
131125
</Alert>
132-
)}
133-
134-
{/* ✅ Error Alert */}
126+
)}
135127
{error && (
136128
<Alert variant="destructive" className="bg-red-50 border-red-200">
137129
<div className="flex items-start">
@@ -161,9 +153,7 @@ export default function LoginForm() {
161153
</button>
162154
</div>
163155
</Alert>
164-
)}
165-
166-
{/* ✅ Debug Info (remove in production) */}
156+
)}
167157
<div className="mt-4 p-3 bg-gray-50 border border-gray-200 rounded-md text-xs">
168158
<p className="font-semibold text-gray-700 mb-1">Debug Info:</p>
169159
<p className="text-gray-600">Loading: {loading ? "Yes" : "No"}</p>

‎examples/next/woocommerce/example-app/src/components/Cart/Cart.tsx‎

Lines changed: 5 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ export default function Cart() {
3333
setFullCart(data.cart);
3434
}
3535
},
36-
onError: (error) => console.error("❌ GetCart error:", error),
36+
onError: (error) => console.error("GetCart error:", error),
3737
fetchPolicy: "network-only",
3838
errorPolicy: "all",
3939
});
@@ -80,7 +80,6 @@ export default function Cart() {
8080
}
8181
};
8282

83-
// ✅ Updated handleApplyCoupon with error handling
8483
const handleApplyCoupon = async (e: React.FormEvent) => {
8584
e.preventDefault();
8685
if (!couponCode.trim()) return;
@@ -113,7 +112,6 @@ export default function Cart() {
113112
}
114113
};
115114

116-
// ✅ Updated handleRemoveCoupon with error handling
117115
const handleRemoveCoupon = async (code: string) => {
118116
setCouponError(null);
119117
setCouponSuccess(null);
@@ -176,7 +174,7 @@ export default function Cart() {
176174
href="/shop"
177175
className="inline-block bg-blue-600 text-white px-6 py-3 rounded-md hover:bg-blue-700 transition-colors font-medium"
178176
>
179-
Continue Shopping
177+
Start Shopping
180178
</Link>
181179
</div>
182180
);
@@ -277,8 +275,7 @@ export default function Cart() {
277275
onClick={() => handleRemoveItem(item.key)}
278276
disabled={isUpdating}
279277
className="text-red-600 hover:text-red-800 text-sm font-medium disabled:opacity-50"
280-
>
281-
{isUpdating ? "Removing..." : "Remove"}
278+
>Remove
282279
</button>
283280
</div>
284281
</div>
@@ -324,7 +321,7 @@ export default function Cart() {
324321
disabled={isUpdating}
325322
className="text-red-600 hover:text-red-800 text-sm font-medium disabled:opacity-50"
326323
>
327-
{isUpdating ? "Removing..." : "Remove"}
324+
Remove
328325
</button>
329326
</div>
330327
</div>
@@ -410,8 +407,7 @@ export default function Cart() {
410407
</div>
411408
</div>
412409
)}
413-
414-
{/* ✅ Error Message */}
410+
415411
{couponError && (
416412
<div className="mt-4 p-3 bg-red-50 border border-red-200 rounded-md">
417413
<div className="flex items-start">
@@ -446,7 +442,6 @@ export default function Cart() {
446442
</div>
447443
)}
448444

449-
{/* ✅ Success Message */}
450445
{couponSuccess && (
451446
<div className="mt-4 p-3 bg-green-50 border border-green-200 rounded-md">
452447
<div className="flex items-start">

‎examples/next/woocommerce/example-app/src/components/Cart/MiniCart.tsx‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ export default function MiniCart({ isVisible = false, onClose }: MiniCartVisualP
1010
updateCartItemQuantity,
1111
removeItem,
1212
cartLoading,
13-
clearingCart, // ✅ Get clearing state from provider
13+
clearingCart,
1414
refreshCart,
1515
cartItemCount,
1616
clearCart,
@@ -55,7 +55,6 @@ export default function MiniCart({ isVisible = false, onClose }: MiniCartVisualP
5555

5656
if (!isVisible) return null;
5757

58-
// ✅ Combined loading state
5958
const isLoading = cartLoading || clearingCart;
6059

6160
return (
@@ -226,7 +225,7 @@ export default function MiniCart({ isVisible = false, onClose }: MiniCartVisualP
226225
</button>
227226
<button
228227
onClick={handleClearCart}
229-
disabled={clearingCart} // ✅ Use clearing state
228+
disabled={clearingCart}
230229
className="w-full bg-red-600 text-white py-2 px-4 rounded-md hover:bg-red-700 transition-colors font-medium text-sm disabled:opacity-50"
231230
>
232231
{clearingCart ? "Clearing..." : "Clear Cart"}

‎examples/next/woocommerce/example-app/src/components/Checkout/Checkout.tsx‎

Lines changed: 1 addition & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,6 @@ export default function Checkout() {
4040
const [customer, setCustomer] = useState<Customer | null>(null);
4141
const [checkoutProcessing, setCheckoutProcessing] = useState(false);
4242
const [checkoutError, setCheckoutError] = useState<string | null>(null);
43-
// ✅ Add state for guest checkout data
4443
const [guestCheckoutData, setGuestCheckoutData] = useState<CheckoutFormData | null>(null);
4544

4645
const { user, isLoading: authLoading } = useAuthAdmin();
@@ -123,7 +122,7 @@ export default function Checkout() {
123122
const [checkoutMutation, { loading: checkoutLoading }] = useMutation(CHECKOUT_MUTATION, {
124123
onCompleted: (data) => {
125124
},
126-
onError: (error) => console.error("❌ Checkout error:", error),
125+
onError: (error) => console.error("Checkout error:", error),
127126
});
128127

129128
const removeTypename = (obj: any): any => {
@@ -146,7 +145,6 @@ export default function Checkout() {
146145
return obj;
147146
};
148147

149-
// ✅ Validate guest checkout data
150148
const validateGuestCheckout = (): boolean => {
151149
if (!guestCheckoutData) {
152150
setCheckoutError("Please fill in all required fields");
@@ -192,18 +190,15 @@ export default function Checkout() {
192190
try {
193191
let billingData, shippingData;
194192

195-
// ✅ Use customer data if authenticated, otherwise use guest data
196193
if (isAuthenticated && customer) {
197194
billingData = removeTypename(customer.billing);
198195
shippingData = removeTypename(customer.shipping);
199196
} else {
200-
// ✅ Validate guest checkout data
201197
if (!validateGuestCheckout()) {
202198
setCheckoutProcessing(false);
203199
return { success: false, error: checkoutError };
204200
}
205201

206-
// ✅ Transform guest data to match WooCommerce format
207202
const { billing, shipping, shipToDifferentAddress } = guestCheckoutData!;
208203

209204
billingData = {
@@ -219,7 +214,6 @@ export default function Checkout() {
219214
state: billing.state,
220215
};
221216

222-
// ✅ Use billing address for shipping if not different
223217
shippingData = shipToDifferentAddress
224218
? {
225219
firstName: shipping.firstName,
@@ -275,7 +269,6 @@ export default function Checkout() {
275269
}
276270
};
277271

278-
// ✅ Check if checkout button should be enabled
279272
const isCheckoutDisabled = isAuthenticated
280273
? !customer || checkoutProcessing
281274
: !guestCheckoutData || checkoutProcessing;
@@ -323,7 +316,6 @@ export default function Checkout() {
323316
<Addresses billing={customer.billing} shipping={customer.shipping} refetch={getCustomer} />
324317
)}
325318

326-
{/* ✅ Pass callback to get guest data */}
327319
{!isAuthenticated && <CheckoutFields onDataChange={setGuestCheckoutData} />}
328320
</div>
329321
</div>
@@ -494,7 +486,6 @@ export default function Checkout() {
494486
{checkoutProcessing ? "Processing..." : "Place Order"}
495487
</button>
496488

497-
{/* ✅ Helper text for guests */}
498489
{!isAuthenticated && !guestCheckoutData && (
499490
<p className="mt-2 text-sm text-gray-500 text-center">Please fill in all required fields to proceed</p>
500491
)}

‎examples/next/woocommerce/example-app/src/components/OrderReceived/OrderReceived.tsx‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -111,7 +111,7 @@ export default function OrderReceived({ order }: { order: Order | null }) {
111111
<div className="p-6 border-b border-gray-200">
112112
<h3 className="text-lg font-semibold text-gray-900 mb-4">Order Items</h3>
113113
<div className="space-y-3">
114-
{order.lineItems?.nodes?.map((item) => (
114+
{order.lineItems?.nodes?.map((item) => (
115115
<OrderItem key={item.id} item={item} />
116116
))}
117117
</div>
@@ -198,11 +198,10 @@ export default function OrderReceived({ order }: { order: Order | null }) {
198198
</div>
199199
</div>
200200

201-
{/* Action Buttons */}
202201
<div className="flex flex-col sm:flex-row gap-4 justify-center">
203202
<Link
204203
href="/my-account/orders"
205-
className="inline-flex items-center justify-center px-6 py-3 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors font-medium"
204+
className="inline-flex 77 ems-center justify-center px-6 py-3 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors font-medium"
206205
>
207206
<svg className="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
208207
<path

0 commit comments

Comments
 (0)