@controleonline/ui-common 1.2.70 → 1.2.75

package/src/react/pages/IFoodIntegrationPage/styles.js

@@ -0,0 +1,764 @@
+import {Platform, StyleSheet} from 'react-native';
+
+const styles = StyleSheet.create({
+  container: {flex: 1, backgroundColor: '#F8FAFC'},
+  scroll: {padding: 16, paddingBottom: 32, gap: 14},
+  centerState: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    paddingHorizontal: 24,
+    gap: 8,
+  },
+  centerStateTitle: {
+    color: '#0F172A',
+    fontSize: 18,
+    fontWeight: '700',
+    textAlign: 'center',
+  },
+  heroCard: {
+    borderRadius: 22,
+    padding: 18,
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'flex-start',
+  },
+  heroCopy: {flex: 1, paddingRight: 16},
+  heroEyebrow: {
+    color: '#E2E8F0',
+    fontSize: 11,
+    fontWeight: '700',
+    letterSpacing: 1.2,
+    marginBottom: 6,
+  },
+  heroTitle: {
+    color: '#FFFFFF',
+    fontSize: 24,
+    fontWeight: '800',
+    marginBottom: 6,
+  },
+  heroText: {color: '#DBEAFE', fontSize: 13, lineHeight: 18},
+  heroBadge: {
+    width: 44,
+    height: 44,
+    borderRadius: 14,
+    backgroundColor: '#FFFFFF',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  heroLogo: {width: 24, height: 24},
+  sectionCard: {
+    borderRadius: 20,
+    backgroundColor: '#FFFFFF',
+    borderWidth: 1,
+    borderColor: '#E2E8F0',
+    padding: 16,
+    gap: 12,
+  },
+  statusRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+  },
+  sectionTitle: {color: '#0F172A', fontSize: 17, fontWeight: '800'},
+  catalogHint: {
+    color: '#64748B',
+    fontSize: 13,
+    lineHeight: 18,
+    marginTop: -2,
+  },
+  statusBadge: {borderRadius: 999, paddingHorizontal: 12, paddingVertical: 6},
+  statusBadgeText: {fontSize: 12, fontWeight: '700'},
+  metaGrid: {flexDirection: 'row', gap: 10},
+  metaBox: {
+    flex: 1,
+    borderRadius: 12,
+    borderWidth: 1,
+    borderColor: '#E2E8F0',
+    backgroundColor: '#F8FAFC',
+    paddingHorizontal: 12,
+    paddingVertical: 10,
+    gap: 4,
+  },
+  metaLabel: {
+    color: '#64748B',
+    fontSize: 11,
+    fontWeight: '700',
+    letterSpacing: 0.5,
+    textTransform: 'uppercase',
+  },
+  metaValue: {color: '#0F172A', fontSize: 14, fontWeight: '700'},
+  helperRow: {
+    borderRadius: 12,
+    borderWidth: 1,
+    borderColor: '#E2E8F0',
+    backgroundColor: '#F8FAFC',
+    paddingHorizontal: 12,
+    paddingVertical: 10,
+  },
+  helperText: {color: '#334155', fontSize: 13, lineHeight: 18},
+  errorBox: {
+    borderRadius: 12,
+    borderWidth: 1,
+    borderColor: '#FECACA',
+    backgroundColor: '#FEF2F2',
+    paddingHorizontal: 12,
+    paddingVertical: 10,
+    gap: 4,
+  },
+  errorTitle: {color: '#B91C1C', fontSize: 12, fontWeight: '800'},
+  errorText: {color: '#991B1B', fontSize: 12, lineHeight: 16},
+  storesList: {gap: 8},
+  storeCard: {
+    borderRadius: 12,
+    borderWidth: 1,
+    borderColor: '#E2E8F0',
+    backgroundColor: '#F8FAFC',
+    paddingHorizontal: 12,
+    paddingVertical: 10,
+    gap: 6,
+  },
+  storeCardSelected: {borderColor: '#0284C7', backgroundColor: '#EFF6FF'},
+  storeTop: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    gap: 8,
+  },
+  storeName: {flex: 1, color: '#0F172A', fontSize: 14, fontWeight: '700'},
+  storeStatusChip: {
+    borderRadius: 999,
+    paddingHorizontal: 10,
+    paddingVertical: 4,
+  },
+  storeStatusText: {fontSize: 11, fontWeight: '700'},
+  storeCode: {color: '#475569', fontSize: 12, fontWeight: '600'},
+  emptyStores: {
+    borderRadius: 12,
+    borderWidth: 1,
+    borderColor: '#E2E8F0',
+    backgroundColor: '#F8FAFC',
+    paddingHorizontal: 12,
+    paddingVertical: 10,
+  },
+  emptyStoresText: {color: '#475569', fontSize: 13, lineHeight: 18},
+  inputLabel: {color: '#334155', fontSize: 12, fontWeight: '700'},
+  input: {
+    borderRadius: 12,
+    borderWidth: 1,
+    borderColor: '#CBD5E1',
+    backgroundColor: '#FFFFFF',
+    color: '#0F172A',
+    fontSize: 14,
+    paddingHorizontal: 12,
+    paddingVertical: 10,
+  },
+  actionsRow: {flexDirection: 'row', gap: 10},
+  actionButton: {
+    flex: 1,
+    borderRadius: 12,
+    height: 44,
+    alignItems: 'center',
+    justifyContent: 'center',
+    flexDirection: 'row',
+    gap: 8,
+  },
+  actionButtonText: {color: '#FFFFFF', fontSize: 14, fontWeight: '700'},
+  actionButtonSecondary: {
+    flex: 1,
+    borderRadius: 12,
+    height: 44,
+    borderWidth: 1,
+    borderColor: '#FCA5A5',
+    backgroundColor: '#FFFFFF',
+    alignItems: 'center',
+    justifyContent: 'center',
+    flexDirection: 'row',
+    gap: 8,
+  },
+  actionButtonSecondaryDisabled: {opacity: 0.5},
+  actionButtonSecondaryText: {
+    color: '#c10015',
+    fontSize: 14,
+    fontWeight: '700',
+  },
+  syncButton: {
+    height: 42,
+    borderRadius: 12,
+    borderWidth: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    flexDirection: 'row',
+    gap: 8,
+    backgroundColor: '#FFFFFF',
+  },
+  syncButtonText: {fontSize: 13, fontWeight: '700'},
+  selectedStoreBox: {
+    borderRadius: 12,
+    borderWidth: 1,
+    borderColor: '#E2E8F0',
+    backgroundColor: '#F8FAFC',
+    paddingHorizontal: 12,
+    paddingVertical: 10,
+    gap: 4,
+  },
+  selectedStoreTitle: {
+    color: '#334155',
+    fontSize: 12,
+    fontWeight: '700',
+    textTransform: 'uppercase',
+  },
+  selectedStoreText: {color: '#0F172A', fontSize: 13, fontWeight: '600'},
+  storeOperationsBox: {gap: 6, marginTop: 4},
+  operationText: {
+    color: '#334155',
+    fontSize: 12,
+    lineHeight: 17,
+    fontWeight: '600',
+  },
+  interruptionsBox: {
+    borderRadius: 12,
+    borderWidth: 1,
+    borderColor: '#FDE68A',
+    backgroundColor: '#FFFBEB',
+    paddingHorizontal: 12,
+    paddingVertical: 10,
+    gap: 8,
+  },
+  interruptionsTitle: {
+    color: '#92400E',
+    fontSize: 12,
+    fontWeight: '800',
+    textTransform: 'uppercase',
+  },
+  interruptionItem: {
+    borderRadius: 10,
+    backgroundColor: '#FFFFFF',
+    borderWidth: 1,
+    borderColor: '#FDE68A',
+    paddingHorizontal: 10,
+    paddingVertical: 8,
+    gap: 2,
+  },
+  interruptionHeader: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    gap: 8,
+  },
+  interruptionText: {color: '#78350F', fontSize: 12, fontWeight: '700'},
+  interruptionMeta: {color: '#92400E', fontSize: 11, lineHeight: 15},
+  interruptionRemoveButton: {
+    width: 28,
+    height: 28,
+    borderRadius: 8,
+    borderWidth: 1,
+    borderColor: '#FECACA',
+    backgroundColor: '#FEF2F2',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  interruptionForm: {
+    borderRadius: 12,
+    borderWidth: 1,
+    borderColor: '#E2E8F0',
+    backgroundColor: '#F8FAFC',
+    paddingHorizontal: 12,
+    paddingVertical: 10,
+    gap: 8,
+  },
+  interruptionDateRow: {flexDirection: 'row', gap: 10},
+  interruptionDateField: {flex: 1, gap: 4},
+  sectionHeader: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    gap: 8,
+  },
+  selectionBadge: {
+    borderRadius: 999,
+    paddingHorizontal: 12,
+    paddingVertical: 6,
+  },
+  selectionBadgeText: {fontSize: 12, fontWeight: '700'},
+  searchBox: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 10,
+    borderWidth: 1,
+    borderColor: '#E2E8F0',
+    borderRadius: 16,
+    paddingHorizontal: 14,
+    paddingVertical: Platform.OS === 'web' ? 12 : 4,
+    marginBottom: 14,
+    backgroundColor: '#F8FAFC',
+  },
+  searchInput: {flex: 1, fontSize: 14, color: '#0F172A', paddingVertical: 10},
+  selectionSummaryRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    gap: 12,
+    marginTop: 8,
+    marginBottom: 16,
+  },
+  selectionSummaryText: {
+    flex: 1,
+    fontSize: 13,
+    color: '#64748B',
+    lineHeight: 18,
+  },
+  previewButton: {
+    minHeight: 42,
+    borderRadius: 14,
+    paddingHorizontal: 14,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: 8,
+  },
+  previewButtonText: {color: '#fff', fontSize: 13, fontWeight: '800'},
+  productsList: {gap: 10},
+  productCard: {
+    borderWidth: 1,
+    borderColor: '#E2E8F0',
+    borderRadius: 18,
+    padding: 14,
+    backgroundColor: '#fff',
+  },
+  productMain: {flexDirection: 'row', alignItems: 'flex-start', gap: 12},
+  productStatusIcon: {
+    width: 44,
+    height: 44,
+    borderRadius: 12,
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginTop: 2,
+  },
+  productThumb: {
+    width: 44,
+    height: 44,
+    borderRadius: 10,
+    marginTop: 2,
+    backgroundColor: '#F1F5F9',
+  },
+  productContent: {flex: 1, minWidth: 0},
+  productTitleRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    gap: 10,
+    marginBottom: 4,
+  },
+  productName: {flex: 1, fontSize: 15, fontWeight: '800', color: '#0F172A'},
+  productPrice: {fontSize: 13, fontWeight: '800', color: '#1E293B'},
+  productMeta: {fontSize: 12, color: '#64748B', marginBottom: 4},
+  productDescription: {fontSize: 12, color: '#475569', marginBottom: 4},
+  productCode: {fontSize: 11, color: '#1D4ED8', fontWeight: '700'},
+  productRemoteState: {
+    fontSize: 11,
+    color: '#15803D',
+    fontWeight: '700',
+    marginTop: 4,
+  },
+  productBlocker: {
+    fontSize: 11,
+    color: '#DC2626',
+    fontWeight: '700',
+    marginTop: 4,
+  },
+  itemStatusBadge: {
+    borderRadius: 999,
+    paddingHorizontal: 10,
+    paddingVertical: 4,
+    minWidth: 44,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  itemStatusText: {fontSize: 11, fontWeight: '800'},
+  priceEditRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 6,
+    marginTop: 4,
+  },
+  priceEditTrigger: {flexDirection: 'row', alignItems: 'center', gap: 4},
+  priceEditText: {fontSize: 13, fontWeight: '800', color: '#1E293B'},
+  priceInput: {
+    flex: 1,
+    borderWidth: 1,
+    borderColor: '#CBD5E1',
+    borderRadius: 8,
+    paddingHorizontal: 8,
+    paddingVertical: 4,
+    fontSize: 13,
+    color: '#0F172A',
+    backgroundColor: '#F8FAFC',
+    maxWidth: 100,
+  },
+  priceSaveButton: {
+    width: 28,
+    height: 28,
+    borderRadius: 8,
+    backgroundColor: '#16A34A',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  priceCancelButton: {
+    width: 28,
+    height: 28,
+    borderRadius: 8,
+    backgroundColor: '#F1F5F9',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  emptyProducts: {
+    borderRadius: 12,
+    borderWidth: 1,
+    borderColor: '#E2E8F0',
+    backgroundColor: '#F8FAFC',
+    padding: 16,
+    alignItems: 'center',
+  },
+  emptyProductsText: {color: '#64748B', fontSize: 13},
+  syncCatalogButton: {
+    height: 42,
+    borderRadius: 12,
+    borderWidth: 1,
+    borderColor: '#0EA5E9',
+    backgroundColor: '#FFFFFF',
+    alignItems: 'center',
+    justifyContent: 'center',
+    flexDirection: 'row',
+    gap: 8,
+    marginTop: 4,
+  },
+  syncCatalogButtonDisabled: {opacity: 0.5},
+  syncCatalogButtonText: {fontSize: 13, fontWeight: '700', color: '#0EA5E9'},
+  modalShell: {
+    flex: 1,
+    justifyContent: 'flex-end',
+  },
+  modalCard: {
+    backgroundColor: '#fff',
+    borderTopLeftRadius: 28,
+    borderTopRightRadius: 28,
+    paddingHorizontal: 20,
+    paddingTop: 18,
+    paddingBottom: 24,
+    maxHeight: '88%',
+  },
+  modalHeader: {
+    flexDirection: 'row',
+    alignItems: 'flex-start',
+    justifyContent: 'space-between',
+    gap: 12,
+    marginBottom: 16,
+  },
+  modalTitle: {
+    fontSize: 20,
+    fontWeight: '800',
+    color: '#0F172A',
+  },
+  modalSubtitle: {
+    fontSize: 13,
+    color: '#64748B',
+    marginTop: 4,
+  },
+  modalCloseButton: {
+    width: 34,
+    height: 34,
+    borderRadius: 12,
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: '#F8FAFC',
+  },
+  modalContent: {
+    paddingBottom: 10,
+  },
+  modalSummaryGrid: {
+    flexDirection: 'row',
+    gap: 10,
+    marginBottom: 18,
+  },
+  modalSummaryCard: {
+    flex: 1,
+    backgroundColor: '#F8FAFC',
+    borderRadius: 16,
+    padding: 14,
+    alignItems: 'center',
+  },
+  modalSummaryValue: {
+    fontSize: 22,
+    fontWeight: '800',
+    color: '#0F172A',
+    marginBottom: 4,
+  },
+  modalSummaryLabel: {
+    fontSize: 12,
+    fontWeight: '700',
+    color: '#64748B',
+  },
+  previewSection: {
+    marginBottom: 18,
+  },
+  previewSectionTitle: {
+    fontSize: 15,
+    fontWeight: '800',
+    color: '#0F172A',
+    marginBottom: 10,
+  },
+  previewLine: {
+    borderWidth: 1,
+    borderColor: '#E2E8F0',
+    borderRadius: 14,
+    padding: 12,
+    marginBottom: 8,
+    backgroundColor: '#fff',
+  },
+  previewLineTitle: {
+    fontSize: 14,
+    fontWeight: '700',
+    color: '#0F172A',
+    marginBottom: 4,
+  },
+  previewLineMeta: {
+    fontSize: 12,
+    color: '#64748B',
+  },
+  modalActions: {
+    flexDirection: 'row',
+    gap: 10,
+    marginTop: 8,
+  },
+  secondaryButton: {
+    flex: 1,
+    minHeight: 46,
+    borderRadius: 14,
+    borderWidth: 1,
+    borderColor: '#CBD5E1',
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: '#fff',
+  },
+  secondaryButtonText: {
+    fontSize: 14,
+    fontWeight: '800',
+    color: '#334155',
+  },
+  primaryButton: {
+    minHeight: 46,
+    borderRadius: 14,
+    paddingHorizontal: 16,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: 8,
+  },
+  primaryButtonText: {
+    color: '#fff',
+    fontSize: 14,
+    fontWeight: '800',
+  },
+  modalPrimaryButton: {
+    flex: 1.4,
+  },
+  availBadge: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 6,
+    borderRadius: 999,
+    paddingHorizontal: 12,
+    paddingVertical: 6,
+  },
+  availDot: {width: 7, height: 7, borderRadius: 999},
+  availBadgeText: {fontSize: 12, fontWeight: '700'},
+  opsGrid: {flexDirection: 'row', flexWrap: 'wrap', gap: 6},
+  opChip: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 5,
+    borderRadius: 10,
+    borderWidth: 1,
+    paddingHorizontal: 10,
+    paddingVertical: 6,
+  },
+  opChipText: {fontSize: 11, fontWeight: '700'},
+  availRow: {flexDirection: 'row', gap: 10, alignItems: 'center'},
+  availButton: {
+    flex: 1,
+    height: 44,
+    borderRadius: 12,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: 8,
+  },
+  availButtonDisabled: {opacity: 0.45},
+  availButtonText: {color: '#fff', fontSize: 13, fontWeight: '800'},
+  availRefreshButton: {
+    width: 44,
+    height: 44,
+    borderRadius: 12,
+    borderWidth: 1,
+    borderColor: '#E2E8F0',
+    backgroundColor: '#F8FAFC',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+
+  hoursEditBtn: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 5,
+    borderRadius: 999,
+    borderWidth: 1,
+    borderColor: '#BAE6FD',
+    backgroundColor: '#F0F9FF',
+    paddingHorizontal: 10,
+    paddingVertical: 5,
+  },
+  hoursEditBtnText: {fontSize: 12, fontWeight: '700', color: '#0EA5E9'},
+  hoursDayRow: {
+    flexDirection: 'row',
+    alignItems: 'flex-start',
+    gap: 10,
+    paddingVertical: 4,
+    borderBottomWidth: 1,
+    borderBottomColor: '#F1F5F9',
+  },
+  hoursDayLabel: {
+    width: 72,
+    fontSize: 13,
+    fontWeight: '700',
+    color: '#334155',
+    paddingTop: 2,
+  },
+  hoursList: {gap: 8},
+  hoursValues: {flex: 1, gap: 2},
+  hoursValue: {fontSize: 13, color: '#0F172A', fontWeight: '600'},
+  hoursClosed: {
+    fontSize: 12,
+    color: '#94A3B8',
+    fontWeight: '600',
+    fontStyle: 'italic',
+    paddingTop: 2,
+  },
+  hoursEditList: {gap: 8},
+  hoursEditContent: {flex: 1, gap: 6},
+  hoursInputRow: {flexDirection: 'row', alignItems: 'center', gap: 6},
+  hoursInput: {
+    width: 70,
+    borderWidth: 1,
+    borderColor: '#CBD5E1',
+    borderRadius: 8,
+    paddingHorizontal: 8,
+    paddingVertical: 4,
+    fontSize: 13,
+    color: '#0F172A',
+    backgroundColor: '#F8FAFC',
+  },
+  hoursSep: {fontSize: 13, color: '#94A3B8', fontWeight: '600'},
+  hoursShiftAddBtn: {
+    alignSelf: 'flex-start',
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 4,
+    paddingVertical: 4,
+  },
+  hoursShiftAddText: {fontSize: 12, fontWeight: '700', color: '#0EA5E9'},
+  hoursShiftRemoveBtn: {
+    width: 28,
+    height: 28,
+    borderRadius: 8,
+    borderWidth: 1,
+    borderColor: '#FECACA',
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: '#FEF2F2',
+  },
+  hoursCancelBtn: {
+    minHeight: 44,
+    paddingHorizontal: 16,
+    borderRadius: 12,
+    borderWidth: 1,
+    borderColor: '#E2E8F0',
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: '#fff',
+  },
+  hoursCancelText: {fontSize: 13, fontWeight: '700', color: '#64748B'},
+  dayToggle: {
+    width: 34,
+    height: 20,
+    borderRadius: 10,
+    backgroundColor: '#E2E8F0',
+    paddingHorizontal: 2,
+    justifyContent: 'center',
+  },
+  dayToggleOn: {backgroundColor: '#16A34A'},
+  dayToggleThumb: {
+    width: 16,
+    height: 16,
+    borderRadius: 8,
+    backgroundColor: '#fff',
+  },
+  dayToggleThumbOn: {marginLeft: 'auto'},
+
+  productDisclosureButton: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    alignSelf: 'flex-start',
+    gap: 6,
+    borderRadius: 999,
+    borderWidth: 1,
+    paddingHorizontal: 10,
+    paddingVertical: 7,
+    marginTop: 8,
+  },
+  productDisclosureButtonText: {
+    fontSize: 12,
+    fontWeight: '800',
+  },
+  optionsSection: {
+    marginTop: 8,
+    paddingTop: 8,
+    borderTopWidth: 1,
+    borderTopColor: '#F1F5F9',
+    gap: 6,
+  },
+  optionsSectionLabel: {
+    fontSize: 11,
+    fontWeight: '700',
+    color: '#64748B',
+    textTransform: 'uppercase',
+    letterSpacing: 0.5,
+    marginBottom: 2,
+  },
+  optionRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    gap: 8,
+    paddingVertical: 4,
+  },
+  optionInfo: {flex: 1, minWidth: 0},
+  optionName: {fontSize: 13, fontWeight: '600', color: '#0F172A'},
+  optionControls: {flexDirection: 'row', alignItems: 'center', gap: 6},
+  optStatusBadge: {
+    borderRadius: 999,
+    paddingHorizontal: 10,
+    paddingVertical: 4,
+    minWidth: 44,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  optNoIfoodId: {
+    fontSize: 10,
+    color: '#94A3B8',
+    fontWeight: '600',
+    fontStyle: 'italic',
+  },
+});
+
+export default styles;