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>
This commit is contained in:
isaacclad
@@ -14,6 +14,8 @@
|
||||
'icon' => '<path stroke-linecap="round" stroke-linejoin="round" d="M20.25 7.5l-.625 10.632a2.25 2.25 0 0 1-2.247 2.118H6.622a2.25 2.25 0 0 1-2.247-2.118L3.75 7.5M10 11.25h4M3.375 7.5h17.25c.621 0 1.125-.504 1.125-1.125v-1.5c0-.621-.504-1.125-1.125-1.125H3.375c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125Z" />'],
|
||||
['name' => 'Categories', 'route' => route('woo.categories.index'), 'active' => request()->routeIs('woo.categories.*'),
|
||||
'icon' => '<path stroke-linecap="round" stroke-linejoin="round" d="M9.568 3H5.25A2.25 2.25 0 0 0 3 5.25v4.318c0 .597.237 1.17.659 1.591l9.581 9.581c.699.699 1.78.872 2.607.33a18.095 18.095 0 0 0 5.223-5.223c.542-.827.369-1.908-.33-2.607L11.16 3.66A2.25 2.25 0 0 0 9.568 3Z" /><path stroke-linecap="round" stroke-linejoin="round" d="M6 6h.008v.008H6V6Z" />'],
|
||||
['name' => 'Integrations', 'route' => route('woo.integrations.index'), 'active' => request()->routeIs('woo.integrations.*'),
|
||||
'icon' => '<path stroke-linecap="round" stroke-linejoin="round" d="M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622 1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244" />'],
|
||||
['name' => 'Stores', 'route' => route('woo.stores.index'), 'active' => request()->routeIs('woo.stores.*'),
|
||||
'icon' => '<path stroke-linecap="round" stroke-linejoin="round" d="M13.5 21v-7.5a.75.75 0 0 1 .75-.75h3a.75.75 0 0 1 .75.75V21m-4.5 0H2.36m11.14 0H18m0 0h3.64m-1.39 0V9.349M3.75 21V9.349m0 0a3.001 3.001 0 0 0 3.75-.615A2.993 2.993 0 0 0 9.75 9.75c.896 0 1.7-.393 2.25-1.016a2.993 2.993 0 0 0 2.25 1.016c.896 0 1.7-.393 2.25-1.016a3.001 3.001 0 0 0 3.75.614m-16.5 0a3.004 3.004 0 0 1-.621-4.72L4.318 3.44A1.5 1.5 0 0 1 5.378 3h13.243a1.5 1.5 0 0 1 1.06.44l1.19 1.189a3 3 0 0 1-.621 4.72M6.75 18h3.75a.75.75 0 0 0 .75-.75V13.5a.75.75 0 0 0-.75-.75H6.75a.75.75 0 0 0-.75.75v3.75c0 .414.336.75.75.75Z" />'],
|
||||
];
|
||||
|
||||
@@ -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">→</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>
|
||||
@@ -2,6 +2,15 @@
|
||||
<x-slot name="title">Settings</x-slot>
|
||||
|
||||
<x-settings.page description="Account links and preferences for Woo Manager.">
|
||||
<x-settings.card title="Integrations">
|
||||
<p class="text-sm text-slate-600">See which WooCommerce marketing and shipping extensions are installed on your store.</p>
|
||||
<a href="{{ route('woo.integrations.index') }}"
|
||||
class="mt-4 inline-flex items-center gap-2 text-sm font-medium text-indigo-600 hover:text-indigo-800">
|
||||
View integrations
|
||||
<span aria-hidden="true">→</span>
|
||||
</a>
|
||||
</x-settings.card>
|
||||
|
||||
<x-settings.card title="Stores & sync">
|
||||
<p class="text-sm text-slate-600">Connect WooCommerce stores from the WordPress plugin, then manage them here.</p>
|
||||
<a href="{{ route('woo.stores.index') }}"
|
||||
|
||||
Reference in New Issue
Block a user