fulldev-ui 0.5.0-beta.9 → 0.6.0-beta-5

package/src/components/Cart.astro

@@ -1,33 +1,37 @@
 ---
 import type { ComponentProps } from 'astro/types'
-import CartList from 'fulldev-ui/components/CartList.astro'
+import CartList from 'fulldev-ui/components/CartList.svelte'
 import CartSummary from 'fulldev-ui/components/CartSummary.astro'
 import Drawer from 'fulldev-ui/components/Drawer.astro'
+import Button from './Button.astro'
+import Icon from './Icon.astro'
+import Input from './Input.astro'
+import Select from './Select.astro'
 
-interface Props extends ComponentProps<typeof Drawer> {}
+interface Props extends Omit<ComponentProps<typeof Drawer>, 'id' | 'icon'> {}
 
-const {
-  icon = 'shopping-cart',
-  color = 'brand',
-  id = 'cart',
-  if: ifProp,
-  ...rest
-} = Astro.props
+const { variant = 'ghost', size = 'md', ...rest } = Astro.props
 ---
 
+<Select if={false} />
+<Button if={false} />
+<Input if={false} />
+<Icon if={false} />
+
 <Drawer
-  if={ifProp}
   class:list="cart"
+  id="cart"
+  icon="shopping-cart"
+  {variant}
+  {size}
   {icon}
-  {color}
-  {id}
   {...rest}
 >
-  <CartList />
+  <CartList client:load />
   <CartSummary slot="footer" />
 </Drawer>
 
-<style lang="scss" is:global>
+<style is:global>
   @layer fulldev {
     form {
       display: flex;

package/src/components/CartAdd.svelte

@@ -0,0 +1,76 @@
+<script lang="ts">
+  import { updateQuantity } from 'fulldev-ui/stores/cart.svelte.ts'
+  import { tick } from 'svelte'
+
+  let { uid, quantity } = $props()
+  let inputElement: HTMLInputElement | null = $state(null)
+
+  async function onQuantityChange(e: Event) {
+    const target = e.target as HTMLInputElement
+    const value = Number(target.value)
+    updateQuantity(uid, value)
+
+    if (value === 11) {
+      await tick()
+      inputElement?.focus()
+    }
+  }
+</script>
+
+<label
+  class="quantity input select size-md"
+  for="quantity"
+>
+  {#if quantity > 10}
+    <input
+      bind:this={inputElement}
+      class="input-input"
+      name="quantity"
+      type="number"
+      value={quantity}
+      min={0}
+      onchange={onQuantityChange}
+    />
+  {:else}
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      class="icon size-md"
+    >
+      <path
+        fill="none"
+        stroke="currentColor"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        stroke-width="2"
+        d="m6 9l6 6l6-6"
+      ></path>
+    </svg>
+    <select
+      class="select-select"
+      value={quantity}
+      onchange={onQuantityChange}
+    >
+      {#each Array(10) as _, i}
+        <option
+          value={i + 1}
+          selected={quantity === i + 1}
+        >
+          {i + 1}
+        </option>
+      {/each}
+      <option
+        value="11"
+        selected={quantity > 10}
+      >
+        Meer
+      </option>
+    </select>
+  {/if}
+</label>
+
+<style lang="postcss">
+  .quantity {
+    @apply w-24;
+  }
+</style>

package/src/components/CartCheckout.svelte

@@ -0,0 +1,58 @@
+<script lang="ts">
+  import { cart } from 'fulldev-ui/stores/cart.svelte.ts'
+  import Stripe from 'stripe'
+
+  const { STRIPE_RESTRICTED_KEY, URL } = $props()
+
+  async function handeClick() {
+    if (!STRIPE_RESTRICTED_KEY) {
+      console.error('Stripe key is missing')
+      return
+    }
+    const stripe = new Stripe(STRIPE_RESTRICTED_KEY)
+    const checkoutConfig = {
+      success_url: `${URL}/checkout`,
+      mode: 'payment',
+      customer_creation: 'always',
+      shipping_address_collection: {
+        allowed_countries: ['NL'],
+      },
+      phone_number_collection: {
+        enabled: true,
+      },
+    }
+
+    const lineItems = $cart.map((item) => ({
+      quantity: item.quantity,
+      adjustable_quantity: {
+        enabled: true,
+        maximum: 999999,
+      },
+      price_data: {
+        currency: 'eur',
+        product_data: {
+          name:
+            item.variants && Object.values(item.variants || {}).length
+              ? `${item.title} - ${Object.values(item.variants).join(' / ')}`
+              : item.title,
+          // images: [item.image ? URL + item.image : ''],
+        },
+        unit_amount: Math.round(item.price || 0 * 100),
+      },
+    }))
+
+    const checkoutSession = await stripe.checkout.sessions.create({
+      line_items: lineItems,
+      ...checkoutConfig,
+    })
+
+    checkoutSession.url && window.location.replace(checkoutSession.url)
+  }
+</script>
+
+<button
+  class="button variant-primary size-md"
+  onclick={handeClick}
+>
+  Afrekenennn
+</button>

package/src/components/CartForm.svelte

@@ -0,0 +1,130 @@
+<script lang="ts">
+  import { cart, getUid, openCart } from 'fulldev-ui/stores/cart.svelte'
+
+  import { capitalize } from 'radash'
+  import CartQuantity from './CartQuantity.svelte'
+  import { formatPrice } from 'fulldev-ui/utils/cart'
+  import type { CollectionEntry } from 'astro:content'
+
+  interface Props {
+    product: CollectionEntry<'products'>
+  }
+
+  const { product }: Props = $props()
+  const { slug, data } = product
+
+  const form = $state({
+    slug: slug,
+    title: data.title,
+    price: data.price,
+    image: data.images?.[0]?.src || `/${data.images?.[0]?.id}`,
+    variants: Object.fromEntries(
+      Object.entries(data.variants ?? {}).map(([key, value]) => [key, value[0]])
+    ),
+    quantity: 1,
+  })
+
+  function handleSubmit(event: Event) {
+    event.preventDefault()
+
+    const variants = { ...form.variants }
+    const uid = getUid(slug, variants)
+    const item = { ...form, uid, variants }
+
+    const index = $cart.findIndex((i) => i.uid === item.uid)
+    if (index === -1) $cart = [...$cart, item]
+    else if ($cart[index]) $cart[index].quantity += form.quantity
+
+    openCart()
+  }
+</script>
+
+<form
+  class="cart-form"
+  onsubmit={handleSubmit}
+>
+  <input
+    name="slug"
+    type="hidden"
+    bind:value={form.slug}
+  />
+  <input
+    name="title"
+    type="hidden"
+    bind:value={form.title}
+  />
+  <input
+    name="price"
+    type="hidden"
+    bind:value={form.price}
+  />
+  <input
+    name="image"
+    type="hidden"
+    bind:value={form.image}
+  />
+  {#if form.variants}
+    {#each Object.entries(data.variants ?? {}) as [key, options]}
+      <label
+        class="select size-md"
+        for={`variant-${key}`}
+      >
+        <p class="label">
+          {capitalize(key)}
+        </p>
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 24 24"
+          class="icon size-md"
+        >
+          <path
+            fill="none"
+            stroke="currentColor"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="m6 9l6 6l6-6"
+          ></path>
+        </svg>
+        <select
+          class="select-select"
+          name={key}
+          disabled={data.soldout}
+          bind:value={form.variants[key]}
+        >
+          {#each options as option}
+            <option value={option}>{option}</option>
+          {/each}
+        </select>
+      </label>
+    {/each}
+  {/if}
+  {#if data.price}
+    <div class="price">
+      {formatPrice(data.price)}
+    </div>
+  {/if}
+
+  <div class="inputs">
+    <CartQuantity bind:value={form.quantity} />
+    <button
+      class="variant-primary button size-md cart-add"
+      type="submit"
+      disabled={data.soldout}
+    >
+      {data.soldout ? 'Uitverkocht' : 'Toevoegen aan winkelwagen'}
+    </button>
+  </div>
+</form>
+
+<style lang="postcss">
+  @layer fulldev {
+    .cart-form {
+      @apply flex flex-col gap-4;
+
+      .inputs {
+        @apply flex gap-2;
+      }
+    }
+  }
+</style>

package/src/components/CartList.svelte

@@ -0,0 +1,88 @@
+<script lang="ts">
+  import { cart } from 'fulldev-ui/stores/cart.svelte.ts'
+  import { formatPrice } from 'fulldev-ui/utils/cart'
+  import CartQuantity from './CartQuantity.svelte'
+
+  function removeItem(index: number) {
+    cart.update((currentCart) => {
+      currentCart.splice(index, 1)
+      return [...currentCart]
+    })
+  }
+</script>
+
+<div class="cart-list">
+  {#each $cart as item, index}
+    <div
+      class="cart-list-card"
+      data-slug={item.slug}
+    >
+      <img
+        class="image"
+        src={item.image}
+        alt={item.title}
+      />
+      <div class="cart-list-card-segment">
+        <div class="cart-list-card-content">
+          <h3 class="heading">{item.title}</h3>
+          {#if item.price}
+            <div class="price">{formatPrice(item.price)}</div>
+          {/if}
+        </div>
+        <div class="cart-list-card-actions">
+          <CartQuantity bind:value={item.quantity} />
+          <button
+            class="button variant-outline size-sm"
+            type="button"
+            aria-label="trash"
+            on:click={() => removeItem(index)}
+          >
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 24 24"
+              class="icon size-md"
+            >
+              <path
+                fill="none"
+                stroke="currentColor"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2"
+                d="M4 7h16m-10 4v6m4-6v6M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2l1-12M9 7V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v3"
+              ></path>
+            </svg>
+          </button>
+        </div>
+      </div>
+    </div>
+  {/each}
+</div>
+
+<style lang="postcss">
+  @layer fulldev {
+    .cart-list {
+      @apply flex flex-col text-foreground;
+
+      .cart-list-card {
+        @apply flex w-full gap-5;
+
+        &:not(:first-child) {
+          @apply mt-5 border-t pt-5;
+        }
+      }
+
+      .image {
+        @apply block h-auto w-24;
+      }
+
+      .cart-list-card-segment {
+        @apply flex h-full w-full flex-col justify-between gap-4;
+      }
+
+      .cart-list-card-content,
+      .cart-list-card-actions {
+        @apply flex justify-between gap-2;
+      }
+    }
+  }
+</style>

package/src/components/CartQuantity.svelte

@@ -0,0 +1,81 @@
+<script lang="ts">
+  import { tick } from 'svelte'
+
+  interface Props {
+    value: number
+    size?: 'sm' | 'md' | 'lg'
+    change?: (quantity: number) => void
+  }
+
+  let { value = $bindable(), size = 'md', change }: Props = $props()
+  let inputElement: HTMLInputElement | null = $state(null)
+
+  let quantity = $state(value)
+
+  async function handleChange() {
+    value = quantity
+    if (change) change(value)
+    if (value === 11) {
+      await tick()
+      inputElement?.focus()
+    }
+  }
+</script>
+
+<label
+  class="quantity input select size-{size}"
+  for="quantity"
+>
+  {#if value > 10}
+    <input
+      bind:this={inputElement}
+      bind:value={quantity}
+      class="input-input"
+      name="quantity"
+      type="number"
+      min={1}
+      onchange={handleChange}
+    />
+  {:else}
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      class="icon size-{size}"
+    >
+      <path
+        fill="none"
+        stroke="currentColor"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        stroke-width="2"
+        d="m6 9l6 6l6-6"
+      ></path>
+    </svg>
+    <select
+      class="select-select"
+      bind:value={quantity}
+      onchange={handleChange}
+    >
+      {#each Array(10) as _, i}
+        <option
+          value={i + 1}
+          selected={value === i + 1}
+        >
+          {i + 1}
+        </option>
+      {/each}
+      <option
+        value={11}
+        selected={value > 10}
+      >
+        Meer
+      </option>
+    </select>
+  {/if}
+</label>
+
+<style lang="postcss">
+  .quantity {
+    @apply w-20;
+  }
+</style>

package/src/components/CartSummary.astro

@@ -1,8 +1,9 @@
 ---
-import Button from './Button.astro'
+import { STRIPE_RESTRICTED_KEY, URL } from 'astro:env/client'
+import CartCheckout from './CartCheckout.svelte'
+import CartTotal from './CartTotal.svelte'
 import Element from './Element.astro'
-import Price from './Price.astro'
-import Text from './Text.astro'
+import Paragraph from './Paragraph.astro'
 
 interface Props {}
 
@@ -17,131 +18,41 @@ const { ...rest } = Astro.props
     class="row"
     {...rest}
   >
-    <Text
+    <Paragraph
       class:list="total"
       text="Totaal"
       contrast
     />
-    <Price value={10} />
+    <CartTotal client:load />
   </div>
-  <Text
+  <Paragraph
     class:list="shipping"
     text="Verzendkosten worden berekend bij het afrekenen."
   />
-  <Button
-    class:list="checkout-button"
-    variant="primary"
-    color="brand"
-    text="Afrekenen"
+  <CartCheckout
+    {STRIPE_RESTRICTED_KEY}
+    {URL}
+    client:load
   />
 </Element>
 
-<style is:global lang="scss">
+<style is:global>
   @layer fulldev {
     .cart-summary {
-      display: flex;
-      flex-direction: column;
-      gap: var(--space-3);
+      @apply flex flex-col gap-3 text-foreground;
 
       .price,
       .total {
-        font-size: var(--text-4);
+        @apply text-lg;
       }
 
       .row {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
+        @apply flex w-full justify-between;
       }
 
       .shipping {
-        font-size: var(--text-1);
+        @apply text-sm text-muted-foreground;
       }
     }
   }
 </style>
-
-<script>
-  import { $cart } from 'fulldev-ui/stores/cart.ts'
-  import { formatPrice } from 'fulldev-ui/utils/cart'
-  import Stripe from 'stripe'
-
-  const stripe = new Stripe(import.meta.env.PUBLIC_STRIPE_CHECKOUT_KEY)
-
-  function setPrice(items: any) {
-    const price = document.querySelector('.cart-summary .price')
-    if (price)
-      price.textContent = formatPrice(
-        items.reduce(
-          (acc: number, item: { price: number }) => acc + item.price,
-          0
-        )
-      )
-  }
-
-  document.addEventListener('astro:page-load', () => {
-    setPrice($cart.get())
-
-    $cart.subscribe((items: any) => {
-      setPrice(items)
-    })
-
-    const button = document.querySelector('.cart-summary .checkout-button')
-
-    button?.addEventListener('click', async () => {
-      const items = $cart.get()
-
-      const checkoutConfig = {
-        success_url: `${import.meta.env.PUBLIC_SITE_URL}/checkout`,
-        mode: 'payment',
-        customer_creation: 'always',
-        shipping_address_collection: {
-          allowed_countries: ['NL'],
-        },
-        phone_number_collection: {
-          enabled: true,
-        },
-      }
-
-      try {
-        const lineItems = items.map((item: any) => ({
-          price_data: {
-            currency: 'eur',
-            product: item.id,
-          },
-          quantity: 1,
-        }))
-
-        // @ts-ignore
-        const checkoutSession = await stripe.checkout.sessions.create({
-          line_items: lineItems,
-          ...checkoutConfig,
-        })
-
-        checkoutSession.url && window.location.replace(checkoutSession.url)
-      } catch (error) {
-        console.error(error)
-
-        const lineItems = items.map((item: any) => ({
-          quantity: 1,
-          price_data: {
-            currency: 'eur',
-            product_data: {
-              name: item.name,
-              images: [window],
-            },
-            unit_amount: Math.round(item.price * 100),
-          },
-        }))
-
-        // @ts-ignore
-        const checkoutSession = await stripe.checkout.sessions.create({
-          line_items: lineItems,
-          ...checkoutConfig,
-        })
-
-        checkoutSession.url && window.location.replace(checkoutSession.url)
-      }
-    })
-  })
-</script>

package/src/components/CartTotal.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+  import { cart } from 'fulldev-ui/stores/cart.svelte.ts'
+  import { formatPrice } from 'fulldev-ui/utils/cart'
+
+  let total = $derived(
+    $cart.reduce(
+      (acc, item) => acc + (item.price || 0) * (item.quantity || 0),
+      0
+    )
+  )
+</script>
+
+<div>
+  {formatPrice(total)}
+</div>