Viewports حوالہ

Viewports یہ تعریف کرتے ہیں کہ Stripe Dashboard میں آپ کے Stripe App کے UI اجزاء کہاں ظاہر ہوتے ہیں۔ ہر viewport ایک مخصوص Dashboard صفحے یا مقام سے مطابقت رکھتا ہے جہاں آپ کی app ایک view render کر سکتی ہے۔

Viewports کیسے کام کرتے ہیں

جب آپ app manifest میں ایک view بیان کرتے ہیں، تو آپ ایک React component کو ایک viewport سے ملاتے ہیں:

{
  "ui_extension": {
    "views": [
      {
        "viewport": "stripe.dashboard.customer.detail",
        "component": "CustomerDetailView"
      }
    ]
  }
}

جب صارف متعلقہ Dashboard صفحے پر جاتا ہے اور آپ کی app کھولتا ہے تو component app drawer (سائیڈ پینل) میں render ہوتا ہے۔

Dashboard-Wide بمقابلہ Page-Specific Viewports

Dashboard-Wide Viewports

یہ viewports Stripe Dashboard کے ہر صفحے پر دستیاب ہیں:

Viewport ID	تفصیل
`stripe.dashboard.drawer.default`	پہلے سے طے شدہ drawer view، app icon کے ذریعے کسی بھی Dashboard صفحے سے قابل رسائی
`stripe.dashboard.home.overview`	ہوم صفحہ کا جائزہ، Dashboard landing صفحے پر دکھایا جاتا ہے
`stripe.dashboard.settings`	App settings صفحہ، app کے settings menu سے قابل رسائی
`stripe.dashboard.onboarding`	Onboarding فلو، app انسٹالیشن کے بعد دکھایا جاتا ہے

Tip

drawer.default viewport ایک fallback کے طور پر کام کرتا ہے۔ اگر صارف آپ کی app کسی ایسے صفحے پر کھولے جہاں آپ نے کوئی مخصوص viewport بیان نہیں کیا، تو drawer.default view اس کی جگہ render ہوگا۔

Page-Specific Viewports

یہ viewports صرف اس وقت render ہوتے ہیں جب صارف متعلقہ Dashboard صفحے پر ہو:

ادائیگیاں

Viewport ID	صفحہ	URL Pattern	Object کی قسم
`stripe.dashboard.payment.list`	ادائیگیوں کی فہرست	`/payments`	,
`stripe.dashboard.payment.detail`	ادائیگی کی تفصیل	`/payments/:id`	PaymentIntent
`stripe.dashboard.charge.detail`	Charge کی تفصیل	`/payments/:id` (legacy)	Charge

گاہک

Viewport ID	صفحہ	URL Pattern	Object کی قسم
`stripe.dashboard.customer.list`	گاہکوں کی فہرست	`/customers`	,
`stripe.dashboard.customer.detail`	گاہک کی تفصیل	`/customers/:id`	Customer

مصنوعات اور قیمتیں

Viewport ID	صفحہ	URL Pattern	Object کی قسم
`stripe.dashboard.product.list`	مصنوعات کی فہرست	`/products`	,
`stripe.dashboard.product.detail`	مصنوع کی تفصیل	`/products/:id`	Product
`stripe.dashboard.price.detail`	قیمت کی تفصیل	`/prices/:id`	Price

انوائسز

Viewport ID	صفحہ	URL Pattern	Object کی قسم
`stripe.dashboard.invoice.list`	انوائسز کی فہرست	`/invoices`	,
`stripe.dashboard.invoice.detail`	انوائس کی تفصیل	`/invoices/:id`	Invoice

سبسکرپشنز

Viewport ID	صفحہ	URL Pattern	Object کی قسم
`stripe.dashboard.subscription.list`	سبسکرپشنز کی فہرست	`/subscriptions`	,
`stripe.dashboard.subscription.detail`	سبسکرپشن کی تفصیل	`/subscriptions/:id`	Subscription

Checkout

Viewport ID	صفحہ	URL Pattern	Object کی قسم
`stripe.dashboard.checkout.session.list`	Checkout Sessions کی فہرست	`/checkout/sessions`	,
`stripe.dashboard.checkout.session.detail`	Checkout Session کی تفصیل	`/checkout/sessions/:id`	CheckoutSession
`stripe.dashboard.payment-link.list`	Payment Links کی فہرست	`/payment-links`	,
`stripe.dashboard.payment-link.detail`	Payment Link کی تفصیل	`/payment-links/:id`	PaymentLink

Connect

Viewport ID	صفحہ	URL Pattern	Object کی قسم
`stripe.dashboard.connect.account.list`	منسلک اکاؤنٹس کی فہرست	`/connect/accounts`	,
`stripe.dashboard.connect.account.detail`	منسلک اکاؤنٹ کی تفصیل	`/connect/accounts/:id`	Account
`stripe.dashboard.transfer.list`	Transfers کی فہرست	`/connect/transfers`	,
`stripe.dashboard.transfer.detail`	Transfer کی تفصیل	`/connect/transfers/:id`	Transfer

بلنگ

Viewport ID	صفحہ	URL Pattern	Object کی قسم
`stripe.dashboard.coupon.list`	Coupons کی فہرست	`/coupons`	,
`stripe.dashboard.coupon.detail`	Coupon کی تفصیل	`/coupons/:id`	Coupon
`stripe.dashboard.quote.list`	Quotes کی فہرست	`/quotes`	,
`stripe.dashboard.quote.detail`	Quote کی تفصیل	`/quotes/:id`	Quote
`stripe.dashboard.credit-note.detail`	Credit note کی تفصیل	`/credit-notes/:id`	CreditNote

Payouts

Viewport ID	صفحہ	URL Pattern	Object کی قسم
`stripe.dashboard.payout.list`	Payouts کی فہرست	`/payouts`	,
`stripe.dashboard.payout.detail`	Payout کی تفصیل	`/payouts/:id`	Payout

تنازعات

Viewport ID	صفحہ	URL Pattern	Object کی قسم
`stripe.dashboard.dispute.list`	تنازعات کی فہرست	`/disputes`	,
`stripe.dashboard.dispute.detail`	تنازعہ کی تفصیل	`/disputes/:id`	Dispute

Terminal

Viewport ID	صفحہ	URL Pattern	Object کی قسم
`stripe.dashboard.terminal.reader.list`	Readers کی فہرست	`/terminal/readers`	,
`stripe.dashboard.terminal.reader.detail`	Reader کی تفصیل	`/terminal/readers/:id`	TerminalReader
`stripe.dashboard.terminal.location.list`	Locations کی فہرست	`/terminal/locations`	,
`stripe.dashboard.terminal.location.detail`	Location کی تفصیل	`/terminal/locations/:id`	TerminalLocation

Issuing

Viewport ID	صفحہ	URL Pattern	Object کی قسم
`stripe.dashboard.issuing.card.list`	کارڈز کی فہرست	`/issuing/cards`	,
`stripe.dashboard.issuing.card.detail`	کارڈ کی تفصیل	`/issuing/cards/:id`	IssuingCard
`stripe.dashboard.issuing.cardholder.list`	کارڈ ہولڈرز کی فہرست	`/issuing/cardholders`	,
`stripe.dashboard.issuing.cardholder.detail`	کارڈ ہولڈر کی تفصیل	`/issuing/cardholders/:id`	IssuingCardholder
`stripe.dashboard.issuing.transaction.list`	لین دین کی فہرست	`/issuing/transactions`	,
`stripe.dashboard.issuing.authorization.list`	اجازتوں کی فہرست	`/issuing/authorizations`	,

Object Context تک رسائی

جب آپ کی app ایک detail viewport میں render ہوتی ہے، تو اسے متعلقہ Stripe object context کے طور پر ملتا ہے:

import type { ExtensionContextValue } from '@stripe/ui-extension-sdk/context';

const CustomerDetailView = ({ environment }: ExtensionContextValue) => {
  const { objectContext } = environment;

  // objectContext موجودہ Stripe object رکھتا ہے
  const customerId = objectContext?.id; // "cus_xxxxx"
  const customerEmail = objectContext?.email;

  return (
    <Box>
      <Inline>Customer: {customerEmail}</Inline>
      <Inline>Brevo Sync Status: checking...</Inline>
    </Box>
  );
};

List بمقابلہ Detail Context

Viewport کی قسم	Object Context	استعمال کا معاملہ
List (مثلاً `customer.list`)	دستیاب نہیں, کوئی مخصوص object منتخب نہیں	مجموعی ڈیٹا، خلاصہ views، یا batch actions دکھائیں
Detail (مثلاً `customer.detail`)	موجودہ صفحے کے لیے مکمل Stripe object	object-specific ڈیٹا، اعمال اور انٹیگریشنز دکھائیں

Tajo Brevo انٹیگریشن کے لیے تجویز کردہ Viewports

Tajo Brevo انٹیگریشن app کے لیے، یہ viewports سب سے زیادہ قیمت فراہم کرتے ہیں:

{
  "ui_extension": {
    "views": [
      {
        "viewport": "stripe.dashboard.customer.detail",
        "component": "CustomerDetailView"
      },
      {
        "viewport": "stripe.dashboard.customer.list",
        "component": "CustomerListView"
      },
      {
        "viewport": "stripe.dashboard.payment.detail",
        "component": "PaymentDetailView"
      },
      {
        "viewport": "stripe.dashboard.subscription.detail",
        "component": "SubscriptionDetailView"
      },
      {
        "viewport": "stripe.dashboard.home.overview",
        "component": "OverviewView"
      },
      {
        "viewport": "stripe.dashboard.drawer.default",
        "component": "DrawerView"
      },
      {
        "viewport": "stripe.dashboard.settings",
        "component": "SettingsView"
      },
      {
        "viewport": "stripe.dashboard.onboarding",
        "component": "OnboardingView"
      }
    ]
  }
}

Component	مقصد
CustomerDetailView	ایک مخصوص گاہک کے لیے Brevo contact معلومات، sync status اور engagement ڈیٹا دکھائیں
CustomerListView	Batch sync controls اور مجموعی Brevo sync اعداد و شمار دکھائیں
PaymentDetailView	دکھائیں کہ اس ادائیگی نے کون سے Brevo events ٹرگر کیے
SubscriptionDetailView	اس سبسکرپشن کے لیے Brevo automation status دکھائیں
OverviewView	sync health اور اہم Brevo metrics کے ساتھ Dashboard ہوم widget
DrawerView	عام app drawer با quick actions اور status کا جائزہ
SettingsView	Brevo API key، sync ترجیحات اور field mappings کنفیگر کریں
OnboardingView	نئے صارفین کو اپنا Brevo اکاؤنٹ منسلک کرنے میں رہنمائی کریں

Viewport کی دستیابی

تمام viewports تمام Stripe Dashboard modes میں دستیاب نہیں ہیں:

موڈ	دستیاب Viewports
Live موڈ	تمام viewports
Test موڈ	تمام viewports (test ڈیٹا استعمال کرتے ہیں)
Sandbox	تمام viewports (اگر `sandbox_install_compatible: true`)

Caution

اگر آپ کا manifest کوئی ایسا viewport بیان کرے جو موجود نہیں تو app upload validation میں ناکام ہو جائے گی۔ ہمیشہ اس حوالے کے خلاف viewport IDs کی تصدیق کریں۔