@quantaroute/checkout 1.1.1 → 1.2.0

package/src/styles/checkout.native.ts

@@ -0,0 +1,839 @@
+import { StyleSheet, Platform } from 'react-native';
+
+// ─── Design tokens (mirrors checkout.css CSS variables) ──────────────────────
+
+export const COLORS = {
+  primary:        '#0ea5e9',
+  primaryDark:    '#0284c7',
+  primaryLight:   '#e0f2fe',
+  success:        '#10b981',
+  warning:        '#f59e0b',
+  error:          '#ef4444',
+  // Light theme
+  text:           '#1e293b',
+  textMuted:      '#64748b',
+  textFaint:      '#94a3b8',
+  bg:             '#ffffff',
+  bgSubtle:       '#f8fafc',
+  border:         '#e2e8f0',
+  // Dark theme
+  textDark:       '#f1f5f9',
+  textMutedDark:  '#94a3b8',
+  textFaintDark:  '#64748b',
+  bgDark:         '#1e293b',
+  bgSubtleDark:   '#0f172a',
+  borderDark:     '#334155',
+} as const;
+
+export const FONTS = {
+  mono: Platform.OS === 'ios' ? 'Courier New' : 'monospace',
+  system: Platform.OS === 'ios' ? 'System' : 'Roboto',
+} as const;
+
+// ─── Shared stylesheet ────────────────────────────────────────────────────────
+
+export const styles = StyleSheet.create({
+
+  // ── Root container ──────────────────────────────────────────────────────────
+  container: {
+    backgroundColor: COLORS.bg,
+    borderRadius: 16,
+    overflow: 'hidden',
+    width: '100%',
+    maxWidth: 480,
+    alignSelf: 'center',
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 4 },
+    shadowOpacity: 0.12,
+    shadowRadius: 16,
+    elevation: 8,
+  },
+  containerDark: {
+    backgroundColor: COLORS.bgDark,
+  },
+
+  // ── Widget header ───────────────────────────────────────────────────────────
+  header: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    paddingHorizontal: 16,
+    paddingVertical: 14,
+    borderBottomWidth: 1,
+    borderBottomColor: COLORS.border,
+    backgroundColor: COLORS.bg,
+  },
+  headerDark: {
+    backgroundColor: COLORS.bgDark,
+    borderBottomColor: COLORS.borderDark,
+  },
+  headerBrand: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 8,
+  },
+  headerIcon: {
+    fontSize: 18,
+    color: COLORS.primary,
+    marginRight: 6,
+  },
+  headerTitle: {
+    fontSize: 15,
+    fontWeight: '600',
+    color: COLORS.text,
+    letterSpacing: -0.2,
+  },
+  headerTitleDark: {
+    color: COLORS.textDark,
+  },
+
+  // ── Progress dots ───────────────────────────────────────────────────────────
+  progress: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 4,
+  },
+  progressDot: {
+    width: 8,
+    height: 8,
+    borderRadius: 4,
+    backgroundColor: COLORS.border,
+  },
+  progressDotActive: {
+    backgroundColor: COLORS.primary,
+  },
+  progressLine: {
+    width: 20,
+    height: 2,
+    borderRadius: 1,
+    backgroundColor: COLORS.border,
+  },
+  progressLineActive: {
+    backgroundColor: COLORS.primary,
+  },
+
+  // ── Step header (shared by Map + Form steps) ────────────────────────────────
+  stepHeader: {
+    flexDirection: 'row',
+    alignItems: 'flex-start',
+    gap: 10,
+    paddingHorizontal: 16,
+    paddingVertical: 14,
+    borderBottomWidth: 1,
+    borderBottomColor: COLORS.border,
+  },
+  stepHeaderDark: {
+    borderBottomColor: COLORS.borderDark,
+  },
+  stepBadge: {
+    width: 26,
+    height: 26,
+    borderRadius: 13,
+    backgroundColor: COLORS.primary,
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginTop: 1,
+  },
+  stepBadgeText: {
+    color: '#fff',
+    fontSize: 12,
+    fontWeight: '700',
+  },
+  stepText: {
+    flex: 1,
+    gap: 2,
+  },
+  stepTitle: {
+    fontSize: 14,
+    fontWeight: '600',
+    color: COLORS.text,
+    lineHeight: 18,
+  },
+  stepSub: {
+    fontSize: 12,
+    color: COLORS.textMuted,
+    lineHeight: 17,
+  },
+
+  // ── Back button ─────────────────────────────────────────────────────────────
+  backBtn: {
+    width: 34,
+    height: 34,
+    borderRadius: 8,
+    borderWidth: 1,
+    borderColor: COLORS.border,
+    backgroundColor: 'transparent',
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginTop: -4,
+  },
+  backBtnDark: {
+    borderColor: COLORS.borderDark,
+  },
+  backBtnText: {
+    fontSize: 18,
+    color: COLORS.text,
+    lineHeight: 22,
+  },
+  backBtnTextDark: {
+    color: COLORS.textDark,
+  },
+
+  // ── Map wrapper ─────────────────────────────────────────────────────────────
+  mapWrapper: {
+    flex: 1,
+  },
+
+  // ── DigiPin badge overlay ───────────────────────────────────────────────────
+  digipinBadge: {
+    position: 'absolute',
+    top: 10,
+    left: 10,
+    zIndex: 10,
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 6,
+    backgroundColor: COLORS.bg,
+    borderWidth: 1.5,
+    borderColor: COLORS.primaryLight,
+    borderRadius: 100,
+    paddingVertical: 5,
+    paddingLeft: 8,
+    paddingRight: 12,
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.12,
+    shadowRadius: 4,
+    elevation: 4,
+  },
+  digipinBadgeDark: {
+    backgroundColor: COLORS.bgDark,
+    borderColor: 'rgba(14,165,233,0.35)',
+  },
+  digipinLabel: {
+    fontSize: 10,
+    fontWeight: '700',
+    textTransform: 'uppercase',
+    letterSpacing: 1,
+    color: COLORS.textMuted,
+  },
+  digipinLabelDark: {
+    color: COLORS.textMutedDark,
+  },
+  digipinCode: {
+    fontSize: 13,
+    fontWeight: '700',
+    color: COLORS.primary,
+    letterSpacing: 0.5,
+    fontFamily: FONTS.mono,
+  },
+
+  // ── Out-of-India notice ─────────────────────────────────────────────────────
+  mapNotice: {
+    position: 'absolute',
+    bottom: 12,
+    alignSelf: 'center',
+    backgroundColor: 'rgba(30,41,59,0.85)',
+    borderRadius: 100,
+    paddingVertical: 6,
+    paddingHorizontal: 14,
+  },
+  mapNoticeText: {
+    color: '#fff',
+    fontSize: 12,
+    fontWeight: '500',
+  },
+
+  // ── Locate-me button ────────────────────────────────────────────────────────
+  locateBtn: {
+    position: 'absolute',
+    top: 10,
+    right: 10,
+    zIndex: 10,
+    width: 40,
+    height: 40,
+    borderRadius: 8,
+    backgroundColor: COLORS.bg,
+    borderWidth: 1,
+    borderColor: COLORS.border,
+    alignItems: 'center',
+    justifyContent: 'center',
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 1 },
+    shadowOpacity: 0.1,
+    shadowRadius: 2,
+    elevation: 3,
+  },
+  locateBtnDark: {
+    backgroundColor: COLORS.bgDark,
+    borderColor: COLORS.borderDark,
+  },
+
+  // ── Geo error toast ─────────────────────────────────────────────────────────
+  geoError: {
+    position: 'absolute',
+    top: 60,
+    left: 10,
+    right: 10,
+    zIndex: 20,
+    flexDirection: 'row',
+    alignItems: 'flex-start',
+    gap: 8,
+    backgroundColor: '#fff',
+    borderWidth: 1.5,
+    borderColor: COLORS.error,
+    borderRadius: 8,
+    padding: 10,
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 4 },
+    shadowOpacity: 0.1,
+    shadowRadius: 8,
+    elevation: 6,
+  },
+  geoErrorText: {
+    flex: 1,
+    fontSize: 12,
+    color: COLORS.error,
+    lineHeight: 16,
+  },
+  geoErrorDismiss: {
+    paddingHorizontal: 4,
+  },
+  geoErrorDismissText: {
+    fontSize: 16,
+    color: COLORS.error,
+    lineHeight: 18,
+    opacity: 0.8,
+  },
+
+  // ── Coordinates strip ───────────────────────────────────────────────────────
+  coordsStrip: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingHorizontal: 16,
+    paddingVertical: 6,
+    backgroundColor: COLORS.bgSubtle,
+    borderBottomWidth: 1,
+    borderBottomColor: COLORS.border,
+  },
+  coordsStripDark: {
+    backgroundColor: COLORS.bgSubtleDark,
+    borderBottomColor: COLORS.borderDark,
+  },
+  coordsText: {
+    fontSize: 11,
+    color: COLORS.textFaint,
+    fontFamily: FONTS.mono,
+  },
+  coordsTextDark: {
+    color: COLORS.textFaintDark,
+  },
+
+  // ── Map actions bar ─────────────────────────────────────────────────────────
+  mapActions: {
+    padding: 12,
+    paddingHorizontal: 16,
+    gap: 6,
+    backgroundColor: COLORS.bg,
+  },
+  mapActionsDark: {
+    backgroundColor: COLORS.bgDark,
+  },
+  mapHint: {
+    textAlign: 'center',
+    fontSize: 11,
+    color: COLORS.textMuted,
+  },
+  mapHintDark: {
+    color: COLORS.textMutedDark,
+  },
+
+  // ── Buttons ─────────────────────────────────────────────────────────────────
+  btnPrimary: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: 6,
+    paddingVertical: 14,
+    paddingHorizontal: 18,
+    backgroundColor: COLORS.primary,
+    borderRadius: 8,
+    minHeight: 48,
+    shadowColor: COLORS.primary,
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.3,
+    shadowRadius: 4,
+    elevation: 3,
+  },
+  btnPrimaryText: {
+    color: '#fff',
+    fontSize: 15,
+    fontWeight: '600',
+    letterSpacing: -0.1,
+  },
+  btnGhost: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: 6,
+    paddingVertical: 10,
+    paddingHorizontal: 16,
+    borderRadius: 8,
+    borderWidth: 1.5,
+    borderColor: COLORS.border,
+    minHeight: 44,
+  },
+  btnGhostDark: {
+    borderColor: COLORS.borderDark,
+  },
+  btnGhostText: {
+    color: COLORS.textMuted,
+    fontSize: 14,
+    fontWeight: '600',
+  },
+  btnGhostTextDark: {
+    color: COLORS.textMutedDark,
+  },
+  btnSecondary: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: 6,
+    paddingVertical: 8,
+    paddingHorizontal: 14,
+    borderRadius: 8,
+    backgroundColor: COLORS.bgSubtle,
+    borderWidth: 1.5,
+    borderColor: COLORS.border,
+    minHeight: 36,
+  },
+  btnSecondaryText: {
+    color: COLORS.text,
+    fontSize: 12,
+    fontWeight: '600',
+  },
+  btnDisabled: {
+    opacity: 0.45,
+  },
+
+  // ── DigiPin reference strip (form step) ────────────────────────────────────
+  formDigipinStrip: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 8,
+    paddingHorizontal: 16,
+    paddingVertical: 10,
+    backgroundColor: COLORS.primaryLight,
+    borderBottomWidth: 1,
+    borderBottomColor: 'rgba(14,165,233,0.2)',
+  },
+  formDigipinStripDark: {
+    backgroundColor: 'rgba(14,165,233,0.12)',
+    borderBottomColor: 'rgba(14,165,233,0.2)',
+  },
+  formDigipinStripIcon: {
+    fontSize: 14,
+    color: COLORS.primary,
+  },
+  formDigipinStripLabel: {
+    fontSize: 10,
+    fontWeight: '700',
+    textTransform: 'uppercase',
+    letterSpacing: 1,
+    color: COLORS.textMuted,
+  },
+  formDigipinStripCode: {
+    fontSize: 13,
+    fontWeight: '700',
+    color: COLORS.primary,
+    letterSpacing: 0.6,
+    fontFamily: FONTS.mono,
+  },
+
+  // ── Loading state ───────────────────────────────────────────────────────────
+  loadingState: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: 12,
+    paddingVertical: 48,
+    paddingHorizontal: 16,
+  },
+  loadingText: {
+    fontSize: 13,
+    color: COLORS.textMuted,
+    textAlign: 'center',
+  },
+  loadingTextDark: {
+    color: COLORS.textMutedDark,
+  },
+
+  // ── Error state ─────────────────────────────────────────────────────────────
+  errorState: {
+    alignItems: 'center',
+    gap: 8,
+    paddingVertical: 32,
+    paddingHorizontal: 16,
+  },
+  errorIcon: {
+    fontSize: 28,
+    color: COLORS.warning,
+  },
+  errorMsg: {
+    fontSize: 13,
+    color: COLORS.textMuted,
+    textAlign: 'center',
+    maxWidth: 280,
+    lineHeight: 18,
+  },
+  errorMsgDark: {
+    color: COLORS.textMutedDark,
+  },
+
+  // ── Form sections ───────────────────────────────────────────────────────────
+  sectionHeader: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 8,
+    paddingHorizontal: 16,
+    paddingTop: 12,
+    paddingBottom: 10,
+  },
+  sectionHeaderIcon: {
+    fontSize: 14,
+  },
+  sectionHeaderText: {
+    fontSize: 12,
+    fontWeight: '600',
+    color: COLORS.textMuted,
+    textTransform: 'uppercase',
+    letterSpacing: 0.8,
+  },
+  sectionHeaderTextDark: {
+    color: COLORS.textMutedDark,
+  },
+  sectionDivider: {
+    height: 1,
+    backgroundColor: COLORS.border,
+    marginBottom: 0,
+  },
+  sectionDividerDark: {
+    backgroundColor: COLORS.borderDark,
+  },
+
+  // ── Auto-filled rows ────────────────────────────────────────────────────────
+  autoGrid: {
+    paddingHorizontal: 8,
+    paddingBottom: 12,
+  },
+  autoRow: {
+    paddingHorizontal: 8,
+    paddingVertical: 8,
+    borderRadius: 8,
+  },
+  autoRowLabel: {
+    fontSize: 10,
+    fontWeight: '600',
+    textTransform: 'uppercase',
+    letterSpacing: 0.8,
+    color: COLORS.textFaint,
+    marginBottom: 2,
+  },
+  autoRowLabelDark: {
+    color: COLORS.textFaintDark,
+  },
+  autoRowValue: {
+    fontSize: 13,
+    fontWeight: '500',
+    color: COLORS.text,
+  },
+  autoRowValueDark: {
+    color: COLORS.textDark,
+  },
+  autoRowValuePincode: {
+    fontSize: 14,
+    fontWeight: '700',
+    color: COLORS.primary,
+    fontFamily: FONTS.mono,
+  },
+  autoRowsRow: {
+    flexDirection: 'row',
+    gap: 0,
+  },
+  autoRowHalf: {
+    flex: 1,
+  },
+
+  // ── Locality selector ───────────────────────────────────────────────────────
+  localitySelector: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    paddingVertical: 6,
+    paddingHorizontal: 10,
+    borderWidth: 1.5,
+    borderColor: COLORS.border,
+    borderRadius: 8,
+    backgroundColor: COLORS.bg,
+    marginTop: 2,
+  },
+  localitySelectorDark: {
+    borderColor: COLORS.borderDark,
+    backgroundColor: COLORS.bgDark,
+  },
+  localitySelectorText: {
+    fontSize: 13,
+    fontWeight: '500',
+    color: COLORS.text,
+    flex: 1,
+  },
+  localitySelectorTextDark: {
+    color: COLORS.textDark,
+  },
+  localitySelectorArrow: {
+    fontSize: 12,
+    color: COLORS.textMuted,
+    marginLeft: 4,
+  },
+
+  // ── Locality picker modal ───────────────────────────────────────────────────
+  modalOverlay: {
+    flex: 1,
+    backgroundColor: 'rgba(0,0,0,0.5)',
+    justifyContent: 'flex-end',
+  },
+  modalSheet: {
+    backgroundColor: COLORS.bg,
+    borderTopLeftRadius: 20,
+    borderTopRightRadius: 20,
+    paddingTop: 8,
+    paddingBottom: 32,
+    maxHeight: '60%',
+  },
+  modalSheetDark: {
+    backgroundColor: COLORS.bgDark,
+  },
+  modalHandle: {
+    width: 40,
+    height: 4,
+    borderRadius: 2,
+    backgroundColor: COLORS.border,
+    alignSelf: 'center',
+    marginBottom: 12,
+  },
+  modalTitle: {
+    fontSize: 15,
+    fontWeight: '600',
+    color: COLORS.text,
+    paddingHorizontal: 20,
+    paddingBottom: 10,
+    borderBottomWidth: 1,
+    borderBottomColor: COLORS.border,
+  },
+  modalTitleDark: {
+    color: COLORS.textDark,
+    borderBottomColor: COLORS.borderDark,
+  },
+  modalOption: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    paddingHorizontal: 20,
+    paddingVertical: 14,
+    borderBottomWidth: StyleSheet.hairlineWidth,
+    borderBottomColor: COLORS.border,
+  },
+  modalOptionDark: {
+    borderBottomColor: COLORS.borderDark,
+  },
+  modalOptionSelected: {
+    backgroundColor: COLORS.primaryLight,
+  },
+  modalOptionText: {
+    fontSize: 14,
+    color: COLORS.text,
+  },
+  modalOptionTextDark: {
+    color: COLORS.textDark,
+  },
+  modalOptionTextSelected: {
+    color: COLORS.primary,
+    fontWeight: '600',
+  },
+  modalOptionCheckmark: {
+    fontSize: 14,
+    color: COLORS.primary,
+    fontWeight: '700',
+  },
+
+  // ── Manual fields ───────────────────────────────────────────────────────────
+  fieldsGrid: {
+    paddingHorizontal: 16,
+    paddingTop: 8,
+    paddingBottom: 16,
+    gap: 12,
+  },
+  fieldRow: {
+    flexDirection: 'row',
+    gap: 12,
+  },
+  field: {
+    flex: 1,
+    gap: 4,
+  },
+  fieldFull: {
+    gap: 4,
+  },
+  fieldLabel: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 4,
+  },
+  fieldLabelText: {
+    fontSize: 12,
+    fontWeight: '600',
+    color: COLORS.textMuted,
+  },
+  fieldLabelTextDark: {
+    color: COLORS.textMutedDark,
+  },
+  fieldRequired: {
+    fontSize: 14,
+    color: COLORS.error,
+    lineHeight: 16,
+  },
+  fieldOptional: {
+    fontSize: 10,
+    fontWeight: '400',
+    color: COLORS.textFaint,
+  },
+  fieldOptionalDark: {
+    color: COLORS.textFaintDark,
+  },
+  fieldInput: {
+    paddingVertical: 9,
+    paddingHorizontal: 11,
+    fontSize: 14,
+    color: COLORS.text,
+    backgroundColor: COLORS.bg,
+    borderWidth: 1.5,
+    borderColor: COLORS.border,
+    borderRadius: 8,
+    minHeight: 42,
+  },
+  fieldInputDark: {
+    color: COLORS.textDark,
+    backgroundColor: COLORS.bgDark,
+    borderColor: COLORS.borderDark,
+  },
+  fieldInputFocused: {
+    borderColor: COLORS.primary,
+  },
+
+  // ── Form actions ────────────────────────────────────────────────────────────
+  formActions: {
+    flexDirection: 'row',
+    gap: 8,
+    padding: 12,
+    paddingHorizontal: 16,
+    borderTopWidth: 1,
+    borderTopColor: COLORS.border,
+    backgroundColor: COLORS.bg,
+  },
+  formActionsDark: {
+    backgroundColor: COLORS.bgDark,
+    borderTopColor: COLORS.borderDark,
+  },
+
+  // ── Success screen ──────────────────────────────────────────────────────────
+  successScreen: {
+    alignItems: 'center',
+    gap: 12,
+    paddingVertical: 32,
+    paddingHorizontal: 20,
+  },
+  successIcon: {
+    fontSize: 48,
+  },
+  successTitle: {
+    fontSize: 18,
+    fontWeight: '700',
+    color: COLORS.text,
+    letterSpacing: -0.2,
+    textAlign: 'center',
+  },
+  successTitleDark: {
+    color: COLORS.textDark,
+  },
+  successAddress: {
+    fontSize: 13,
+    color: COLORS.textMuted,
+    textAlign: 'center',
+    maxWidth: 300,
+    lineHeight: 19,
+  },
+  successAddressDark: {
+    color: COLORS.textMutedDark,
+  },
+  successDigipinBadge: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 6,
+    paddingVertical: 5,
+    paddingLeft: 8,
+    paddingRight: 12,
+    borderRadius: 100,
+    borderWidth: 1.5,
+    borderColor: COLORS.primaryLight,
+    backgroundColor: COLORS.bg,
+  },
+  successDigipinBadgeDark: {
+    borderColor: 'rgba(14,165,233,0.35)',
+    backgroundColor: COLORS.bgDark,
+  },
+
+  // ── Footer ──────────────────────────────────────────────────────────────────
+  footer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: 4,
+    paddingVertical: 8,
+    paddingHorizontal: 16,
+    borderTopWidth: 1,
+    borderTopColor: COLORS.border,
+    backgroundColor: COLORS.bgSubtle,
+  },
+  footerDark: {
+    backgroundColor: COLORS.bgSubtleDark,
+    borderTopColor: COLORS.borderDark,
+  },
+  footerText: {
+    fontSize: 11,
+    color: COLORS.textFaint,
+  },
+  footerTextDark: {
+    color: COLORS.textFaintDark,
+  },
+  footerLink: {
+    fontSize: 11,
+    color: COLORS.primary,
+    fontWeight: '500',
+  },
+
+  // ── Generic text helpers ────────────────────────────────────────────────────
+  textLight: {
+    color: COLORS.textDark,
+  },
+  textMutedStyle: {
+    color: COLORS.textMuted,
+  },
+  textMutedDarkStyle: {
+    color: COLORS.textMutedDark,
+  },
+  textFaintStyle: {
+    color: COLORS.textFaint,
+  },
+  textFaintDarkStyle: {
+    color: COLORS.textFaintDark,
+  },
+});