# 06 - Shipping UI Changes

**Status: NOT STARTED**

## Summary

Add a direct link from the BigOrder page to the corresponding Shopify order page in Shopify's admin interface, so staff don't have to manually navigate to Shopify.

## Current State

The BigOrder page displays the `shopifyOrderName` (e.g., "#BS12345") but does not link to Shopify's admin interface. Staff must manually navigate to Shopify to access customer communication, refunds, or order modifications.

## Requirements

1. Add a clickable link next to the order number that opens the Shopify admin order page in a new tab
2. Add a Shopify link icon in order table rows

## Files to Modify

| File | Change |
|------|--------|
| `webapps/src/components/BigOrders/BigOrderComponent.jsx` | Add Shopify admin link next to order number |
| `webapps/src/components/BigOrders/BigOrderTableCells.jsx` | Add Shopify link icon in order tables |
| `api/src/fabricator/FabricatorSchemas.ts` | Ensure `shopifyOrderId` is always available for URL construction |

## Implementation Details

Shopify admin order URL pattern:
```
https://bigscreenvr.myshopify.com/admin/orders/{shopify_order_id}
```

Example component:
```jsx
<Button
    as="a"
    href={`https://bigscreenvr.myshopify.com/admin/orders/${bigOrder.shopifyOrderId}`}
    target="_blank"
    icon="external"
    content="View in Shopify"
/>
```

## Implementation Notes

- This is a small, self-contained change
- No backend changes needed if `shopifyOrderId` is already available on the frontend
- Opens in new tab to avoid navigating away from Arda