@controleonline/ui-common 1.2.71 → 1.2.76

package/src/react/pages/Food99IntegrationPage/components/Food99QuickWalletModal.js

@@ -0,0 +1,181 @@
+import React from 'react';
+import { ActivityIndicator, StyleSheet, Text, TextInput, TouchableOpacity, View } from 'react-native';
+import Icon from 'react-native-vector-icons/Feather';
+import { colors } from '@controleonline/../../src/styles/colors';
+
+import AnimatedModal from '@controleonline/ui-common/src/react/components/AnimatedModal';
+
+import styles from '../styles';
+
+const resolveButtonPalette = (palette, accentColor) => {
+  const primaryBackground =
+    palette.buttonBackground || accentColor || palette.primary;
+  const primaryBorder = palette.buttonBorder || primaryBackground;
+  const primaryText = palette.buttonText || palette.white;
+  const primaryIcon = palette.buttonIcon || primaryText;
+  const secondaryBackground =
+    palette.buttonBackgroundSecondary || palette.white;
+  const secondaryBorder = palette.buttonBorderSecondary || palette.border;
+  const secondaryText = palette.buttonTextSecondary || palette.textSecondary;
+  const disabledBackground =
+    palette.buttonDisabledBackground || secondaryBorder;
+  const disabledBorder = palette.buttonBorderSecondary || secondaryBorder;
+  const disabledText = palette.buttonDisabledText || secondaryText;
+
+  return {
+    primaryBackground,
+    primaryBorder,
+    primaryText,
+    primaryIcon,
+    secondaryBackground,
+    secondaryBorder,
+    secondaryText,
+    disabledBackground,
+    disabledBorder,
+    disabledText,
+  };
+};
+
+const createModalStyles = (palette = colors) =>
+  StyleSheet.create({
+    form: {
+      gap: 8,
+      marginBottom: 14,
+    },
+    label: {
+      fontSize: 12,
+      fontWeight: '700',
+      color: palette.textSecondary,
+      textTransform: 'uppercase',
+      letterSpacing: 0.3,
+    },
+    input: {
+      borderWidth: 1,
+      borderColor: palette.border,
+      borderRadius: 12,
+      minHeight: 44,
+      backgroundColor: palette.background,
+      paddingHorizontal: 12,
+      paddingVertical: 10,
+      fontSize: 14,
+      fontWeight: '600',
+      color: palette.text,
+    },
+    hint: {
+      fontSize: 12,
+      lineHeight: 18,
+      color: palette.textSecondary,
+    },
+  });
+
+// Modal leve para cadastrar uma carteira da empresa ativa sem sair da integração.
+export default function Food99QuickWalletModal({
+  visible,
+  walletName,
+  setWalletName,
+  actionLoading,
+  accentColor,
+  palette = colors,
+  onClose,
+  onCreate,
+}) {
+  const modalStyles = createModalStyles(palette);
+  const buttonPalette = resolveButtonPalette(palette, accentColor);
+  const isCreating = actionLoading === 'create-wallet';
+
+  return (
+    <AnimatedModal visible={visible} onRequestClose={onClose}>
+      <View style={styles.modalShell}>
+        <View style={styles.modalCard}>
+          <View style={styles.modalHeader}>
+            <View>
+              <Text style={styles.modalTitle}>Cadastro rapido de carteira</Text>
+              <Text style={styles.modalSubtitle}>
+                Crie a carteira da empresa ativa para usá-la como carteira de repasse do 99Food.
+              </Text>
+            </View>
+            <TouchableOpacity onPress={onClose} style={styles.modalCloseButton}>
+              <Icon name="x" size={18} color={palette.textSecondary} />
+            </TouchableOpacity>
+          </View>
+
+          <View style={modalStyles.form}>
+            <Text style={modalStyles.label}>Nome da carteira</Text>
+            <TextInput
+              value={walletName}
+              onChangeText={setWalletName}
+              placeholder="Ex.: Pic Pay"
+              placeholderTextColor={palette.textSecondary}
+              autoFocus
+              style={modalStyles.input}
+              returnKeyType="done"
+              onSubmitEditing={onCreate}
+            />
+            <Text style={modalStyles.hint}>
+              O cadastro rápido cria a carteira na empresa ativa. Depois disso, ela fica disponível para seleção
+              no campo de repasse.
+            </Text>
+          </View>
+
+          <View style={styles.modalActions}>
+            <TouchableOpacity
+              style={[
+                styles.secondaryButton,
+                {
+                  borderColor: buttonPalette.secondaryBorder,
+                  backgroundColor: buttonPalette.secondaryBackground,
+                },
+              ]}
+              onPress={onClose}>
+              <Text
+                style={[
+                  styles.secondaryButtonText,
+                  { color: buttonPalette.secondaryText },
+                ]}>
+                Cancelar
+              </Text>
+            </TouchableOpacity>
+            <TouchableOpacity
+              style={[
+                styles.primaryButton,
+                styles.modalPrimaryButton,
+                {
+                  borderWidth: 1,
+                  borderColor: isCreating
+                    ? buttonPalette.disabledBorder
+                    : buttonPalette.primaryBorder,
+                  backgroundColor: isCreating
+                    ? buttonPalette.disabledBackground
+                    : buttonPalette.primaryBackground,
+                },
+              ]}
+              onPress={onCreate}
+              disabled={isCreating}>
+              {isCreating ? (
+                <ActivityIndicator
+                  size="small"
+                  color={buttonPalette.disabledText}
+                />
+              ) : (
+                <>
+                  <Icon
+                    name="plus"
+                    size={16}
+                    color={buttonPalette.primaryIcon}
+                  />
+                  <Text
+                    style={[
+                      styles.primaryButtonText,
+                      { color: buttonPalette.primaryText },
+                    ]}>
+                    Criar carteira
+                  </Text>
+                </>
+              )}
+            </TouchableOpacity>
+          </View>
+        </View>
+      </View>
+    </AnimatedModal>
+  );
+}

package/src/react/pages/Food99IntegrationPage/components/Food99SettingsTab.js

@@ -0,0 +1,306 @@
+import React from 'react';
+import { ActivityIndicator, Platform, Text, TextInput, TouchableOpacity, View } from 'react-native';
+import { Picker } from '@react-native-picker/picker';
+import Icon from 'react-native-vector-icons/Feather';
+import { colors } from '@controleonline/../../src/styles/colors';
+
+import { withOpacity } from '@controleonline/../../src/styles/branding';
+
+import styles from '../styles';
+import {
+  deliveryMethodOptions,
+  sanitizeConfirmMethodInput,
+  sanitizeRadiusInput,
+  sanitizeTimeInput,
+} from '../utils';
+
+const resolveButtonPalette = (palette, accentColor) => {
+  const primaryBackground =
+    palette.buttonBackground || accentColor || palette.primary;
+  const primaryBorder = palette.buttonBorder || primaryBackground;
+  const primaryText = palette.buttonText || palette.white;
+  const primaryIcon = palette.buttonIcon || primaryText;
+  const secondaryBackground =
+    palette.buttonBackgroundSecondary || palette.white;
+  const secondaryBorder = palette.buttonBorderSecondary || palette.border;
+  const secondaryText = palette.buttonTextSecondary || palette.textSecondary;
+  const secondaryIcon = palette.buttonIconSecondary || secondaryText;
+  const disabledBackground =
+    palette.buttonDisabledBackground || secondaryBorder;
+  const disabledText = palette.buttonDisabledText || secondaryText;
+
+  return {
+    primaryBackground,
+    primaryBorder,
+    primaryText,
+    primaryIcon,
+    secondaryBackground,
+    secondaryBorder,
+    secondaryText,
+    secondaryIcon,
+    disabledBackground,
+    disabledText,
+  };
+};
+
+// Aba isolada para configurações operacionais da loja.
+export default function Food99SettingsTab({
+  shadowStyle,
+  accentColor,
+  settingsSummaryRows,
+  storeSettingsDraft,
+  setStoreSettingsDraft,
+  wallets,
+  walletLoading,
+  actionLoading,
+  onQuickCreateWallet,
+  onSave,
+  palette = colors,
+}) {
+  const buttonPalette = resolveButtonPalette(palette, accentColor);
+
+  return (
+    <View style={[styles.panel, shadowStyle]}>
+      <View style={styles.panelHeader}>
+        <View>
+          <Text style={styles.panelTitle}>Configuracoes operacionais</Text>
+          <Text style={styles.panelSubtitle}>
+            Ajuste raio, horario, metodo de entrega, confirmacao e carteira de repasse sem misturar isso com a conexão da loja.
+          </Text>
+        </View>
+      </View>
+
+      <View style={styles.statusRows}>
+        {settingsSummaryRows.map(row => (
+          <View
+            key={row.label}
+            style={[
+              styles.statusRowItem,
+              row.wide && styles.statusRowItemWide,
+            ]}>
+            <Text style={styles.statusRowLabel}>{row.label}</Text>
+            <Text style={row.small ? styles.statusRowValueSmall : styles.statusRowValue}>{row.value}</Text>
+          </View>
+        ))}
+      </View>
+
+      <View style={styles.settingsForm}>
+        <View style={styles.formField}>
+          <Text style={styles.formLabel}>Raio de atendimento (km)</Text>
+          <TextInput
+            value={storeSettingsDraft.deliveryRadiusKm}
+            onChangeText={value =>
+              setStoreSettingsDraft(current => ({ ...current, deliveryRadiusKm: sanitizeRadiusInput(value) }))
+            }
+            placeholder="Ex.: 5"
+            keyboardType="decimal-pad"
+            style={styles.formInput}
+            placeholderTextColor={palette.textSecondary}
+          />
+        </View>
+
+        <View style={styles.formRow}>
+          <View style={[styles.formField, styles.formFieldHalf]}>
+            <Text style={styles.formLabel}>Abertura (HH:mm)</Text>
+            <TextInput
+              value={storeSettingsDraft.openTime}
+              onChangeText={value =>
+                setStoreSettingsDraft(current => ({ ...current, openTime: sanitizeTimeInput(value) }))
+              }
+              placeholder="08:00"
+              keyboardType="number-pad"
+              maxLength={5}
+              style={styles.formInput}
+              placeholderTextColor={palette.textSecondary}
+            />
+          </View>
+
+          <View style={[styles.formField, styles.formFieldHalf]}>
+            <Text style={styles.formLabel}>Fechamento (HH:mm)</Text>
+            <TextInput
+              value={storeSettingsDraft.closeTime}
+              onChangeText={value =>
+                setStoreSettingsDraft(current => ({ ...current, closeTime: sanitizeTimeInput(value) }))
+              }
+              placeholder="22:00"
+              keyboardType="number-pad"
+              maxLength={5}
+              style={styles.formInput}
+              placeholderTextColor={palette.textSecondary}
+            />
+          </View>
+        </View>
+
+        <View style={styles.formRow}>
+          <View style={[styles.formField, styles.formFieldHalf]}>
+            <Text style={styles.formLabel}>Metodo de entrega</Text>
+            <View style={styles.optionGroup}>
+              {deliveryMethodOptions.map(option => {
+                const selected = String(storeSettingsDraft.deliveryMethod) === String(option.value);
+
+                return (
+                  <TouchableOpacity
+                    key={option.value}
+                    onPress={() =>
+                      setStoreSettingsDraft(current => ({ ...current, deliveryMethod: option.value }))
+                    }
+                    style={[
+                      styles.optionChip,
+                      {
+                        borderColor: selected
+                          ? buttonPalette.primaryBorder
+                          : buttonPalette.secondaryBorder,
+                        backgroundColor: selected
+                          ? buttonPalette.primaryBackground
+                          : buttonPalette.secondaryBackground,
+                      },
+                    ]}>
+                    <Text
+                      style={[
+                        styles.optionChipText,
+                        {
+                          color: selected
+                            ? buttonPalette.primaryText
+                            : buttonPalette.secondaryText,
+                        },
+                      ]}>
+                      {option.label}
+                    </Text>
+                  </TouchableOpacity>
+                );
+              })}
+            </View>
+          </View>
+
+          <View style={[styles.formField, styles.formFieldHalf]}>
+            <Text style={styles.formLabel}>Metodo de confirmacao</Text>
+            <TextInput
+              value={storeSettingsDraft.confirmMethod}
+              onChangeText={value =>
+                setStoreSettingsDraft(current => ({ ...current, confirmMethod: sanitizeConfirmMethodInput(value) }))
+              }
+              placeholder="Ex.: 1"
+              keyboardType="number-pad"
+              maxLength={3}
+              style={styles.formInput}
+              placeholderTextColor={palette.textSecondary}
+            />
+          </View>
+        </View>
+
+        <View style={styles.formField}>
+          <Text style={styles.formLabel}>ID da area de entrega (opcional)</Text>
+          <TextInput
+            value={storeSettingsDraft.deliveryAreaId}
+            onChangeText={value =>
+              setStoreSettingsDraft(current => ({ ...current, deliveryAreaId: value }))
+            }
+            placeholder="Usa automaticamente a primeira area quando vazio"
+            style={styles.formInput}
+            placeholderTextColor={palette.textSecondary}
+          />
+        </View>
+
+        <View style={styles.formField}>
+          <View style={styles.formFieldHeaderRow}>
+            <Text style={styles.formLabel}>Carteira de repasse</Text>
+            <TouchableOpacity
+              onPress={onQuickCreateWallet}
+              style={[
+                styles.inlineAction,
+                {
+                  borderWidth: 1,
+                  borderColor: buttonPalette.secondaryBorder,
+                  backgroundColor: buttonPalette.secondaryBackground,
+                },
+              ]}>
+              <Icon
+                name="plus"
+                size={14}
+                color={buttonPalette.secondaryIcon}
+              />
+              <Text
+                style={[
+                  styles.inlineActionText,
+                  { color: buttonPalette.secondaryText },
+                ]}>
+                Cadastro rapido
+              </Text>
+            </TouchableOpacity>
+          </View>
+          <View style={styles.pickerWrap}>
+            <Picker
+              selectedValue={storeSettingsDraft.settlementWalletId}
+              mode={Platform.OS === 'android' ? 'dropdown' : undefined}
+              onValueChange={value =>
+                setStoreSettingsDraft(current => ({ ...current, settlementWalletId: String(value || '') }))
+              }
+              enabled={!walletLoading && Array.isArray(wallets) && wallets.length > 0}
+              style={styles.picker}>
+              <Picker.Item
+                label={
+                  walletLoading
+                    ? 'Carregando carteiras...'
+                    : Array.isArray(wallets) && wallets.length === 0
+                      ? 'Nenhuma carteira cadastrada'
+                      : 'Selecione uma carteira'
+                }
+                value=""
+              />
+              {(Array.isArray(wallets) ? wallets : []).map(wallet => (
+                <Picker.Item
+                  key={wallet.id}
+                  label={`${wallet.wallet || 'Carteira'} (#${wallet.id})`}
+                  value={String(wallet.id)}
+                />
+              ))}
+            </Picker>
+          </View>
+          <Text style={styles.formHint}>
+            A carteira selecionada recebe o repasse semanal do 99Food e precisa pertencer a empresa ativa.
+          </Text>
+        </View>
+      </View>
+
+      <View style={styles.actionRow}>
+        <TouchableOpacity
+          style={[
+            styles.primaryButton,
+            {
+              borderWidth: 1,
+              borderColor: buttonPalette.primaryBorder,
+              backgroundColor: buttonPalette.primaryBackground,
+            },
+            actionLoading === 'save-settings' && {
+              borderColor: buttonPalette.secondaryBorder,
+              backgroundColor: buttonPalette.disabledBackground,
+            },
+          ]}
+          onPress={onSave}
+          disabled={actionLoading === 'save-settings'}>
+          {actionLoading === 'save-settings' ? (
+            <ActivityIndicator
+              size="small"
+              color={buttonPalette.disabledText}
+            />
+          ) : (
+            <>
+              <Icon
+                name="save"
+                size={16}
+                color={buttonPalette.primaryIcon}
+              />
+              <Text
+                style={[
+                  styles.primaryButtonText,
+                  { color: buttonPalette.primaryText },
+                ]}>
+                Salvar configuracoes
+              </Text>
+            </>
+          )}
+        </TouchableOpacity>
+      </View>
+    </View>
+  );
+}