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

Changes

Browse Source 
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:52 +00:00
parent 2e922e4023
commit 399b720781
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 PlansSection = () => {
const [employees, setEmployees] = useState(10); const [employees, setEmployees] = useState(10);
const [loadingMethod, setLoadingMethod] = useState<PaymentMethod | null>(null); const [loadingMethod, setLoadingMethod] = useState<PaymentMethod | null>(null);
const [showPaymentOptions, setShowPaymentOptions] = useState(false);
const { products, isLoading: productsLoading } = useShopifyProducts( const { products, isLoading: productsLoading } = useShopifyProducts(
"product_type:Abonnemang" "product_type:Abonnemang"
@@ -163,40 +164,60 @@ const PlansSection = () => {
<div className="text-muted-foreground text-xs mt-1">exklusive moms</div> <div className="text-muted-foreground text-xs mt-1">exklusive moms</div>
</div> </div>
{/* Two CTAs — pick payment method, then straight to Shopify checkout */} {!showPaymentOptions ? (
<div className="grid grid-cols-1 sm:grid-cols-2 gap-3 pt-2">
<button <button
onClick={() => handleStart("card")} onClick={() => setShowPaymentOptions(true)}
disabled={isBusy} 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" ? ( Starta abonnemang
<Loader2 className="w-5 h-5 animate-spin" />
) : (
<>
<CreditCard className="w-5 h-5" />
<span>Automatiskt varje månad</span>
</>
)}
</button> </button>
<button ) : (
onClick={() => handleStart("invoice")} <div className="animate-fade-in space-y-3 pt-2">
disabled={isBusy} <p className="text-muted-foreground text-sm">
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" Välj betalningsmetod
> </p>
{loadingMethod === "invoice" ? ( <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
<Loader2 className="w-5 h-5 animate-spin" /> <button
) : ( onClick={() => handleStart("card")}
<> disabled={isBusy}
<FileText className="w-5 h-5" /> className="btn-classic py-4 px-4 text-base rounded-sm disabled:opacity-50 flex items-center justify-center gap-2"
<span>Månadsfaktura</span> >
</> {loadingMethod === "card" ? (
)} <Loader2 className="w-5 h-5 animate-spin" />
</button> ) : (
</div> <>
<p className="text-muted-foreground text-xs"> <CreditCard className="w-5 h-5" />
Du slutför beställningen säkert hos Shopify. <span>Automatiskt varje månad</span>
</p> </>
)}
</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> </div>
</div> </div>