npm - nitrostack - Versions diffs - 1.0.55 → 1.0.57 - Mend

nitrostack 1.0.55 → 1.0.57

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (222) hide show

package/templates/typescript-oauth/src/widgets/app/globals.css ADDED Viewed

@@ -0,0 +1,167 @@
+/* Nitrocloud Widget Styles - Professional Theme */
+:root {
+  /* Professional Color Palette */
+  --primary: #3B82F6;
+  --primary-hover: #2563EB;
+  --secondary: #6B7280;
+  --secondary-hover: #4B5563;
+  --success: #10B981;
+  --warning: #F59E0B;
+  --error: #EF4444;
+  --info: #3B82F6;
+  /* Light Theme */
+  --bg-primary: #FFFFFF;
+  --bg-secondary: #F9FAFB;
+  --bg-tertiary: #F3F4F6;
+  --bg-elevated: #FFFFFF;
+  --text-primary: #111827;
+  --text-secondary: #6B7280;
+  --text-muted: #9CA3AF;
+  --border-color: #E5E7EB;
+  --border-hover: #D1D5DB;
+  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
+}
+.dark {
+  /* Dark Theme */
+  --bg-primary: #111827;
+  --bg-secondary: #1F2937;
+  --bg-tertiary: #374151;
+  --bg-elevated: #1F2937;
+  --text-primary: #F9FAFB;
+  --text-secondary: #D1D5DB;
+  --text-muted: #9CA3AF;
+  --border-color: #374151;
+  --border-hover: #4B5563;
+  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
+  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4);
+  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5);
+}
+/* Reset */
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+body {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+/* Card Styles */
+.card {
+  background: var(--bg-primary);
+  border: 1px solid var(--border-color);
+  border-radius: 8px;
+  padding: 16px;
+  transition: all 0.2s ease;
+  box-shadow: var(--shadow-sm);
+}
+.card:hover {
+  border-color: var(--border-hover);
+  box-shadow: var(--shadow-md);
+}
+/* Button Styles */
+.btn-primary {
+  background: var(--primary);
+  color: white;
+  border: none;
+  padding: 10px 20px;
+  border-radius: 6px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  font-size: 14px;
+}
+.btn-primary:hover {
+  background: var(--primary-hover);
+  box-shadow: var(--shadow-md);
+}
+.btn-secondary {
+  background: var(--bg-secondary);
+  color: var(--text-primary);
+  border: 1px solid var(--border-color);
+  padding: 10px 20px;
+  border-radius: 6px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  font-size: 14px;
+}
+.btn-secondary:hover {
+  background: var(--bg-tertiary);
+  border-color: var(--border-hover);
+}
+/* Badge Styles */
+.badge {
+  display: inline-flex;
+  align-items: center;
+  padding: 4px 12px;
+  border-radius: 6px;
+  font-size: 12px;
+  font-weight: 600;
+}
+.badge-success {
+  background: rgba(16, 185, 129, 0.1);
+  color: var(--success);
+  border: 1px solid rgba(16, 185, 129, 0.2);
+}
+.badge-warning {
+  background: rgba(245, 158, 11, 0.1);
+  color: var(--warning);
+  border: 1px solid rgba(245, 158, 11, 0.2);
+}
+.badge-error {
+  background: rgba(239, 68, 68, 0.1);
+  color: var(--error);
+  border: 1px solid rgba(239, 68, 68, 0.2);
+}
+.badge-info {
+  background: rgba(59, 130, 246, 0.1);
+  color: var(--info);
+  border: 1px solid rgba(59, 130, 246, 0.2);
+}
+.dark .badge-success {
+  background: rgba(16, 185, 129, 0.2);
+  color: #6EE7B7;
+}
+.dark .badge-warning {
+  background: rgba(245, 158, 11, 0.2);
+  color: #FCD34D;
+}
+.dark .badge-error {
+  background: rgba(239, 68, 68, 0.2);
+  color: #FCA5A5;
+}
+.dark .badge-info {
+  background: rgba(59, 130, 246, 0.2);
+  color: #93C5FD;
+}

package/templates/typescript-oauth/src/widgets/app/layout.tsx CHANGED Viewed

@@ -1,3 +1,8 @@
+'use client';
+import { WidgetLayout } from 'nitrostack/widgets';
+import './globals.css';
 export default function RootLayout({
   children,
 }: {
@@ -6,9 +11,8 @@ export default function RootLayout({
   return (
     <html lang="en">
       <body style={{ margin: 0, padding: 0, fontFamily: 'system-ui, sans-serif' }}>
-        {children}
+        <WidgetLayout>{children}</WidgetLayout>
       </body>
     </html>
   );
 }

package/templates/typescript-oauth/src/widgets/app/order-cancellation/page.tsx ADDED Viewed

@@ -0,0 +1,207 @@
+'use client';
+import { useWidgetSDK, useTheme } from 'nitrostack/widgets';
+/**
+ * Order Cancellation Widget - Cancellation confirmation with refund info
+ */
+interface CancellationData {
+    orderId: string;
+    cancellationId: string;
+    status: string;
+    refundAmount?: string;
+    refundCurrency?: string;
+    confirmedAt: string;
+    message: string;
+}
+export default function OrderCancellation() {
+    const { getToolOutput } = useWidgetSDK();
+    const theme = useTheme();
+    const data = getToolOutput<CancellationData>();
+    const isDark = theme === 'dark';
+    const formatDateTime = (isoString: string) => {
+        return new Date(isoString).toLocaleString('en-US', {
+            month: 'long',
+            day: 'numeric',
+            year: 'numeric',
+            hour: '2-digit',
+            minute: '2-digit'
+        });
+    };
+    if (!data) {
+        return <div style={{ padding: '24px', textAlign: 'center' }}>Loading...</div>;
+    }
+    const hasRefund = data.refundAmount && parseFloat(data.refundAmount) > 0;
+    return (
+        <div className={isDark ? 'dark' : ''} style={{
+            padding: '24px',
+            background: isDark ? '#020617' : '#FFFFFF',
+            color: isDark ? '#F8FAFC' : '#020617',
+            minHeight: '300px',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center'
+        }}>
+            <div style={{ maxWidth: '550px', width: '100%' }}>
+                {/* Icon */}
+                <div style={{
+                    width: '100px',
+                    height: '100px',
+                    margin: '0 auto 24px',
+                    background: hasRefund
+                        ? 'linear-gradient(135deg, #F59E0B 0%, #D97706 100%)'
+                        : 'linear-gradient(135deg, #EF4444 0%, #DC2626 100%)',
+                    borderRadius: '50%',
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    boxShadow: hasRefund
+                        ? '0 8px 24px rgba(245, 158, 11, 0.3)'
+                        : '0 8px 24px rgba(239, 68, 68, 0.3)'
+                }}>
+                    <div style={{ fontSize: '48px', color: 'white' }}>
+                        {hasRefund ? '💰' : '✗'}
+                    </div>
+                </div>
+                {/* Title */}
+                <h2 style={{ margin: '0 0 12px 0', fontSize: '24px', fontWeight: 700, textAlign: 'center' }}>
+                    Booking Cancelled
+                </h2>
+                <p style={{ margin: '0 0 24px 0', fontSize: '14px', color: isDark ? '#94A3B8' : '#64748B', lineHeight: '1.6', textAlign: 'center' }}>
+                    {data.message}
+                </p>
+                {/* Cancellation Details */}
+                <div style={{
+                    background: isDark ? '#0F172A' : '#F8FAFC',
+                    borderRadius: '12px',
+                    padding: '20px',
+                    marginBottom: '20px',
+                    border: `1px solid ${isDark ? '#334155' : '#E2E8F0'}`
+                }}>
+                    <div style={{ display: 'grid', gap: '16px' }}>
+                        {/* Order ID */}
+                        <div>
+                            <div style={{ fontSize: '11px', color: isDark ? '#94A3B8' : '#64748B', marginBottom: '6px', textTransform: 'uppercase', letterSpacing: '0.5px' }}>
+                                Order ID
+                            </div>
+                            <div style={{ fontSize: '14px', fontWeight: 600, fontFamily: 'monospace', padding: '10px', background: isDark ? '#020617' : 'white', borderRadius: '6px' }}>
+                                {data.orderId}
+                            </div>
+                        </div>
+                        {/* Cancellation ID */}
+                        <div>
+                            <div style={{ fontSize: '11px', color: isDark ? '#94A3B8' : '#64748B', marginBottom: '6px', textTransform: 'uppercase', letterSpacing: '0.5px' }}>
+                                Cancellation Reference
+                            </div>
+                            <div style={{ fontSize: '14px', fontWeight: 600, fontFamily: 'monospace', padding: '10px', background: isDark ? '#020617' : 'white', borderRadius: '6px' }}>
+                                {data.cancellationId}
+                            </div>
+                        </div>
+                        {/* Cancelled On */}
+                        <div>
+                            <div style={{ fontSize: '11px', color: isDark ? '#94A3B8' : '#64748B', marginBottom: '6px', textTransform: 'uppercase', letterSpacing: '0.5px' }}>
+                                Cancelled On
+                            </div>
+                            <div style={{ fontSize: '13px', fontWeight: 600, padding: '10px', background: isDark ? '#020617' : 'white', borderRadius: '6px' }}>
+                                {formatDateTime(data.confirmedAt)}
+                            </div>
+                        </div>
+                        {/* Refund Information */}
+                        {hasRefund ? (
+                            <div style={{
+                                marginTop: '8px',
+                                padding: '16px',
+                                background: '#FEF3C7',
+                                borderRadius: '8px',
+                                border: '1px solid #F59E0B'
+                            }}>
+                                <div style={{ display: 'flex', alignItems: 'center', gap: '10px', marginBottom: '10px' }}>
+                                    <div style={{ fontSize: '28px' }}>💰</div>
+                                    <div>
+                                        <div style={{ fontSize: '12px', color: '#92400E', fontWeight: 600, marginBottom: '4px' }}>
+                                            Refund Amount
+                                        </div>
+                                        <div style={{ fontSize: '22px', fontWeight: 700, color: '#78350F' }}>
+                                            {data.refundCurrency} {parseFloat(data.refundAmount!).toFixed(2)}
+                                        </div>
+                                    </div>
+                                </div>
+                                <div style={{ fontSize: '11px', color: '#92400E', lineHeight: '1.5' }}>
+                                    Refund will be processed to your original payment method within 5-10 business days.
+                                </div>
+                            </div>
+                        ) : (
+                            <div style={{
+                                marginTop: '8px',
+                                padding: '16px',
+                                background: '#FEE2E2',
+                                borderRadius: '8px',
+                                border: '1px solid #EF4444'
+                            }}>
+                                <div style={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
+                                    <div style={{ fontSize: '20px' }}>ℹ️</div>
+                                    <div style={{ fontSize: '12px', color: '#991B1B', lineHeight: '1.5' }}>
+                                        <strong>No Refund Available:</strong> This booking was non-refundable or outside the cancellation window.
+                                    </div>
+                                </div>
+                            </div>
+                        )}
+                    </div>
+                </div>
+                {/* Status Badge */}
+                <div style={{ textAlign: 'center', marginBottom: '20px' }}>
+                    <div className="badge badge-error" style={{ padding: '10px 20px', fontSize: '12px', textTransform: 'uppercase', letterSpacing: '0.5px' }}>
+                        ✗ {data.status}
+                    </div>
+                </div>
+                {/* Action Buttons */}
+                <div style={{ display: 'grid', gap: '10px' }}>
+                    <button className="btn-primary" style={{ width: '100%' }}>
+                        🔍 Search New Flights
+                    </button>
+                    <button className="btn-secondary" style={{ width: '100%' }}>
+                        📧 Email Confirmation
+                    </button>
+                    <button className="btn-secondary" style={{ width: '100%' }}>
+                        📄 Download Receipt
+                    </button>
+                </div>
+                {/* Help Section */}
+                <div style={{
+                    marginTop: '20px',
+                    padding: '16px',
+                    background: isDark ? '#0F172A' : '#F8FAFC',
+                    borderRadius: '8px',
+                    border: `1px solid ${isDark ? '#334155' : '#E2E8F0'}`
+                }}>
+                    <div style={{ fontSize: '12px', fontWeight: 600, marginBottom: '8px', display: 'flex', alignItems: 'center', gap: '6px' }}>
+                        <span>💬</span>
+                        <span>Need Help?</span>
+                    </div>
+                    <div style={{ fontSize: '11px', color: isDark ? '#94A3B8' : '#64748B', lineHeight: '1.5', marginBottom: '10px' }}>
+                        Questions about this cancellation? Contact our support team 24/7.
+                    </div>
+                    <button className="btn-primary" style={{ padding: '8px 16px', fontSize: '12px' }}>
+                        Contact Support
+                    </button>
+                </div>
+            </div>
+        </div>
+    );
+}

package/templates/typescript-oauth/src/widgets/app/order-summary/page.tsx ADDED Viewed

@@ -0,0 +1,245 @@
+'use client';
+import { useWidgetSDK, useTheme } from 'nitrostack/widgets';
+/**
+ * Order Summary Widget - Compact booking confirmation
+ */
+interface OrderData {
+    orderId: string;
+    status: string;
+    bookingReference?: string;
+    totalAmount: string;
+    totalCurrency: string;
+    createdAt?: string;
+    expiresAt?: string;
+    passengers: Array<{ id: string; name: string; type: string; email?: string }>;
+    slices: Array<{
+        origin: { code: string; city?: string };
+        destination: { code: string; city?: string };
+        segments?: Array<{ airline: string; flightNumber: string }>;
+    }>;
+    message?: string;
+}
+export default function OrderSummary() {
+    const { getToolOutput } = useWidgetSDK();
+    const theme = useTheme();
+    const data = getToolOutput<OrderData>();
+    const isDark = theme === 'dark';
+    const formatDateTime = (isoString: string) => {
+        return new Date(isoString).toLocaleString('en-US', {
+            month: 'short',
+            day: 'numeric',
+            year: 'numeric',
+            hour: '2-digit',
+            minute: '2-digit'
+        });
+    };
+    const getStatusIcon = (status: string) => {
+        return { 'confirmed': '🎉', 'held': '⏱️', 'cancelled': '✗', 'pending': '⋯' }[status.toLowerCase()] || '📋';
+    };
+    if (!data) {
+        return <div style={{ padding: '24px', textAlign: 'center' }}>Loading...</div>;
+    }
+    return (
+        <div className={isDark ? 'dark' : ''} style={{
+            padding: '16px',
+            background: isDark ? '#020617' : '#ffffff',
+            color: isDark ? '#F8FAFC' : '#020617'
+        }}>
+            {/* Header */}
+            <div className="card" style={{ marginBottom: '16px', textAlign: 'center' }}>
+                <div style={{ fontSize: '40px', marginBottom: '12px' }}>
+                    {getStatusIcon(data.status)}
+                </div>
+                <h2 style={{ margin: 0, fontSize: '20px', fontWeight: 700, marginBottom: '8px' }}>
+                    {data.status === 'confirmed' ? 'Booking Confirmed!' :
+                        data.status === 'held' ? 'Order On Hold' : 'Order Summary'}
+                </h2>
+                {data.bookingReference && (
+                    <div style={{ fontSize: '14px', color: isDark ? '#94A3B8' : '#64748B', marginBottom: '12px' }}>
+                        Reference: <strong style={{ color: "var(--primary)", fontWeight: 700 }}>{data.bookingReference}</strong>
+                    </div>
+                )}
+                <div className={`badge badge-${data.status === 'confirmed' ? 'success' : data.status === 'held' ? 'warning' : 'info'}`}>
+                    {data.status.toUpperCase()}
+                </div>
+                {data.message && (
+                    <div style={{
+                        marginTop: '12px',
+                        padding: '10px',
+                        background: isDark ? '#0F172A' : '#0F172A',
+                        borderRadius: '6px',
+                        fontSize: '12px'
+                    }}>
+                        {data.message}
+                    </div>
+                )}
+                {data.expiresAt && data.status === 'held' && (
+                    <div style={{
+                        marginTop: '12px',
+                        padding: '12px',
+                        background: '#FEF3C7',
+                        borderRadius: '8px',
+                        border: '1px solid #F59E0B'
+                    }}>
+                        <div style={{ fontSize: '11px', fontWeight: 600, color: '#92400E', marginBottom: '4px' }}>
+                            ⏰ Payment Required
+                        </div>
+                        <div style={{ fontSize: '10px', color: '#78350F' }}>
+                            Complete before: <strong>{formatDateTime(data.expiresAt)}</strong>
+                        </div>
+                    </div>
+                )}
+            </div>
+            {/* Order Info */}
+            <div className="card" style={{ marginBottom: '12px' }}>
+                <h3 style={{ margin: '0 0 12px 0', fontSize: '14px', fontWeight: 600 }}>Order Information</h3>
+                <div style={{ display: 'grid', gap: '8px', fontSize: '12px' }}>
+                    <div style={{ display: 'flex', justifyContent: 'space-between' }}>
+                        <span style={{ color: isDark ? '#94A3B8' : '#64748B' }}>Order ID:</span>
+                        <span style={{ fontWeight: 600, fontFamily: 'monospace' }}>{data.orderId}</span>
+                    </div>
+                    <div style={{ display: 'flex', justifyContent: 'space-between', paddingTop: '8px', borderTop: `1px solid ${isDark ? '#334155' : '#E2E8F0'}` }}>
+                        <span style={{ color: isDark ? '#94A3B8' : '#64748B' }}>Total:</span>
+                        <span style={{ color: 'var(--primary)', fontWeight: 700, fontSize: '16px' }}>
+                            {data.totalCurrency} {parseFloat(data.totalAmount).toFixed(2)}
+                        </span>
+                    </div>
+                    {data.createdAt && (
+                        <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: '11px' }}>
+                            <span style={{ color: isDark ? '#94A3B8' : '#64748B' }}>Created:</span>
+                            <span>{formatDateTime(data.createdAt)}</span>
+                        </div>
+                    )}
+                </div>
+            </div>
+            {/* Passengers */}
+            <div className="card" style={{ marginBottom: '12px' }}>
+                <h3 style={{ margin: '0 0 12px 0', fontSize: '14px', fontWeight: 600, display: 'flex', alignItems: 'center', gap: '6px' }}>
+                    <span>👥</span>
+                    <span>Passengers ({data.passengers.length})</span>
+                </h3>
+                <div style={{ display: 'grid', gap: '8px' }}>
+                    {data.passengers.map((passenger, index) => (
+                        <div key={passenger.id} style={{
+                            padding: '12px',
+                            background: isDark ? '#0F172A' : '#0F172A',
+                            borderRadius: '8px',
+                            display: 'flex',
+                            justifyContent: 'space-between',
+                            alignItems: 'center'
+                        }}>
+                            <div>
+                                <div style={{ fontWeight: 600, fontSize: '13px', marginBottom: '2px' }}>
+                                    {passenger.name}
+                                </div>
+                                <div style={{ fontSize: '11px', color: isDark ? '#94A3B8' : '#64748B' }}>
+                                    {passenger.type}
+                                </div>
+                                {passenger.email && (
+                                    <div style={{ fontSize: '10px', color: isDark ? '#94A3B8' : '#64748B', marginTop: '2px' }}>
+                                        📧 {passenger.email}
+                                    </div>
+                                )}
+                            </div>
+                            <div style={{
+                                background: 'var(--primary)',
+                                color: 'white',
+                                width: '28px',
+                                height: '28px',
+                                borderRadius: '50%',
+                                display: 'flex',
+                                alignItems: 'center',
+                                justifyContent: 'center',
+                                fontWeight: 700,
+                                fontSize: '12px'
+                            }}>
+                                {index + 1}
+                            </div>
+                        </div>
+                    ))}
+                </div>
+            </div>
+            {/* Flight Itinerary */}
+            <div className="card">
+                <h3 style={{ margin: '0 0 12px 0', fontSize: '14px', fontWeight: 600, display: 'flex', alignItems: 'center', gap: '6px' }}>
+                    <span>✈️</span>
+                    <span>Flight Itinerary</span>
+                </h3>
+                <div style={{ display: 'grid', gap: '12px' }}>
+                    {data.slices.map((slice, index) => (
+                        <div key={index} style={{
+                            padding: '12px',
+                            background: isDark ? '#0F172A' : '#F8FAFC',
+                            borderRadius: '8px'
+                        }}>
+                            <div style={{ fontSize: '12px', fontWeight: 600, color: '#3B9FFF', marginBottom: '10px' }}>
+                                {index === 0 ? 'Outbound' : 'Return'} Flight
+                            </div>
+                            <div style={{
+                                display: 'grid',
+                                gridTemplateColumns: '1fr auto 1fr',
+                                gap: '12px',
+                                alignItems: 'center'
+                            }}>
+                                <div>
+                                    <div style={{ fontSize: '16px', fontWeight: 700 }}>
+                                        {slice.origin.code}
+                                    </div>
+                                    {slice.origin.city && (
+                                        <div style={{ fontSize: '11px', color: isDark ? '#94A3B8' : '#64748B', marginTop: '2px' }}>
+                                            {slice.origin.city}
+                                        </div>
+                                    )}
+                                </div>
+                                <div style={{
+                                    width: '32px',
+                                    height: '2px',
+                                    background: 'linear-gradient(90deg, #3B9FFF 0%, #2563EB 100%)'
+                                }} />
+                                <div style={{ textAlign: 'right' }}>
+                                    <div style={{ fontSize: '16px', fontWeight: 700 }}>
+                                        {slice.destination.code}
+                                    </div>
+                                    {slice.destination.city && (
+                                        <div style={{ fontSize: '11px', color: isDark ? '#94A3B8' : '#64748B', marginTop: '2px' }}>
+                                            {slice.destination.city}
+                                        </div>
+                                    )}
+                                </div>
+                            </div>
+                            {slice.segments && slice.segments.length > 0 && (
+                                <div style={{ marginTop: '10px', paddingTop: '10px', borderTop: `1px solid ${isDark ? '#334155' : '#E2E8F0'}` }}>
+                                    {slice.segments.map((segment, segIndex) => (
+                                        <div key={segIndex} style={{ fontSize: '11px', color: isDark ? '#94A3B8' : '#64748B', marginBottom: '4px' }}>
+                                            {segment.airline} {segment.flightNumber}
+                                        </div>
+                                    ))}
+                                </div>
+                            )}
+                        </div>
+                    ))}
+                </div>
+            </div>
+        </div>
+    );
+}