Add Integrations hub for Woo marketing and shipping extensions.

Surface Google, Pinterest, Snapchat, and shipping status from the WordPress plugin with deep links to finish setup in WooCommerce. Co-authored-by: Cursor <cursoragent@cursor.com>
2026-07-08 07:10:06 +00:00
parent 60673c9adf
commit 5a0022af72
10 changed files with 384 additions and 4 deletions
@@ -0,0 +1,91 @@
+<x-user-layout>
+    <x-slot name="title">Integrations</x-slot>
+
+    <div class="space-y-6">
+        <div class="flex flex-wrap items-start justify-between gap-4">
+            <div>
+                <h1 class="hidden text-xl font-semibold text-slate-900 lg:block">Integrations</h1>
+                <p class="mt-1 text-sm text-slate-500">
+                    @if($store)
+                        Marketing and shipping extensions for {{ $store->site_name ?? $store->site_url }}.
+                    @else
+                        Connect a store to see which WooCommerce extensions are installed and configured.
+                    @endif
+                </p>
+            </div>
+            @if($store && ! $reachable)
+                <span class="rounded-full bg-amber-50 px-3 py-1 text-xs font-medium text-amber-800 ring-1 ring-amber-200">
+                    Store unreachable — update the Ladill plugin on WordPress
+                </span>
+            @endif
+        </div>
+
+        @if(! $store)
+            <div class="rounded-2xl border border-dashed border-slate-200 bg-white px-6 py-10 text-center">
+                <p class="text-sm text-slate-600">No active store selected.</p>
+                <a href="{{ route('woo.stores.index') }}"
+                   class="mt-4 inline-flex items-center gap-2 text-sm font-medium text-indigo-600 hover:text-indigo-800">
+                    Connect a WooCommerce store
+                    <span aria-hidden="true">&rarr;</span>
+                </a>
+            </div>
+        @endif
+
+        <div class="grid gap-4 lg:grid-cols-2">
+            @foreach($integrations as $integration)
+                @php
+                    $state = $integration['state'];
+                    $badge = match ($state) {
+                        'connected' => ['Connected', 'bg-emerald-50 text-emerald-700 ring-emerald-200'],
+                        'available', 'needs_setup' => $integration['installed']
+                            ? ['Needs setup', 'bg-amber-50 text-amber-800 ring-amber-200']
+                            : ['Not installed', 'bg-slate-100 text-slate-600 ring-slate-200'],
+                        'not_installed' => ['Not installed', 'bg-slate-100 text-slate-600 ring-slate-200'],
+                        'no_store' => ['No store', 'bg-slate-100 text-slate-600 ring-slate-200'],
+                        default => ['Unavailable', 'bg-rose-50 text-rose-700 ring-rose-200'],
+                    };
+                @endphp
+                <article class="flex h-full flex-col rounded-2xl border border-slate-200 bg-white p-5 shadow-sm">
+                    <div class="flex items-start justify-between gap-3">
+                        <div>
+                            <p class="text-xs font-semibold uppercase tracking-wide text-slate-400">{{ $integration['category'] }}</p>
+                            <h2 class="mt-1 text-base font-semibold text-slate-900">{{ $integration['name'] }}</h2>
+                        </div>
+                        <span class="shrink-0 rounded-full px-2.5 py-1 text-xs font-medium ring-1 {{ $badge[1] }}">{{ $badge[0] }}</span>
+                    </div>
+
+                    <p class="mt-3 flex-1 text-sm text-slate-600">{{ $integration['description'] }}</p>
+
+                    @if($integration['summary'])
+                        <p class="mt-3 text-sm text-slate-500">{{ $integration['summary'] }}</p>
+                    @endif
+
+                    <div class="mt-5 flex flex-wrap items-center gap-2">
+                        @if($integration['manage_url'])
+                            <a href="{{ $integration['manage_url'] }}" target="_blank" rel="noopener noreferrer"
+                               class="inline-flex items-center rounded-xl bg-indigo-600 px-4 py-2 text-sm font-semibold text-white hover:bg-indigo-700">
+                                Manage in WordPress
+                            </a>
+                        @elseif($integration['install_url'] && in_array($state, ['not_installed', 'no_store', 'unavailable'], true))
+                            <a href="{{ $integration['install_url'] }}" target="_blank" rel="noopener noreferrer"
+                               class="inline-flex items-center rounded-xl border border-slate-200 bg-white px-4 py-2 text-sm font-medium text-slate-700 hover:bg-slate-50">
+                                Get extension
+                            </a>
+                        @endif
+
+                        @if($integration['docs_url'])
+                            <a href="{{ $integration['docs_url'] }}" target="_blank" rel="noopener noreferrer"
+                               class="inline-flex items-center rounded-xl px-3 py-2 text-sm font-medium text-indigo-600 hover:text-indigo-800">
+                                Docs
+                            </a>
+                        @endif
+                    </div>
+                </article>
+            @endforeach
+        </div>
+
+        <div class="rounded-2xl border border-slate-200 bg-slate-50 px-5 py-4 text-sm text-slate-600">
+            Ladill surfaces official WooCommerce extensions installed on your store. OAuth, catalog sync, and ad setup still happen in WordPress — open <strong>Manage in WordPress</strong> to finish configuration.
+        </div>
+    </div>
+</x-user-layout>