platform-admin/alva
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Bytte till popup-vy för betalning

Browse Source 
X-Lovable-Edit-ID: edt-75080dec-50a2-475e-a4ae-cb179769dbd0
Co-authored-by: wolfoftyreso-debug <250630591+wolfoftyreso-debug@users.noreply.github.com>
This commit is contained in:
gpt-engineer-app[bot]
2026-07-11 10:42:56 +00:00
parent 2e922e4023 399b720781
commit c6b1b25b33
1 changed files with 51 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/PlansSection.tsx
+51 -30
View File
@@ -28,6 +28,7 @@ type PaymentMethod = "card" | "invoice";
const PlansSection = () => {
const [employees, setEmployees] = useState(10);
const [loadingMethod, setLoadingMethod] = useState<PaymentMethod | null>(null);
const [showPaymentOptions, setShowPaymentOptions] = useState(false);
const { products, isLoading: productsLoading } = useShopifyProducts(
"product_type:Abonnemang"
@@ -163,40 +164,60 @@ const PlansSection = () => {
<div className="text-muted-foreground text-xs mt-1">exklusive moms</div>
</div>
{/* Two CTAs — pick payment method, then straight to Shopify checkout */}
<div className="grid grid-cols-1 sm:grid-cols-2 gap-3 pt-2">
{!showPaymentOptions ? (
<button
onClick={() => handleStart("card")}
onClick={() => setShowPaymentOptions(true)}
disabled={isBusy}
className="btn-classic py-4 px-4 text-base rounded-sm disabled:opacity-50 flex items-center justify-center gap-2"
className="btn-classic w-full py-4 text-base md:text-lg rounded-sm disabled:opacity-50 mt-2"
>
{loadingMethod === "card" ? (
<Loader2 className="w-5 h-5 animate-spin" />
) : (
<>
<CreditCard className="w-5 h-5" />
<span>Automatiskt varje månad</span>
</>
)}
Starta abonnemang
</button>
<button
onClick={() => handleStart("invoice")}
disabled={isBusy}
className="py-4 px-4 text-base rounded-sm border-2 border-primary text-primary hover:bg-primary hover:text-primary-foreground transition-colors disabled:opacity-50 flex items-center justify-center gap-2"
>
{loadingMethod === "invoice" ? (
<Loader2 className="w-5 h-5 animate-spin" />
) : (
<>
<FileText className="w-5 h-5" />
<span>Månadsfaktura</span>
</>
)}
</button>
</div>
<p className="text-muted-foreground text-xs">
Du slutför beställningen säkert hos Shopify.
</p>
) : (
<div className="animate-fade-in space-y-3 pt-2">
<p className="text-muted-foreground text-sm">
Välj betalningsmetod
</p>
<div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
<button
onClick={() => handleStart("card")}
disabled={isBusy}
className="btn-classic py-4 px-4 text-base rounded-sm disabled:opacity-50 flex items-center justify-center gap-2"
>
{loadingMethod === "card" ? (
<Loader2 className="w-5 h-5 animate-spin" />
) : (
<>
<CreditCard className="w-5 h-5" />
<span>Automatiskt varje månad</span>
</>
)}
</button>
<button
onClick={() => handleStart("invoice")}
disabled={isBusy}
className="py-4 px-4 text-base rounded-sm border-2 border-primary text-primary hover:bg-primary hover:text-primary-foreground transition-colors disabled:opacity-50 flex items-center justify-center gap-2"
>
{loadingMethod === "invoice" ? (
<Loader2 className="w-5 h-5 animate-spin" />
) : (
<>
<FileText className="w-5 h-5" />
<span>Månadsfaktura</span>
</>
)}
</button>
</div>
<button
onClick={() => setShowPaymentOptions(false)}
className="text-muted-foreground text-xs underline hover:text-foreground"
>
← Tillbaka
</button>
<p className="text-muted-foreground text-xs">
Du slutför beställningen säkert hos Shopify.
</p>
</div>
)}
</div>
</div>
</div>