Merge pull request #19 from SofiaCantero24/translations

Localization file

src/app/(app)/favorites.tsx

@@ -7,6 +7,7 @@ import { API_CONSTS } from '@/api/consts';
 import { useFavorites } from '@/api/favorites/use-favorites';
 import { FavoriteCard } from '@/components/favourites/favorite-card';
 import { HeaderLogo } from '@/components/header-logo';
+import { favorites } from '@/translations/en.json';
 import { SafeAreaView, Text, View } from '@/ui';
 
 export default function Favorite() {
@@ -32,7 +33,7 @@ export default function Favorite() {
       <SafeAreaView className="flex-1">
         <View className="bg-light_background pb-52">
           <HeaderLogo />
-          <Text className="my-4 px-4 text-lg">My favourites</Text>
+          <Text className="my-4 px-4 text-lg">{favorites.labels.tittle}</Text>
           <FlatList
             className="pb-6"
             onEndReached={handleLoadMore}

src/app/(app)/index.tsx

@@ -4,6 +4,7 @@ import { HeaderLogo } from '@/components/header-logo';
 import { Banner } from '@/components/home/bannner';
 import { HorizontalCarousel } from '@/components/home/carousel';
 import PaymentMethods from '@/components/home/payment-methods';
+import { dashboard } from '@/translations/en.json';
 import { SafeAreaView, ScrollView, Text, View } from '@/ui';
 
 export default function Feed() {
@@ -18,15 +19,15 @@ export default function Feed() {
           image={images.furnitureBanner()}
         >
           <Text className="mb-2 font-semibold color-white">
-            Check out our new and restored furniture
+            {dashboard.promotions.checkOutPromotion}
           </Text>
           <Text className="color-white">
-            Shop today and get a 10% discount!
+            {dashboard.promotions.shopTodayDiscount}
           </Text>
         </Banner>
         <View className="bg-white">
           <Text className="mb-8 mt-4 self-center text-lg font-bold">
-            Payment methods
+            {dashboard.labels.paymentMethods}
           </Text>
           <PaymentMethods />
         </View>
@@ -36,10 +37,13 @@ export default function Feed() {
           image={images.fedexBanner()}
         >
           <Text className="mb-2 font-semibold color-white">
-            We upgraded our shipments many levels up
+            {dashboard.promotions.shipmentUpgrade}
           </Text>
           <Text className="color-white">
-            Powered by <Text className="color-green-400">FedEx</Text>
+            {dashboard.promotions.poweredByFedEx}{' '}
+            <Text className="color-green-400">
+              {dashboard.promotions.fedEx}
+            </Text>
           </Text>
         </Banner>
       </ScrollView>

src/app/(app)/payment.tsx

@@ -6,6 +6,7 @@ import { KeyboardAvoidingView } from 'react-native-keyboard-controller';
 import { usePurchaseOrder } from '@/api/purchase/use-purchase';
 import type { BuyFormSubmitHandler } from '@/components/payment/buy-form';
 import { BuyForm } from '@/components/payment/buy-form';
+import { purchaseForm } from '@/translations/en.json';
 import { Button, SafeAreaView, ScrollView, showErrorMessage, View } from '@/ui';
 
 type FormButtonsProps = {
@@ -16,14 +17,14 @@ const FormButtons = ({ handleSubmit }: FormButtonsProps) => {
   return (
     <View className="bg-light_background px-4">
       <Button
-        label="Buy"
+        label={purchaseForm.buttons.buy}
         className="h-12 "
         textClassName="font-bold text-base"
         onPress={handleSubmit}
       />
       <Button
         variant="outline"
-        label="Cancel"
+        label={purchaseForm.buttons.cancel}
         className="mb-8"
         onPress={() => {
           router.back();

src/app/(app)/product-list.tsx

@@ -10,6 +10,7 @@ import { useProducts } from '@/api/products/use-products';
 import { HeaderLogo } from '@/components/header-logo';
 import { ProductCard } from '@/components/products-list/product-card';
 import { SearchBar } from '@/components/search-bar';
+import { productList } from '@/translations/en.json';
 import { Image, SafeAreaView, Text, TouchableOpacity, View } from '@/ui';
 
 type ProductsListProps = {
@@ -42,10 +43,12 @@ const SearchResult = ({
     return (
       <View className="flex-row justify-between px-5 pt-3">
         <Text className="text-lg text-gray-600">
-          You searched for "{query}”
+          {productList.labels.searchedFor} "{query}”
         </Text>
         <TouchableOpacity onPress={clearQuery}>
-          <Text className="text-lg text-link">Clear all</Text>
+          <Text className="text-lg text-link">
+            {productList.labels.clearAll}
+          </Text>
         </TouchableOpacity>
       </View>
     );
@@ -56,7 +59,7 @@ const ProductsList = memo(({ products, onEndReached }: ProductsListProps) => {
   if (products.length === 0) {
     return (
       <View className="m-4 gap-4 self-center text-4xl font-semibold">
-        <Text>No products found</Text>
+        <Text>{productList.labels.noItemsFound}</Text>
       </View>
     );
   }
@@ -133,7 +136,9 @@ export default function ProductList() {
         onPress={back}
         className="absolute left-2 top-[67] flex-row items-center rounded-full bg-green-600 p-2 px-4"
       >
-        <Text className="text-md font-bold text-white">Back</Text>
+        <Text className="text-md font-bold text-white">
+          {productList.labels.back}
+        </Text>
       </TouchableOpacity>
       <SearchBar setQuery={setQuery} query={query} />
       <SearchResult query={query} clearQuery={clearQuery} />

src/app/(app)/purchases.tsx

@@ -7,6 +7,7 @@ import { usePurchases } from '@/api/purchase/get-purchases';
 import type { Purchase } from '@/api/purchase/types';
 import { HeaderLogo } from '@/components/header-logo';
 import { PurchaseCard } from '@/components/purchases/purchase-card';
+import { purchases } from '@/translations/en.json';
 import { SafeAreaView, Text, View } from '@/ui';
 
 export default function Purchases() {
@@ -42,7 +43,7 @@ export default function Purchases() {
     <SafeAreaView className="bg-light_background">
       <HeaderLogo />
       <View className=" bg-light_background pb-32 pt-4">
-        <Text className="mx-4">My previous purchases</Text>
+        <Text className="mx-4">{purchases.labels.previousPurchases}</Text>
         <FlatList
           data={products?.allLineItems}
           extraData={products?.allLineItems}

src/app/(app)/shopping-cart.tsx

@@ -1,29 +1,61 @@
 import { router, useFocusEffect } from 'expo-router';
 import { useCallback } from 'react';
 import { FlatList } from 'react-native';
+import { twMerge } from 'tailwind-merge';
 
 import { useShoppingCart } from '@/api/cart/use-line-items';
 import { API_CONSTS } from '@/api/consts';
 import { HeaderLogo } from '@/components/header-logo';
 import { ShoppingCard } from '@/components/shopping-cart/shopping-card';
+import { shoppingCart } from '@/translations/en.json';
 import { Button, SafeAreaView, Text, View } from '@/ui';
 
+type TotalPriceBarProps = {
+  totalPrice?: string;
+};
+
+const TotalPriceBar = ({ totalPrice }: TotalPriceBarProps) => {
+  return (
+    <View className="mt-5 flex-row items-center justify-between px-4">
+      <View className="flex-row items-center">
+        <Text className="text-xl font-semibold">
+          {shoppingCart.labels.total}
+        </Text>
+        <View className="mx-5 h-px w-12 items-center justify-center bg-black shadow-lg" />
+        <Text className="text-xl font-semibold">{totalPrice}</Text>
+      </View>
+      <Button
+        className="m-0 flex h-12 items-center"
+        textClassName="my-2 px-2"
+        label={shoppingCart.buttons.checkout}
+        onPress={() => {
+          router.push('/payment');
+        }}
+      />
+    </View>
+  );
+};
+
 export default function ShoppingCart() {
   const { data, hasNextPage, fetchNextPage, isFetchingNextPage, refetch } =
     useShoppingCart({
       variables: { items: API_CONSTS.INITIAL_ITEMS },
     });
+
   const handleReachEnd = () => {
     if (hasNextPage && !isFetchingNextPage) {
       fetchNextPage();
     }
   };
+
   useFocusEffect(
     useCallback(() => {
       refetch();
     }, [refetch])
   );
+
   const productsToDisplay = data?.pages.flatMap((page) => page.lineItems) || [];
+
   return (
     <SafeAreaView>
       <HeaderLogo />
@@ -36,12 +68,13 @@ export default function ShoppingCart() {
           renderItem={({ item, index }) => {
             const isFirstItem = index === 0;
             const isLastItem = index === productsToDisplay.length - 1;
-
             return (
               <View
-                className={`mx-4 border ${isFirstItem ? 'rounded-t-lg' : ''} ${
-                  isLastItem ? 'rounded-b-lg' : ''
-                }`}
+                className={twMerge(
+                  'mx-4 border',
+                  isFirstItem && 'rounded-t-lg',
+                  isLastItem && 'rounded-b-lg'
+                )}
               >
                 <ShoppingCard
                   id={item.id}
@@ -57,23 +90,7 @@ export default function ShoppingCart() {
           }}
           keyExtractor={(item) => item.id.toString()}
         />
-        <View className="mt-5 flex-row items-center justify-between px-4">
-          <View className="flex-row items-center">
-            <Text className="text-xl font-semibold">TOTAL</Text>
-            <View className="mx-5 h-px w-12 items-center justify-center bg-black shadow-lg" />
-            <Text className="text-xl font-semibold">
-              {data?.pages[0].totalPrice}
-            </Text>
-          </View>
-          <Button
-            className="m-0 flex h-12 items-center"
-            textClassName="my-2 px-2"
-            label="Go to checkout"
-            onPress={() => {
-              router.push('/payment');
-            }}
-          />
-        </View>
+        <TotalPriceBar totalPrice={data?.pages[0].totalPrice} />
       </View>
     </SafeAreaView>
   );

src/app/details/[id].tsx

@@ -8,6 +8,7 @@ import { useGetItemDetails } from '@/api/products/use-details';
 import { AddToCartSection } from '@/components/details/add-to-cart';
 import { ImageDisplayer } from '@/components/details/image-displayer';
 import { HeaderLogo } from '@/components/header-logo';
+import { productDetail } from '@/translations/en.json';
 import {
   SafeAreaView,
   ScrollView,
@@ -77,7 +78,9 @@ export default function DetailsScreen() {
             buy={addToCart}
           />
           <View className="mb-4">
-            <Text className="mb-3 mr-2 font-bold">Product description</Text>
+            <Text className="mb-3 mr-2 font-bold">
+              {productDetail.labels.productDescription}
+            </Text>
             <Text>{data?.description}</Text>
           </View>
         </View>

src/components/details/add-to-cart.tsx

@@ -1,6 +1,7 @@
 import { useState } from 'react';
 import { Dropdown } from 'react-native-element-dropdown';
 
+import { productDetail } from '@/translations/en.json';
 import { Button, Text, View } from '@/ui';
 
 type DropdownItem = {
@@ -33,7 +34,9 @@ export const AddToCartSection = ({
   return (
     <View className="mb-4 flex-row items-center justify-between">
       <View className="items-center">
-        <Text className="mb-3 mr-2 font-bold">Quantity</Text>
+        <Text className="mb-3 mr-2 font-bold">
+          {productDetail.labels.quanity}
+        </Text>
         <Dropdown
           style={{
             width: 90,
@@ -57,11 +60,12 @@ export const AddToCartSection = ({
       </View>
       <View className="w-4/5 items-center">
         <Text className=" mr-2 font-bold">
-          Availability: {availableQuantityOptions} items
+          {productDetail.labels.availability} {availableQuantityOptions}{' '}
+          {productDetail.labels.items}
         </Text>
         <Button
           className="mt-3 h-12 w-72"
-          label="Add to cart"
+          label={productDetail.buttons.addToCart}
           textClassName="font-bold text-base"
           onPress={buy}
         />

src/components/favourites/favorite-card.tsx

@@ -3,6 +3,7 @@ import { memo } from 'react';
 import { twMerge } from 'tailwind-merge';
 
 import { useRemoveFavorite } from '@/api/favorites/remove-favorite';
+import { common } from '@/translations/en.json';
 import { Button, Image, Text, View } from '@/ui';
 
 interface FavoriteCardProps {
@@ -64,7 +65,7 @@ export const FavoriteCard = memo(
           <StateLabel state={state} />
           <View className="mt-2 flex-row-reverse items-center justify-between">
             <Button
-              label="Remove"
+              label={common.buttons.remove}
               textClassName="text-black"
               className="h-12 border bg-transparent px-5"
               onPress={() => {

src/components/home/carousel.tsx

@@ -3,6 +3,7 @@ import { useCallback } from 'react';
 import { FlatList } from 'react-native';
 
 import { useProducts } from '@/api/products/use-products';
+import { dashboard } from '@/translations/en.json';
 import { Text, TouchableOpacity } from '@/ui';
 
 import { CarouselItem } from './carousel-item';
@@ -45,7 +46,9 @@ export const HorizontalCarousel = () => {
           router.push('/(app)/product-list');
         }}
       >
-        <Text className="font-semibold text-link">See all</Text>
+        <Text className="font-semibold text-link">
+          {dashboard.labels.seeAll}
+        </Text>
       </TouchableOpacity>
     </>
   );

src/components/home/payment-methods.tsx

@@ -1,5 +1,6 @@
 import images from 'assets';
 
+import { dashboard } from '@/translations/en.json';
 import { Image, Text, TouchableOpacity, View } from '@/ui';
 
 const PaymentMethods = () => {
@@ -11,7 +12,7 @@ const PaymentMethods = () => {
           className="mb-6 h-9 w-9"
           contentFit="contain"
         />
-        <Text>Credit</Text>
+        <Text>{dashboard.labels.credit}</Text>
       </TouchableOpacity>
       <View className="mx-5 h-full w-px bg-black" />
       <TouchableOpacity className="mx-3 items-center justify-items-center">
@@ -20,7 +21,7 @@ const PaymentMethods = () => {
           className="mb-6 h-9 w-9"
           contentFit="contain"
         />
-        <Text>Paypal</Text>
+        <Text>{dashboard.labels.paypal}</Text>
       </TouchableOpacity>
       <View className="mx-5 h-full w-px bg-black" />
       <TouchableOpacity className="mx-3 items-center justify-items-center">
@@ -29,7 +30,7 @@ const PaymentMethods = () => {
           className="mb-6 h-9 w-9"
           contentFit="contain"
         />
-        <Text>Crypto</Text>
+        <Text>{dashboard.labels.crypto}</Text>
       </TouchableOpacity>
     </View>
   );