Vue Catalog Mini App with Pinia Cart and Telegram Checkout

npm create vite@latest telegram-catalog-miniapp --template vue
cd telegram-catalog-miniapp
npm install

npm install @meta/telegram @meta/telegram-bot-sdk pinia

TELEGRAM_BOT_TOKEN=123456789:ABCdefGHIjklMNOpqrSTU
WEBHOOK_URL=https://your-domain.com/webhook
PAYMENT_GATEWAY_API_KEY=sk_test_xxxxx

// src/store/cart.js
import { defineStore } from 'pinia'
import { inject, ref } from 'vue'

const TELEGRAM_CLIENT = inject('telegramClient')

// Initialize the client when the app starts
const initTelegram = async () => {
  const token = process.env.TELEGRAM_BOT_TOKEN
  if (!token) throw new Error('Telegram token missing')

  await TELEGRAM_CLIENT.init({ token })
}

export const useCart = defineStore('cart', {
  state: () => ({
    items: [],
    total: 0,
  }),
  actions: {
    addToCart(product) {
      // If item already exists, increase quantity; otherwise push new entry
      const existing = this.items.find(i => i.id === product.id)
      if (existing) {
        existing.quantity += 1
      } else {
        this.items.push({
          ...product,
          quantity: 1
        })
      }
      this.total = this.items.reduce((sum, i) => sum + i.price * i.quantity, 0)
    },
    removeFromCart(id) {
      this.items = this.items.filter(item => item.id !== id)
      this.total = this.items.reduce((sum, i) => sum + i.price * i.quantity, 0)
    },
    clearCart() {
      this.items = []
      this.total = 0
    }
  }
})

// src/stores/cart.js (persistence layer)
import { useCart } from './cart'

const saveCart = (items) => {
  try {
    localStorage.setItem('telegram-catalog-cart', JSON.stringify(items))
  } catch (e) {
    console.warn('Failed to persist cart', e)
  }
}

const loadCart = () => {
  try {
    const raw = localStorage.getItem('telegram-catalog-cart')
    return raw ? JSON.parse(raw) : []
  } catch (e) {
    console.error('Failed to load cart', e)
    return []
  }
}

export function usePersistedCart() {
  const cartState = useCart()
  const persisted = loadCart()
  cartState.items = persisted
  return { ...cartState, persisted }
}

<!-- src/components/ProductCatalog.vue -->
<template>
  <div class="catalog">
    <h1>Shop</h1>
    <div v-for="product" :key="product.id" class="product-card">
      <img :src="product.image" alt="Product" />
      <h2>{{ product.name }}</h2>
      <p>{{ product.description }}</p>
      <span class="price">{{ formatPrice(product.price) }}</span>
      <button @click="addToCart(product)">Add to Cart</button>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useCart } from '@/stores/cart'
import { useTelegram } from '@/store/telegram' // see below

const product = ref(null)
const cart = useCart()

onMounted(() => {
  // Fetch products from your API
  fetch('/api/products')
    .then(r => r.json())
    .then(data => {
      product.value = data[0] // or iterate over all
    })
    .catch(e => console.error('Failed to load products', e))
})

const addToCart = (prod) => {
  cart.addToCart(prod)
  // Optionally refresh cart state
  const persisted = usePersistedCart().persisted
  cart.items = persisted
}

const formatPrice = (price) => new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD'
}).format(price)
</script>
</vue>

// src/store/telegram.js
import { defineStore } from 'pinia'
import { inject, watch } from 'vue'

const TELEGRAM_CLIENT = inject('telegramClient')

// Listen for incoming updates
watch(
  () => TELEGRAM_CLIENT.getUpdates(),
  (updates) => {
    if (updates.length > 0) {
      updates.forEach(update => {
        switch (update.type) {
          case 'message':
            handleIncomingMessage(update.message)
            break
          case 'callback_query':
            handleCallback(update.callback_query)
            break
          default:
            console.log('Unknown event', update.type)
        }
      })
    }
  }
)

async function handleIncomingMessage(message) {
  const chatId = message.chat.id
  // For simplicity, we route all messages to the cart
  // In a real app, you might filter by conversation ID
  if (message.from.id === process.env.TELEGRAM_BOT_TOKEN) {
    // Ignore our own messages
    return
  }
  // Forward to backend or trigger action
  console.log('New message:', message.text)
}

function handleCallback(callbackQuery) {
  const query = callbackQuery.data
  // Example: /start, /add, /remove, /checkout
  switch (query.action) {
    case 'add':
      // Extract product ID from query.text
      const productId = query.text.split('[')[1].split(']')[0]
      const product = await api.getProduct(productId)
      cart.addToCart(product)
      break
    case 'checkout':
      // Redirect to external payment or generate invoice
      openCheckoutFlow(query.params)
      break
  }
}

export const useTelegram = defineStore('telegram', {
  actions: {}
})

// src/actions/checkout.js
import { inject } from 'vue'

const TELEGRAM_CLIENT = inject('telegramClient')

async function generateInvoice(total) {
  // Create a minimal PDF (using a library like pdfmake or wkhtmltopdf)
  const invoiceHtml = `
    <h2>Order #${total}</h2>
    <ul>
      ${this.products.map(p => `<li>${p.name} x ${p.qty} $${p.price} = $${(p.price * p.qty).toFixed(2)}</li>`).join('')}
    </ul>
    <p>Total: $${total}</p>
  `
  // Use cURL to upload to your storage or send via webhook
  const response = await fetch('https://your-storage.com/upload', {
    method: 'POST',
    headers: { 'Content-Type': 'application/octet-stream' },
    body: Buffer.from(invoiceHtml, 'utf-8').toString()
  })
  const url = response.url
  // Share via Telegram
  await TELEGRAM_CLIENT.sendMessage(
    process.env.TELEGRAM_BOT_TOKEN,
    `Your order has been created. Here is your invoice:`
  )
}

async function startExternalCheckout() {
  // POST order details to your backend
  const order = await api.createOrder({
    items: cart.items,
    total: cart.total,
    customerEmail: getCustomerEmail()
  })

  // Confirm with the payment provider
  await paymentProvider.confirm(order.id)

  // On success, mark as paid in DB and notify Telegram
  await api.markPaid(order.id)
  await TELEGRAM_CLIENT.sendMessage(
    process.env.TELEGRAM_BOT_TOKEN,
    `✅ Order #${order.id} is confirmed! Thank you for your purchase.`
  )
}

// server/index.js (Express)
const express = require('express')
const bodyParser = require('body-parser')
const { webhookHandler } = require('./handlers/webhook')

const app = express()
app.use(bodyParser.json())
app.use('/webhook', webhookHandler)

app.listen(3000, () => console.log('Webhook listening on port 3000'))

// server/handlers/webhook.js
import { useCart } from '../store/cart'

async function webhookHandler(req, res) {
  const update = req.body
  const updateId = update.update_id

  // Dispatch to frontend store
  const cartStore = useCart()
  // You would normally use a channel-based approach (e.g., Socket.io) to push
  // updates to the frontend. For simplicity, we log here.
  console.log(`Handled update ${updateId}:`, update)

  // Persist any changes locally
  cartStore.saveCart(cartStore.items)

  res.status(200).send('OK')
}