From cc1dd0e8c9f6a93e7902edff085b4a95536d5cee Mon Sep 17 00:00:00 2001
From: Sofia Cantero <sofia.cantero@rootstrap.com>
Date: Tue, 17 Dec 2024 14:19:28 -0500
Subject: [PATCH] feat: replace hardcoded strings with JSON

---
 src/app/(app)/favorites.tsx                   |   3 +-
 src/app/(app)/index.tsx                       |  14 +-
 src/app/(app)/payment.tsx                     |   5 +-
 src/app/(app)/product-list.tsx                |  13 +-
 src/app/(app)/purchases.tsx                   |   3 +-
 src/app/(app)/shopping-cart.tsx               |  59 +++++---
 src/app/details/[id].tsx                      |   5 +-
 src/components/details/add-to-cart.tsx        |  10 +-
 src/components/favourites/favorite-card.tsx   |   3 +-
 src/components/home/carousel.tsx              |   5 +-
 src/components/home/payment-methods.tsx       |   7 +-
 src/components/login-form.tsx                 |  19 +--
 src/components/payment/buy-form.tsx           |  83 +++++------
 src/components/search-bar.tsx                 |   3 +-
 .../shopping-cart/shopping-card.tsx           |   9 +-
 src/components/signup-form.tsx                |  31 ++--
 src/core/hoc/multiple-input.tsx               |   3 +-
 src/translations/en.json                      | 132 ++++++++++++++++++
 18 files changed, 297 insertions(+), 110 deletions(-)

diff --git a/src/app/(app)/favorites.tsx b/src/app/(app)/favorites.tsx
index 5dcd829..0be993c 100644
--- a/src/app/(app)/favorites.tsx
+++ b/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}
diff --git a/src/app/(app)/index.tsx b/src/app/(app)/index.tsx
index 5880ea5..bf6a9a8 100644
--- a/src/app/(app)/index.tsx
+++ b/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>
diff --git a/src/app/(app)/payment.tsx b/src/app/(app)/payment.tsx
index bcf21d6..f38a727 100644
--- a/src/app/(app)/payment.tsx
+++ b/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();
diff --git a/src/app/(app)/product-list.tsx b/src/app/(app)/product-list.tsx
index 1fd9c88..f2ef17e 100644
--- a/src/app/(app)/product-list.tsx
+++ b/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} />
diff --git a/src/app/(app)/purchases.tsx b/src/app/(app)/purchases.tsx
index d4a500a..28f4042 100644
--- a/src/app/(app)/purchases.tsx
+++ b/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}
diff --git a/src/app/(app)/shopping-cart.tsx b/src/app/(app)/shopping-cart.tsx
index 7e3754b..e87877c 100644
--- a/src/app/(app)/shopping-cart.tsx
+++ b/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>
   );
diff --git a/src/app/details/[id].tsx b/src/app/details/[id].tsx
index ad83e37..c75c2fe 100644
--- a/src/app/details/[id].tsx
+++ b/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>
diff --git a/src/components/details/add-to-cart.tsx b/src/components/details/add-to-cart.tsx
index dd4c541..2f01bef 100644
--- a/src/components/details/add-to-cart.tsx
+++ b/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}
         />
diff --git a/src/components/favourites/favorite-card.tsx b/src/components/favourites/favorite-card.tsx
index ae779d3..385302b 100644
--- a/src/components/favourites/favorite-card.tsx
+++ b/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={() => {
diff --git a/src/components/home/carousel.tsx b/src/components/home/carousel.tsx
index dcab88c..8231072 100644
--- a/src/components/home/carousel.tsx
+++ b/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>
     </>
   );
diff --git a/src/components/home/payment-methods.tsx b/src/components/home/payment-methods.tsx
index 0984d2d..8228b48 100644
--- a/src/components/home/payment-methods.tsx
+++ b/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>
   );
diff --git a/src/components/login-form.tsx b/src/components/login-form.tsx
index ad0c35d..e37ee75 100644
--- a/src/components/login-form.tsx
+++ b/src/components/login-form.tsx
@@ -6,6 +6,7 @@ import { cssInterop } from 'nativewind';
 import { useForm } from 'react-hook-form';
 import { KeyboardAvoidingView } from 'react-native-keyboard-controller';
 
+import { auth } from '@/translations/en.json';
 import {
   type InputConstantsProps,
   type InputProps,
@@ -33,11 +34,11 @@ const TopImageLogo = () => {
 const BottomTextComponenent = () => {
   return (
     <View className="items-center justify-center rounded-lg bg-white p-4">
-      <Text className="font-medium">Don't have an account?</Text>
+      <Text className="font-medium">{auth.labels.withoutAccount}</Text>
       <Link href="/signup" asChild>
         <Button
           testID="signin-button"
-          label="Sing up"
+          label={auth.buttons.signup}
           className="h-12 w-full rounded-lg border-black"
           variant="outline"
         />
@@ -51,7 +52,7 @@ const ErrorMessageComponent = ({ showError }: { showError: boolean }) => {
     <View className="items-center">
       {showError && (
         <Text className="mb-1 mt-2 w-4/5 text-center font-bold text-error">
-          Sorry! Your email or password are incorrect.
+          {auth.error}
         </Text>
       )}
     </View>
@@ -91,13 +92,13 @@ export const LoginForm = ({ onSubmit = () => {} }: LoginFormProps) => {
   const inputProps: InputVariableProps[] = [
     {
       name: 'email',
-      label: 'Email',
-      placeholder: 'Type your email or telephone',
+      label: auth.labels.email,
+      placeholder: auth.placeholders.email,
     },
     {
       name: 'password',
-      label: 'Password',
-      placeholder: 'Type your password',
+      label: auth.labels.password,
+      placeholder: auth.placeholders.password,
       secureTextEntry: true,
     },
   ];
@@ -117,14 +118,14 @@ export const LoginForm = ({ onSubmit = () => {} }: LoginFormProps) => {
             )}
             <Button
               testID="login-button"
-              label="Log in"
+              label={auth.buttons.login}
               onPress={handleSubmit(onSubmit)}
               className="mb-2 h-14 w-full rounded-lg text-base font-medium"
             />
             <ErrorMessageComponent showError={hasErrors} />
             <View className="items-center">
               <Text className="mt-2 text-base font-bold text-link">
-                I forgot my password
+                {auth.labels.forgotPassword}
               </Text>
             </View>
           </View>
diff --git a/src/components/payment/buy-form.tsx b/src/components/payment/buy-form.tsx
index e5957e2..e1cae83 100644
--- a/src/components/payment/buy-form.tsx
+++ b/src/components/payment/buy-form.tsx
@@ -5,6 +5,7 @@ import { z } from 'zod';
 
 import { withFormHOC } from '@/core/hoc/hoc-form';
 import { FormInputs } from '@/core/hoc/multiple-input';
+import { purchaseForm } from '@/translations/en.json';
 import { Checkbox, ScrollView, Text, View } from '@/ui';
 
 import { DatePicker, schema as dateSchema } from '../date-picker';
@@ -22,42 +23,42 @@ type SectionFormProps = {
 
 export const _addressSchema = z.object({
   city: z.string({
-    required_error: 'City required',
+    required_error: purchaseForm.error.cityRequired,
   }),
   country: z.string({
-    required_error: 'Country required',
+    required_error: purchaseForm.error.countryRequired,
   }),
   address1: z.string({
-    required_error: 'Address required',
+    required_error: purchaseForm.error.addressReqired,
   }),
   address2: z.string().optional(),
   postalCode: z.string({
-    required_error: 'Postal Code required',
+    required_error: purchaseForm.error.postalCodeRequired,
   }),
 });
 
 const _cardSchema = z.object({
   cardNumber: z.string({
-    required_error: 'Card number required',
+    required_error: purchaseForm.error.cardNumberRequired,
   }),
   cvcCode: z.string({
-    required_error: 'CVC code required',
+    required_error: purchaseForm.error.cvcRequired,
   }),
 });
 
 export const additionalAddressSchema = z.object({
   addtionalCity: z.string({
-    required_error: 'City required',
+    required_error: purchaseForm.error.addressReqired,
   }),
   additionalCountry: z.string({
-    required_error: 'Country required',
+    required_error: purchaseForm.error.countryRequired,
   }),
   additionalAddress1: z.string({
-    required_error: 'Address required',
+    required_error: purchaseForm.error.addressReqired,
   }),
   additionalAddress2: z.string().optional(),
   addtionalPostalCode: z.string({
-    required_error: 'Postal Code required',
+    required_error: purchaseForm.error.postalCodeRequired,
   }),
 });
 
@@ -74,81 +75,81 @@ export type BuyFormSubmitErrorHandler = SubmitErrorHandler<TBuyFormFields>;
 export const addressFields = [
   {
     name: 'city',
-    label: 'City',
+    label: purchaseForm.labels.city,
     required: true,
-    placeholder: 'City',
+    placeholder: purchaseForm.placeholders.city,
   },
   {
     name: 'country',
-    label: 'Country',
+    label: purchaseForm.labels.country,
     required: true,
-    placeholder: 'Country',
+    placeholder: purchaseForm.placeholders.country,
   },
   {
     name: 'address1',
-    label: 'Address line 1',
+    label: purchaseForm.labels.addressLine1,
     required: true,
-    placeholder: 'Address 1',
+    placeholder: purchaseForm.placeholders.addressLine1,
   },
   {
     name: 'address2',
-    label: 'Address line 2',
+    label: purchaseForm.labels.addressLine2,
     required: false,
-    placeholder: 'Address 1',
+    placeholder: purchaseForm.placeholders.addressLine2,
   },
   {
     name: 'postalCode',
-    label: 'Postal Code',
+    label: purchaseForm.labels.postalCode,
     required: true,
-    placeholder: 'Postal code',
+    placeholder: purchaseForm.placeholders.postalCode,
   },
 ];
 
 export const additionalAddressFields = [
   {
     name: 'additionalCity',
-    label: 'City',
+    label: purchaseForm.labels.city,
     required: true,
-    placeholder: 'City',
+    placeholder: purchaseForm.placeholders.city,
   },
   {
     name: 'additionalCountry',
-    label: 'Country',
+    label: purchaseForm.labels.country,
     required: true,
-    placeholder: 'Country',
+    placeholder: purchaseForm.placeholders.country,
   },
   {
     name: 'additionalAddress1',
-    label: 'Address line 1',
+    label: purchaseForm.labels.addressLine1,
     required: true,
-    placeholder: 'Address 1',
+    placeholder: purchaseForm.placeholders.addressLine1,
   },
   {
     name: 'additionalAddress2',
-    label: 'Address line 2',
+    label: purchaseForm.labels.addressLine2,
     required: false,
-    placeholder: 'Address 1',
+    placeholder: purchaseForm.placeholders.addressLine2,
   },
   {
     name: 'additionalPostalCode',
-    label: 'Postal Code',
+    label: purchaseForm.labels.postalCode,
     required: true,
-    placeholder: 'Postal code',
+    placeholder: purchaseForm.placeholders.postalCode,
   },
 ];
 
 const cardFields = [
   {
     name: 'cardNumber',
-    label: 'Card Number',
+    label: purchaseForm.labels.cardNumber,
     required: true,
-    placeholder: 'Card number',
+    placeholder: purchaseForm.placeholders.cardNumber,
   },
   {
     name: 'cvcCode',
-    label: 'CVC code',
+    label: purchaseForm.placeholders.cvcCode,
     required: true,
-    placeholder: 'CVC code',
+    placeholder: purchaseForm.placeholders.cvcCode,
   },
 ];
 
@@ -188,19 +189,21 @@ const BuyForm = withFormHOC(
         <HeaderLogo />
         <ScrollView className="bg-light_background px-4">
           <SectionForm
-            title="Please add your shipping address"
+            title={purchaseForm.labels.addShippingAddress}
             control={control}
             fields={addressFields}
             editable={!disabled}
           />
           <SectionForm
-            title="Payment information"
+            title={purchaseForm.labels.paymentInformation}
             control={control}
             fields={cardFields.slice(0, 1)}
             editable={!disabled}
           />
-          <View className="">
-            <Text className="mb-1.5 mt-3 text-lg">Expiration date *</Text>
+          <View>
+            <Text className="mb-1.5 mt-3 text-lg">
+              {purchaseForm.labels.expirationDate} {}
+            </Text>
             <FormProvider {...formMethods}>
               <DatePicker editable={!disabled} />
             </FormProvider>
@@ -212,7 +215,7 @@ const BuyForm = withFormHOC(
           />
           {!showAddressForm && (
             <SectionForm
-              title="Please add your billing address"
+              title={purchaseForm.labels.addBillingAddress}
               fields={additionalAddressFields}
               control={control}
               editable={!disabled}
@@ -222,7 +225,7 @@ const BuyForm = withFormHOC(
             <Checkbox
               onChange={setShowAddressForm}
               checked={showAddressForm}
-              label="Use my shipping address as my billing address"
+              label={purchaseForm.labels.checkBox}
               accessibilityLabel="Label 2"
               className="mb-4"
             />
diff --git a/src/components/search-bar.tsx b/src/components/search-bar.tsx
index 05c340d..1cae662 100644
--- a/src/components/search-bar.tsx
+++ b/src/components/search-bar.tsx
@@ -1,6 +1,7 @@
 import images from 'assets';
 import { useEffect, useState } from 'react';
 
+import { productList } from '@/translations/en.json';
 import { Image, Input, View } from '@/ui';
 
 type SearchBarProps = {
@@ -20,7 +21,7 @@ export const SearchBar = ({ setQuery, query }: SearchBarProps) => {
       <View className="h-12 w-full flex-row items-center justify-between rounded-lg border-[0.5px] border-neutral-400 bg-white pl-2 pr-8">
         <View className="flex w-full items-center">
           <Input
-            placeholder="Search for products"
+            placeholder={productList.placeholders.searchBar}
             className="-mb-2 flex-1 p-2 text-black"
             placeholderTextColor="#000000"
             value={searchTerm}
diff --git a/src/components/shopping-cart/shopping-card.tsx b/src/components/shopping-cart/shopping-card.tsx
index 81636a2..7a01c07 100644
--- a/src/components/shopping-cart/shopping-card.tsx
+++ b/src/components/shopping-cart/shopping-card.tsx
@@ -4,6 +4,7 @@ import { memo } from 'react';
 
 import { usePatchShoppingCartItem } from '@/api/cart/use-patch-line-item';
 import { useRemoveShoppingCartItem } from '@/api/cart/use-remove-line-item';
+import { common } from '@/translations/en.json';
 import { Image, showErrorMessage, Text, TouchableOpacity, View } from '@/ui';
 
 export interface ShoppingProductCardProps {
@@ -93,16 +94,14 @@ export const ShoppingCard = memo(
     const { mutate: removeItem } = useRemoveShoppingCartItem({
       onSuccess: refetch,
     });
-
     const handlePatch = (newQuantity: number) => {
       patchShoppingCartItem({ itemId: id, quantity: newQuantity });
     };
-
     const handleRemove = () => {
       removeItem({ itemId: id });
     };
-
     const detailsRoute = '/details/[id]';
+
     return (
       <View className="w-full flex-row items-center justify-between space-x-4 rounded-lg bg-white p-3">
         <Link
@@ -133,7 +132,9 @@ export const ShoppingCard = memo(
           <StateLabel state={state} />
           <View className="mt-4 flex-row items-center justify-between">
             <TouchableOpacity onPress={handleRemove}>
-              <Text className="text-lg font-semibold text-link">Remove</Text>
+              <Text className="text-lg font-semibold text-link">
+                {common.buttons.remove}
+              </Text>
             </TouchableOpacity>
             <QuantityController
               quantity={quantity}
diff --git a/src/components/signup-form.tsx b/src/components/signup-form.tsx
index 5b1add7..b53860b 100644
--- a/src/components/signup-form.tsx
+++ b/src/components/signup-form.tsx
@@ -6,6 +6,7 @@ import { cssInterop } from 'nativewind';
 import { useForm } from 'react-hook-form';
 import { KeyboardAvoidingView } from 'react-native-keyboard-controller';
 
+import { auth } from '@/translations/en.json';
 import type {
   InputConstantsProps,
   InputProps,
@@ -22,13 +23,15 @@ const BottomTextComponenent = () => {
   return (
     <View className="items-center">
       <Text className="mb-4 w-3/4 items-center text-center text-base font-normal">
-        By signing up, you accept the
-        <Text className="font-bold text-link"> Data Policy.</Text>
+        {auth.labels.dataAgreement.label}
+        <Text className="font-bold text-link">
+          {auth.labels.dataAgreement.link}
+        </Text>
       </Text>
       <Text className="mb-2 items-center text-center text-base font-normal">
-        Already have an account?
+        {auth.labels.alreadyHaveAccount}
         <Link href="/login">
-          <Text className="font-bold text-link"> Log in</Text>
+          <Text className="font-bold text-link"> {auth.buttons.login}</Text>
         </Link>
       </Text>
     </View>
@@ -52,7 +55,7 @@ const ErrorMessageComponent = ({ showError }: { showError: boolean }) => {
     <View className="items-center">
       {showError && (
         <Text className="mb-1 mt-2 w-4/5 text-center font-bold text-error">
-          Sorry! Your email or password are incorrect.
+          {auth.error}
         </Text>
       )}
     </View>
@@ -92,20 +95,24 @@ export const SignupForm = ({ onSubmit = () => {} }: SingupFormProps) => {
   const inputProps: InputVariableProps[] = [
     {
       name: 'email',
-      label: 'Email',
-      placeholder: 'Type your email or telephone',
+      label: auth.labels.email,
+      placeholder: auth.placeholders.email,
+    },
+    {
+      name: 'name',
+      label: auth.labels.name,
+      placeholder: auth.placeholders.name,
     },
-    { name: 'name', label: 'Full Name', placeholder: 'Type your full name' },
     {
       name: 'password',
-      label: 'Password',
-      placeholder: 'Type your password',
+      label: auth.labels.password,
+      placeholder: auth.placeholders.password,
       secureTextEntry: true,
     },
     {
       name: 'password_confirmation',
-      label: 'Confirm Password',
-      placeholder: 'Re-type your password',
+      label: auth.labels.confirmPassword,
+      placeholder: auth.placeholders.confirmPassword,
       secureTextEntry: true,
     },
   ];
diff --git a/src/core/hoc/multiple-input.tsx b/src/core/hoc/multiple-input.tsx
index e9d3d99..5890948 100644
--- a/src/core/hoc/multiple-input.tsx
+++ b/src/core/hoc/multiple-input.tsx
@@ -1,3 +1,4 @@
+import { symbols } from '@/translations/en.json';
 import { ControlledInput, Text, View } from '@/ui';
 
 type FieldProps = {
@@ -32,7 +33,7 @@ export const FormInputs = ({
       {fields.map(({ label, name, placeholder, required }) => (
         <View key={name} className="">
           <Text className={textClassname}>
-            {label} {required ? '*' : ' '}
+            {label} {required ? symbols.required : ' '}
           </Text>
           <ControlledInput
             className={inputClassname}
diff --git a/src/translations/en.json b/src/translations/en.json
index dea5d59..f3a8445 100644
--- a/src/translations/en.json
+++ b/src/translations/en.json
@@ -1,7 +1,128 @@
 {
+  "auth": {
+    "buttons": {
+      "login": "Log in",
+      "signup": "Sign up"
+    },
+    "error": "Sorry! Your email or password are incorrect.",
+    "labels": {
+      "alreadyHaveAccount": "Already have an account? ",
+      "confirmPassword": "Confirm Password",
+      "dataAgreement": {
+        "label": "By signing up, you accept the ",
+        "link": "Data Policy"
+      },
+      "email": "Email",
+      "forgotPassword": "I forgot my password",
+      "name": "Full Name",
+      "password": "Password",
+      "withoutAccount": "Don't have an account?"
+    },
+    "placeholders": {
+      "confirmPassword": "Re-type your password",
+      "email": "Type your email or telephone",
+      "name": "Type your name",
+      "password": "Type your password"
+    }
+  },
+  "common": {
+    "buttons": {
+      "remove": "Remove"
+    }
+  },
+  "dashboard": {
+    "labels": {
+      "credit": "Credit",
+      "crypto": "Crypto",
+      "paymentMethods": "Payment Methods",
+      "paypal": "Paypal",
+      "seeAll": "See all"
+    },
+    "promotions": {
+      "checkOutPromotion": "Check out our new and restored furniture",
+      "fedEx": "FedEx",
+      "poweredByFedEx": "Powered by ",
+      "shipmentUpgrade": "We upgraded our shipments many levels up.",
+      "shopTodayDiscount": "Shop today and get a 10% discount!"
+    }
+  },
+  "favorites": {
+    "labels": {
+      "tittle": "My favourites"
+    }
+  },
   "onboarding": {
     "message": "Welcome to rootstrap app site"
   },
+  "productDetail": {
+    "buttons": {
+      "addToCart": "Add to cart"
+    },
+    "labels": {
+      "availability": "Availability",
+      "items": "items",
+      "productDescription": "Product description",
+      "quanity": "Quanity"
+    }
+  },
+  "productList": {
+    "buttons": {
+      "filters": "Filters"
+    },
+    "labels": {
+      "back": "Back",
+      "clearAll": "Clear all",
+      "noItemsFound": "No products found",
+      "searchedFor": "You searched for"
+    },
+    "placeholders": {
+      "searchBar": "Search for products"
+    }
+  },
+  "purchaseForm": {
+    "buttons": {
+      "buy": "Buy",
+      "cancel": "Cancel"
+    },
+    "error": {
+      "addressReqired": "Address required",
+      "cardNumberRequired": "Card number required",
+      "cityRequired": "City required",
+      "countryRequired": "Country required",
+      "cvcRequired": "CVC code required",
+      "postalCodeRequired": "Postal Code required"
+    },
+    "labels": {
+      "addBillingAddress": "Please add your billing address",
+      "addShippingAddress": "Please add your shipping address",
+      "addressLine1": "Address line 1",
+      "addressLine2": "Address line 2",
+      "cardNumber": "Card number",
+      "checkBox": "Use my shipping address as my billing address",
+      "city": "City",
+      "country": "Country",
+      "cvcCode": "CVC code",
+      "expirationDate": "Expiration date",
+      "paymentInformation": "Payment information",
+      "postalCode": "Postal Code"
+    },
+    "placeholders": {
+      "addressLine1": "First address",
+      "addressLine2": "Second address",
+      "cardNumber": "Card number",
+      "city": "City",
+      "country": "Country",
+      "cvcCode": "CVC",
+      "month": "Month",
+      "postalCode": "Postal Code",
+      "year": "Year"
+    }
+  },
+  "purchases": {
+    "labels": {
+      "previousPurchases": "My previous purchases"
+    }
+  },
   "settings": {
     "about": "About",
     "app_name": "App Name",
@@ -29,5 +150,16 @@
     "version": "Version",
     "website": "Website"
   },
+  "shoppingCart": {
+    "buttons": {
+      "checkout": "Go to checkout"
+    },
+    "labels": {
+      "total": "TOTAL"
+    }
+  },
+  "symbols": {
+    "required": "*"
+  },
   "welcome": "Welcome to rootstrap app site"
 }