Connect pickup variables to product

frontend/components/global/product-detail/InfoCard.vue

@@ -1,20 +1,30 @@
 <script lang="ts" setup>
+// imports
 
+import useGetProduct from "~/composables/api/product/useGetProduct";
+
+// states
+
+const route = useRoute();
+const id = route.params.id as string | undefined;
+
+const { data: product } = useGetProduct(id);
 </script>
 
 <template>
     <div class="flex items-center justify-between w-full bg-slate-100 border-[1.5px] border-slate-200 rounded-100 p-6">
         <div class="flex items-start gap-3">
             <div class="flex p-1 items-center justify-center rounded-full bg-success-500">
-                <Icon name="ci:check" class="size-4 **:stroke-white"/>
+                <Icon
+                    name="ci:check"
+                    class="size-4 **:stroke-white"
+                />
             </div>
             <div class="flex flex-col gap-1">
-                <span class="typo-label-sm whitespace-nowrap">دریافت حضوری فروشگاه</span>
+                <span class="typo-label-sm whitespace-nowrap">{{ product?.customer_pickup_title }}</span>
-                <span class="typo-p-sm whitespace-nowrap">معمولا طی ۲ ساعت اماده میشود</span>
+                <span class="typo-p-sm whitespace-nowrap">{{ product?.customer_pickup_description }}</span>
             </div>
         </div>
-        <span class="typo-p-xs max-sm:hidden">
+        <span class="typo-p-xs max-sm:hidden">فروشگاه هیملز</span>
-            برسی موجودی در فروشگاه های دیگر
-        </span>
     </div>
-</template>
+</template>

frontend/types/global.d.ts

@@ -112,6 +112,8 @@ declare global {
         best_deal_price_before_discount: string;
         best_deal_price_after_discount: string;
         best_deal_discount: number;
+        customer_pickup_title: null | string;
+        customer_pickup_description: null | string;
     };
 
     type ProductListItem = Pick<