Crea la pantalla de checkout

Clase 13 de 15 • Curso de App Mobile utilizando Woocommerce

Clase anteriorSiguiente clase

William Peralta

student•

algunas opciones de las pregunta del examen son ambiguas..
en especial la que habla de como implementar la lista de PG

Lucio Negrello

teacher•

Hola William, cómo estás? Lamento que lo hayas sentido así. Lo revisaré para próximos cursos. Saludos!

Isaac Israel Groisman Oberman

student•

Hola como están, como haría para conseguir el Shipping method habilitado en woocommerce y hacer que se sume a la orden ?

Lucio Negrello

teacher•

Hola Isaac, cómo estás? Para listar los Shipping Methods, tenés que utilizar este endpoint. Luego al crear tu orden tenés que enviar dos propiedades nuevas dentro del objeto. La información de Shipping:

"shipping": {
    "first_name": "John",
    "last_name": "Doe",
    "address_1": "969 Market",
    "address_2": "",
    "city": "San Francisco",
    "state": "CA",
    "postcode": "94103",
    "country": "US"
  },

y el costo:

"shipping_lines": [
    {
      "method_id": "flat_rate",
      "method_title": "Flat Rate",
      "total": "10.00"
    }
  ]

Para ver el ejemplo completo podés revisar este endpoint. Saludos!

Isaac Israel Groisman Oberman

student•

@whoisnegrello Muchas gracias!

Isaac Israel Groisman Oberman

student•

como haría para conseguir el shipping method que se encuentre habilitado en woocommerce, mostrarlo en la pantalla del order summary del cart o en checkout y que se sume al precio total de la orden? gracias.

Lucio Negrello

teacher•

"shipping": {
    "first_name": "John",
    "last_name": "Doe",
    "address_1": "969 Market",
    "address_2": "",
    "city": "San Francisco",
    "state": "CA",
    "postcode": "94103",
    "country": "US"
  },

y el costo:

"shipping_lines": [
    {
      "method_id": "flat_rate",
      "method_title": "Flat Rate",
      "total": "10.00"
    }
  ]

Para ver el ejemplo completo podés revisar este endpoint. Saludos!

David Rangel

student•

Másomenos quedaría así con Typescript (pero está mal la parte del get):

import { Picker } from '@react-native-picker/picker';
import { useEffect, useState } from 'react';
import {
  Dimensions,
  Platform,
  StyleSheet,
  Text,
  TextInput,
} from 'react-native';
import { ScrollView } from 'react-native-reanimated/lib/typescript/Animated';
import { SafeAreaView } from 'react-native-safe-area-context';

import { config } from '@/src/config/config';
import { colors, sizes } from '@/src/resources/constants';
import { apiFetch } from '@/src/services/apis/apiFetch';
import { Header } from '../header/Header';

type CheckoutStateType = {
  paymentGateways: any[];
  name: string;
  email: string;
  currentPG: undefined | string;
};

const initialState = {
  paymentGateways: [],
  name: '',
  email: '',
  currentPG: undefined,
};

export const CheckoutScreen = () => {
  const [checkoutState, setCheckoutState] =
    useState<CheckoutStateType>(initialState);

  const { get } = apiFetch();

  const handleChangeName = (data: string) => {
    setCheckoutState((prev) => ({
      ...prev,
      name: data,
    }));
  };

  const handleChangeEmail = (data: string) => {
    setCheckoutState((prev) => ({
      ...prev,
      name: data,
    }));
  };

  const handleChangePg = (data: string) => {
    setCheckoutState((prev) => ({
      ...prev,
      currentPG: data,
    }));
  };

  const fetchPaymentGateways = async () => {
    const paymentGatewayList = await get(
      `${config.siteUrl}payment_gateways?${config.wcCredentials}`
    );

    const enabledPaymentGateway = paymentGatewayList.filter(
      (pg: any) => pg.enabled
    );
    setCheckoutState((prev) => ({
      ...prev,
      paymentGateways: enabledPaymentGateway,
    }));
  };

  useEffect(() => {
    fetchPaymentGateways();
  }, []);

  return (
    <SafeAreaView>
      <Header route={''} navigation={''} />
      <ScrollView style={styles.formContainer}>
        <TextInput
          style={styles.input}
          onChangeText={(newName) => handleChangeName(newName)}
          value={checkoutState.name}
          placeholder='name'
        />
        <TextInput
          style={styles.input}
          onChangeText={(newEmail) => handleChangeEmail(newEmail)}
          value={checkoutState.name}
          placeholder='email'
        />
        <Text style={styles.titleDropdown}> Métodos de pago</Text>
        <Picker
          style={styles.dropdown}
          selectedValue={checkoutState.currentPG}
          onValueChange={(currentPg) => handleChangePg(currentPg)}
        >
          {checkoutState.paymentGateways.map((pg) => (
            <Picker.Item key={pg.id} label={pg.title} value={pg.id} />
          ))}
        </Picker>
      </ScrollView>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  formContainer: {
    height:
      Platform.OS === 'ios'
        ? Dimensions.get('window').height - sizes.headerHeight - 160 - 50
        : Dimensions.get('window').height - sizes.headerHeight - 160,
  },
  input: {
    fontSize: 16,
    marginHorizontal: 8,
    marginVertical: 8,
    padding: 4,
    borderRadius: 4,
    backgroundColor: colors.white,
  },
  titleDropdown: {
    marginTop: 16,
    textAlign: 'center',
    borderStyle: 'solid',
    borderBottomColor: colors.green,
  },
  dropdown: {
    marginHorizontal: 8,
    padding: 0,
  },
  buttonBuyContainer: {
    height: sizes.ctaButton,
    alignItems: 'center',
    alignContent: 'center',
    justifyContent: 'center',
    backgroundColor: colors.green,
    marginVertical: 8,
    marginHorizontal: 16,
    paddingVertical: 12,
    paddingHorizontal: 32,
    borderRadius: 4,
  },
  textBuy: {
    color: colors.lightGrey,
    fontSize: 20,
    fontWeight: 'bold',
  },
  messageContainer: {
    marginHorizontal: 8,
    marginBottom: 8,
    alignItems: 'center',
  },
  textMessage: {
    color: colors.darkGrey,
    fontSize: 14,
    fontWeight: 'bold',
  },
  buttonGoBackContainer: {
    height: sizes.ctaButton,
    alignItems: 'center',
    backgroundColor: colors.darkGrey,
    marginVertical: 8,
    marginHorizontal: 16,
    paddingVertical: 12,
    paddingHorizontal: 32,
    borderRadius: 4,
  },
  textGoBack: {
    color: colors.lightGrey,
    fontSize: 16,
    fontWeight: 'bold',
  },
});

David Rangel

student•

Hola, creo que estoy algo confundido. ¿Sí estaban definidos get y post en ApiFetch.js?

David Rangel

student•

Hola, otra razón para utilizar archivos con la terminación .jsx o .tsx, es que esto le ayuda a IntelliSense a hacer las inferencias de las importaciones al momento de crear archivos que renderizan nodos o componentes.

"shipping": {
    "first_name": "John",
    "last_name": "Doe",
    "address_1": "969 Market",
    "address_2": "",
    "city": "San Francisco",
    "state": "CA",
    "postcode": "94103",
    "country": "US"
  },

"shipping": {
    "first_name": "John",
    "last_name": "Doe",
    "address_1": "969 Market",
    "address_2": "",
    "city": "San Francisco",
    "state": "CA",
    "postcode": "94103",
    "country": "US"
  },

import { Picker } from '@react-native-picker/picker';
import { useEffect, useState } from 'react';
import {
  Dimensions,
  Platform,
  StyleSheet,
  Text,
  TextInput,
} from 'react-native';
import { ScrollView } from 'react-native-reanimated/lib/typescript/Animated';
import { SafeAreaView } from 'react-native-safe-area-context';

import { config } from '@/src/config/config';
import { colors, sizes } from '@/src/resources/constants';
import { apiFetch } from '@/src/services/apis/apiFetch';
import { Header } from '../header/Header';

type CheckoutStateType = {
  paymentGateways: any[];
  name: string;
  email: string;
  currentPG: undefined | string;
};

const initialState = {
  paymentGateways: [],
  name: '',
  email: '',
  currentPG: undefined,
};

export const CheckoutScreen = () => {
  const [checkoutState, setCheckoutState] =
    useState<CheckoutStateType>(initialState);

  const { get } = apiFetch();

  const handleChangeName = (data: string) => {
    setCheckoutState((prev) => ({
      ...prev,
      name: data,
    }));
  };

  const handleChangeEmail = (data: string) => {
    setCheckoutState((prev) => ({
      ...prev,
      name: data,
    }));
  };

  const handleChangePg = (data: string) => {
    setCheckoutState((prev) => ({
      ...prev,
      currentPG: data,
    }));
  };

  const fetchPaymentGateways = async () => {
    const paymentGatewayList = await get(
      `${config.siteUrl}payment_gateways?${config.wcCredentials}`
    );

    const enabledPaymentGateway = paymentGatewayList.filter(
      (pg: any) => pg.enabled
    );
    setCheckoutState((prev) => ({
      ...prev,
      paymentGateways: enabledPaymentGateway,
    }));
  };

  useEffect(() => {
    fetchPaymentGateways();
  }, []);

  return (
    <SafeAreaView>
      <Header route={''} navigation={''} />
      <ScrollView style={styles.formContainer}>
        <TextInput
          style={styles.input}
          onChangeText={(newName) => handleChangeName(newName)}
          value={checkoutState.name}
          placeholder='name'
        />
        <TextInput
          style={styles.input}
          onChangeText={(newEmail) => handleChangeEmail(newEmail)}
          value={checkoutState.name}
          placeholder='email'
        />
        <Text style={styles.titleDropdown}> Métodos de pago</Text>
        <Picker
          style={styles.dropdown}
          selectedValue={checkoutState.currentPG}
          onValueChange={(currentPg) => handleChangePg(currentPg)}
        >
          {checkoutState.paymentGateways.map((pg) => (
            <Picker.Item key={pg.id} label={pg.title} value={pg.id} />
          ))}
        </Picker>
      </ScrollView>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  formContainer: {
    height:
      Platform.OS === 'ios'
        ? Dimensions.get('window').height - sizes.headerHeight - 160 - 50
        : Dimensions.get('window').height - sizes.headerHeight - 160,
  },
  input: {
    fontSize: 16,
    marginHorizontal: 8,
    marginVertical: 8,
    padding: 4,
    borderRadius: 4,
    backgroundColor: colors.white,
  },
  titleDropdown: {
    marginTop: 16,
    textAlign: 'center',
    borderStyle: 'solid',
    borderBottomColor: colors.green,
  },
  dropdown: {
    marginHorizontal: 8,
    padding: 0,
  },
  buttonBuyContainer: {
    height: sizes.ctaButton,
    alignItems: 'center',
    alignContent: 'center',
    justifyContent: 'center',
    backgroundColor: colors.green,
    marginVertical: 8,
    marginHorizontal: 16,
    paddingVertical: 12,
    paddingHorizontal: 32,
    borderRadius: 4,
  },
  textBuy: {
    color: colors.lightGrey,
    fontSize: 20,
    fontWeight: 'bold',
  },
  messageContainer: {
    marginHorizontal: 8,
    marginBottom: 8,
    alignItems: 'center',
  },
  textMessage: {
    color: colors.darkGrey,
    fontSize: 14,
    fontWeight: 'bold',
  },
  buttonGoBackContainer: {
    height: sizes.ctaButton,
    alignItems: 'center',
    backgroundColor: colors.darkGrey,
    marginVertical: 8,
    marginHorizontal: 16,
    paddingVertical: 12,
    paddingHorizontal: 32,
    borderRadius: 4,
  },
  textGoBack: {
    color: colors.lightGrey,
    fontSize: 16,
    fontWeight: 'bold',
  },
});

Crea la pantalla de checkout

Presentación

Bienvenida y presentación

Preparando el proyecto

Análisis del proyecto y conexión con la API de WooCommerce

¿Cómo puedo comenzar un proyecto con React Native?

Creando tu app

Planifica y crea el estado global de tu app

Crea la pantalla de productos

Crea la vista de productos en la pantalla principal

Aprende a crear la navegación de tu app

Crea la pantalla de detalles de productos

¿Cómo agregar el carrito a tu app?

Crea la vista de productos de tu carrito

Implementa cambios visuales basados en el carrito

Comprende cómo funcionan los payment gateways para tu app

Crea la pantalla de checkout

Guarda los pedidos de tu app

Conclusiones

¿Por dónde puedes seguir tu ruta?