tabexseriescomponents 0.0.79 → 0.0.81

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (179) hide show
  1. package/dist/index.cjs.js +1819 -658
  2. package/dist/index.esm.js +1819 -658
  3. package/dist/index.umd.js +1819 -658
  4. package/package.json +1 -1
  5. package/srcOLD/Contexts/LanguageContext.jsx +0 -347
  6. package/srcOLD/Contexts/ProductsCardsSectionContext.jsx +0 -28
  7. package/srcOLD/StylesJS/Customstyles.js +0 -235
  8. package/srcOLD/TabexComponents/Cards/CategoryCardwithhoveraction/CategoryCardwithhoveraction.jsx +0 -214
  9. package/srcOLD/TabexComponents/Cards/Categorycard_fullimage/Categorycard_fullimage.jsx +0 -258
  10. package/srcOLD/TabexComponents/Cards/Categorycard_slidebgscaled/Categorycard_slidebgscaled.jsx +0 -206
  11. package/srcOLD/TabexComponents/Cards/Categorycard_with_trianglebg/Categorycard_with_trianglebg.jsx +0 -176
  12. package/srcOLD/TabexComponents/Cards/Categorycard_with_twolinestransition/Categorycard_with_twolinestransition.jsx +0 -207
  13. package/srcOLD/TabexComponents/Cards/Categorycard_withshapes/Categorycard_withshapes.jsx +0 -162
  14. package/srcOLD/TabexComponents/Cards/Categorycard_withtext/Categorycard_withtext.jsx +0 -193
  15. package/srcOLD/TabexComponents/Cards/Classiccategorycard/Classiccategorycard.jsx +0 -158
  16. package/srcOLD/TabexComponents/Cards/Horizontalcard/Horizontalcard.jsx +0 -286
  17. package/srcOLD/TabexComponents/Cards/MenuCard/MenuCard.jsx +0 -558
  18. package/srcOLD/TabexComponents/Cards/ModernProductCard/ModernProductCard.jsx +0 -486
  19. package/srcOLD/TabexComponents/Cards/Productcard6/Productcard6.jsx +0 -300
  20. package/srcOLD/TabexComponents/Cards/Productcard7/Productcard7.jsx +0 -288
  21. package/srcOLD/TabexComponents/Cards/Productcard_animatedbuttons/Productcard_animatedbuttons.jsx +0 -307
  22. package/srcOLD/TabexComponents/Cards/Productcard_with_circularbg/Productcard_with_circularbg.jsx +0 -295
  23. package/srcOLD/TabexComponents/Cards/Productcard_with_circularhover/Productcard_with_circularhover.jsx +0 -325
  24. package/srcOLD/TabexComponents/Cards/Productcard_with_slideanimation/Productcard_with_slideanimation.jsx +0 -290
  25. package/srcOLD/TabexComponents/Cards/Productcard_with_variants/Productcard_with_variants.jsx +0 -303
  26. package/srcOLD/TabexComponents/Cards/Productcard_with_zoominonhover/Productcard_with_zoominonhover.jsx +0 -466
  27. package/srcOLD/TabexComponents/Cards/Productcarddefault/Productcarddefault.jsx +0 -282
  28. package/srcOLD/TabexComponents/Cards/Productccard_with_imageontopleft/Productccard_with_imageontopleft.jsx +0 -298
  29. package/srcOLD/TabexComponents/Cards/Prouductcard_with_zoomhover/Prouductcard_with_zoomhover.jsx +0 -139
  30. package/srcOLD/TabexComponents/Cards/Simplecategorycardwithtextbelow/Simplecategorycardwithtextbelow.jsx +0 -135
  31. package/srcOLD/TabexComponents/Cards/Simpleproductcard/Simpleproductcard.jsx +0 -304
  32. package/srcOLD/TabexComponents/Cards/StylishProductCard/StylishProductCard.jsx +0 -291
  33. package/srcOLD/TabexComponents/Footer/Footer1/Footer1.jsx +0 -418
  34. package/srcOLD/TabexComponents/Footer/Footer2/Footer2.jsx +0 -382
  35. package/srcOLD/TabexComponents/Footer/Footer3/Footer3.jsx +0 -308
  36. package/srcOLD/TabexComponents/Footer/Footer4/Footer4.jsx +0 -438
  37. package/srcOLD/TabexComponents/Footer/Footer5/Footer5.jsx +0 -495
  38. package/srcOLD/TabexComponents/Footer/Footer6/Footer6.jsx +0 -295
  39. package/srcOLD/TabexComponents/Footer/Footer7/Footer7.jsx +0 -373
  40. package/srcOLD/TabexComponents/Footer/Simplefooter/Simplefooter.jsx +0 -238
  41. package/srcOLD/TabexComponents/Generalfiles/images/egyptflag.png +0 -0
  42. package/srcOLD/TabexComponents/Generalfiles/images/noimage.png +0 -0
  43. package/srcOLD/TabexComponents/Generalfiles/images/payment/cod.png +0 -0
  44. package/srcOLD/TabexComponents/Generalfiles/images/payment/fawry.png +0 -0
  45. package/srcOLD/TabexComponents/Generalfiles/images/payment/payment.png +0 -0
  46. package/srcOLD/TabexComponents/Generalfiles/images/payment/paymob.png +0 -0
  47. package/srcOLD/TabexComponents/Generalfiles/images/payment/paypal.png +0 -0
  48. package/srcOLD/TabexComponents/Generalfiles/images/payment/visa.png +0 -0
  49. package/srcOLD/TabexComponents/Generalfiles/images/shoppingcart.png +0 -0
  50. package/srcOLD/TabexComponents/Generalfiles/images/tabexlogo.png +0 -0
  51. package/srcOLD/TabexComponents/Generalfiles/images/unknownmaleuser.png +0 -0
  52. package/srcOLD/TabexComponents/Generalfiles/images/usflag.png +0 -0
  53. package/srcOLD/TabexComponents/Generalfiles/images/whatsapp.png +0 -0
  54. package/srcOLD/TabexComponents/Headers/AllinoneHeader/AllinoneHeader.jsx +0 -724
  55. package/srcOLD/TabexComponents/Headers/ClassicHeader/ClassicHeader.jsx +0 -687
  56. package/srcOLD/TabexComponents/Headers/Header4/Header4.jsx +0 -632
  57. package/srcOLD/TabexComponents/Headers/Header6/Header6.jsx +0 -669
  58. package/srcOLD/TabexComponents/Headers/Header8/Header8.jsx +0 -882
  59. package/srcOLD/TabexComponents/Headers/HeaderRestaurant/HeaderRestaurant.jsx +0 -754
  60. package/srcOLD/TabexComponents/Headers/Header_threesectionslogocentered/Header_threesectionslogocentered.jsx +0 -798
  61. package/srcOLD/TabexComponents/Headers/Headerresponsive/Headerresponsive.jsx +0 -686
  62. package/srcOLD/TabexComponents/Headers/HeaderwithContactinfo/HeaderwithContactinfo.jsx +0 -938
  63. package/srcOLD/TabexComponents/Headers/Modernheader/Modernheader.jsx +0 -706
  64. package/srcOLD/TabexComponents/Headers/StylishHeader/StylishHeader.jsx +0 -821
  65. package/srcOLD/TabexComponents/Headers/Subheader/Subheader copy.jsx +0 -228
  66. package/srcOLD/TabexComponents/Headers/Subheader/Subheader.jsx +0 -251
  67. package/srcOLD/TabexComponents/Sections/BackgroundImages/Backgroundimage1/Backgroundimage1.jsx +0 -312
  68. package/srcOLD/TabexComponents/Sections/BackgroundImages/Backgroundimage_with_toppill/Backgroundimage_with_toppill.jsx +0 -278
  69. package/srcOLD/TabexComponents/Sections/BackgroundImages/BackgroundimageandTextsection/BackgroundimageandTextsection.jsx +0 -138
  70. package/srcOLD/TabexComponents/Sections/BackgroundImages/Section_with_rightbgcont/Section_with_rightbgcont.jsx +0 -160
  71. package/srcOLD/TabexComponents/Sections/BackgroundImages/Threebgimages/Threebgimages.jsx +0 -295
  72. package/srcOLD/TabexComponents/Sections/BackgroundImages/Twobgimages/Twobgimages.jsx +0 -784
  73. package/srcOLD/TabexComponents/Sections/Cards/CardsSection/CardsSection.jsx +0 -861
  74. package/srcOLD/TabexComponents/Sections/Cards/CardsSection2/CardsSection2.js +0 -496
  75. package/srcOLD/TabexComponents/Sections/Cards/CardsSection7/CardsSection7.js +0 -888
  76. package/srcOLD/TabexComponents/Sections/Cards/CardsSection8/CardsSection8.js +0 -419
  77. package/srcOLD/TabexComponents/Sections/Cards/Sixverticalcardssection/Sixverticalcardssection.js +0 -552
  78. package/srcOLD/TabexComponents/Sections/Slideshow/AboutSection/AboutSection.jsx +0 -281
  79. package/srcOLD/TabexComponents/Sections/Slideshow/Backgroundimage_with_topcircle/Backgroundimage_with_topcircle.jsx +0 -166
  80. package/srcOLD/TabexComponents/Sections/Slideshow/Freetextsection/Freetextsection.jsx +0 -152
  81. package/srcOLD/TabexComponents/Sections/Slideshow/Image_with_leftwords/Image_with_leftwords.jsx +0 -284
  82. package/srcOLD/TabexComponents/Sections/Slideshow/Image_with_rightwords/Image_with_rightwords.jsx +0 -146
  83. package/srcOLD/TabexComponents/Sections/Slideshow/Servicesection/Servicesection.jsx +0 -209
  84. package/srcOLD/TabexComponents/Sections/Slideshow/ServicesectionCenteredcards/ServicesectionCenteredcards.jsx +0 -145
  85. package/srcOLD/TabexComponents/Sections/Slideshow/Slideshow_with_rotatedsquare/Slideshow_with_rotatedsquare.jsx +0 -252
  86. package/srcOLD/TabexComponents/Sections/Slideshow/Slideshow_with_squarebg/Slideshow_with_squarebg.jsx +0 -175
  87. package/srcOLD/TabexComponents/Sections/Slideshow/Slideshowdifferentanimations/Slideshowdifferentanimations.jsx +0 -154
  88. package/srcOLD/TabexComponents/Sections/Slideshow/Slideshowfade/Slideshowfade.jsx +0 -201
  89. package/srcOLD/TabexComponents/Sections/Slideshow/Slideshowslide/Slideshowslide.jsx +0 -414
  90. package/srcOLD/TabexComponents/Sections/Slideshow/Slideshowzoom/Slideshowzoom.jsx +0 -270
  91. package/srcOLD/TabexComponents/StaticPages/Aboutus/Aboutus.js +0 -175
  92. package/srcOLD/TabexComponents/StaticPages/AccountInformation/AccountInformation.jsx +0 -275
  93. package/srcOLD/TabexComponents/StaticPages/CartSlider/CartSlider.jsx +0 -459
  94. package/srcOLD/TabexComponents/StaticPages/Categoriesdropdown/Categoriesdropdown.js +0 -146
  95. package/srcOLD/TabexComponents/StaticPages/Checkout/Checkout.jsx +0 -1220
  96. package/srcOLD/TabexComponents/StaticPages/Filter/Filter.jsx +0 -542
  97. package/srcOLD/TabexComponents/StaticPages/Login/FacebookLoginButton.jsx +0 -51
  98. package/srcOLD/TabexComponents/StaticPages/Login/GoogleLoginButton.jsx +0 -35
  99. package/srcOLD/TabexComponents/StaticPages/Login/Login.jsx +0 -299
  100. package/srcOLD/TabexComponents/StaticPages/OrderSuccess/OrderSuccess.js +0 -192
  101. package/srcOLD/TabexComponents/StaticPages/Ordershistory/Ordershistory.jsx +0 -1285
  102. package/srcOLD/TabexComponents/StaticPages/Policies/Policies.jsx +0 -358
  103. package/srcOLD/TabexComponents/StaticPages/Productinfo/Productinfo.jsx +0 -1506
  104. package/srcOLD/TabexComponents/StaticPages/Searchlist/Searchlist.jsx +0 -225
  105. package/srcOLD/TabexComponents/StaticPages/Signup/CustomerInformationForm.jsx +0 -788
  106. package/srcOLD/TabexComponents/StaticPages/Signup/Signup.jsx +0 -157
  107. package/srcOLD/TabexComponents/StaticPages/Staticpagesrouter/Staticpagesrouter.jsx +0 -295
  108. package/srcOLD/TabexComponents/StaticPages/Viewcart/Viewcart.js +0 -1090
  109. package/srcOLD/TabexComponents/StaticPages/Wishlist/Wishlist.jsx +0 -629
  110. package/srcOLD/assets/images/cod.png +0 -0
  111. package/srcOLD/assets/images/egyptflag.png +0 -0
  112. package/srcOLD/assets/images/fawry.png +0 -0
  113. package/srcOLD/assets/images/payment.png +0 -0
  114. package/srcOLD/assets/images/paymob.png +0 -0
  115. package/srcOLD/assets/images/paypal.png +0 -0
  116. package/srcOLD/assets/images/shoppingcart.png +0 -0
  117. package/srcOLD/assets/images/usflag.png +0 -0
  118. package/srcOLD/assets/images/visa.png +0 -0
  119. package/srcOLD/assets/images/whatsapp.png +0 -0
  120. package/srcOLD/button.jsx +0 -40
  121. package/srcOLD/index.jsx +0 -175
  122. package/srcOLD/styles/Home.module.css +0 -129
  123. package/srcOLD/styles/cards/Categorcycard_fullimage.module.css +0 -10
  124. package/srcOLD/styles/cards/Categorycard_slidebgscaled.module.css +0 -73
  125. package/srcOLD/styles/cards/Categorycard_withshapes.module.css +0 -189
  126. package/srcOLD/styles/cards/Productcard6.module.css +0 -9
  127. package/srcOLD/styles/cards/Productcard_with_circularbg.module.css +0 -137
  128. package/srcOLD/styles/cards/Productccard_with_zoominonhover.module.css +0 -51
  129. package/srcOLD/styles/cards/Prouductcard_with_zoomhover.module.css +0 -61
  130. package/srcOLD/styles/cards/categorycard.module.css +0 -102
  131. package/srcOLD/styles/cards/categorycard3.module.css +0 -51
  132. package/srcOLD/styles/cards/categorycardwithtext.module.css +0 -40
  133. package/srcOLD/styles/cards/productcard_animatedbuttons.module.css +0 -104
  134. package/srcOLD/styles/cards/productcard_with_textonhover.module.css +0 -12
  135. package/srcOLD/styles/cards/productccard_with_imageontopleft.module.css +0 -85
  136. package/srcOLD/styles/general/bootstrap.css +0 -4420
  137. package/srcOLD/styles/general/dropdown.css +0 -199
  138. package/srcOLD/styles/general/editorbardropdown.module.css +0 -94
  139. package/srcOLD/styles/general/filter.module.css +0 -108
  140. package/srcOLD/styles/general/form.module.css +0 -273
  141. package/srcOLD/styles/general/general.module.css +0 -709
  142. package/srcOLD/styles/general/image-gallery.css +0 -481
  143. package/srcOLD/styles/general/react-accessible-accordion.module.css +0 -52
  144. package/srcOLD/styles/general/react-phone-input-2.module.css +0 -927
  145. package/srcOLD/styles/general/scrollbtn.module.css +0 -22
  146. package/srcOLD/styles/general/slick.module.css +0 -166
  147. package/srcOLD/styles/general/tabs.module.css +0 -110
  148. package/srcOLD/styles/general/workplaceeditor.module.css +0 -328
  149. package/srcOLD/styles/globals.css +0 -26
  150. package/srcOLD/styles/headers/Allinoneheader.module.css +0 -91
  151. package/srcOLD/styles/headers/Header7.module.css +0 -50
  152. package/srcOLD/styles/headers/Header_threesectionslogocentered.module.css +0 -97
  153. package/srcOLD/styles/headers/Sideheader.module.css +0 -108
  154. package/srcOLD/styles/headers/classicheaderstyles.module.css +0 -16
  155. package/srcOLD/styles/headers/dropdown.css +0 -0
  156. package/srcOLD/styles/headers/header4.module.css +0 -175
  157. package/srcOLD/styles/headers/header5.module.css +0 -30
  158. package/srcOLD/styles/headers/header6.module.css +0 -117
  159. package/srcOLD/styles/headers/header_contactinfo.module.css +0 -78
  160. package/srcOLD/styles/headers/headerresturant.module.css +0 -89
  161. package/srcOLD/styles/headers/headerstyles.module.css +0 -24
  162. package/srcOLD/styles/headers/modernheader.module.css +0 -78
  163. package/srcOLD/styles/headers/subheader.module.css +0 -114
  164. package/srcOLD/styles/sections/Backgroundimage1.module.css +0 -17
  165. package/srcOLD/styles/sections/Backgroundimage_with_topcircle.module.css +0 -28
  166. package/srcOLD/styles/sections/Section_with_rightbgcont.module.css +0 -49
  167. package/srcOLD/styles/sections/Slideshow_with_rotatedsquare.module.css +0 -35
  168. package/srcOLD/styles/sections/Slideshow_with_squarebg.module.css +0 -39
  169. package/srcOLD/styles/staticpages/accordion.module.css +0 -9
  170. package/srcOLD/styles/staticpages/cart.module.css +0 -108
  171. package/srcOLD/styles/staticpages/dropdown.css +0 -196
  172. package/srcOLD/styles/staticpages/filter.module.css +0 -139
  173. package/srcOLD/styles/staticpages/login.module.css +0 -146
  174. package/srcOLD/styles/staticpages/productinfo.module.css +0 -54
  175. package/srcOLD/styles/staticpages/shop.module.css +0 -191
  176. package/srcOLD/styles/staticpages/signup.module.css +0 -206
  177. package/srcOLD/styles/staticpages/staticroutersidenav.module.css +0 -129
  178. package/srcOLD/styles/staticpages/viewcart.module.css +0 -129
  179. package/srcOLD/styles/staticpages/wishlist.module.css +0 -29
@@ -1,1506 +0,0 @@
1
- //productidprops
2
- import React, { useEffect, useState, useContext } from 'react';
3
- // import { LanguageContext } from '../../../../../../../Contexts/LanguageContext';
4
- // import { FetchingContext } from '../../../../../../../Contexts/FetchingContext';
5
- // import { WebsiteDesignWorkPlaceContext } from '../../../../../../../Contexts/WebsiteDesignWorkPlaceContext';
6
- // import { TemplateRoutingContext } from '../../../../../../../Contexts/TemplateRoutingContext';
7
-
8
- import generalstyles from '../../../styles/general/general.module.css';
9
- import productinfostyles from '../../../styles/staticpages/productinfo.module.css';
10
-
11
- // import { serverbaselink, instapikey } from '../../../../../../../Env_Variables';
12
- // import { Contexthandlerscontext } from '../../../../../../../Contexts/Contexthandlerscontext';
13
- // import { ProductsCardsSectionContext_Provider } from '../../../../../../../Contexts/ProductsCardsSectionContext';
14
- // import { Page_Template_Fetch_API } from '../../../../../../../components/API/WebsiteDesign_API';
15
- // import Pagepreloader from '../Pagepreloader/Pagepreloader';
16
- // import { LeftArrow, RightArrow, onWheel } from '../../Sections/Cards/CardsSection/Arrows';
17
- // import { FetchRelatedProducts_API } from '../../../../../../../components/API/API';
18
- // import { useMutation, useQuery, useQueryClient } from 'react-query';
19
- // import { NotificationManager } from 'react-notifications';
20
- import ImageGallery from 'react-image-gallery';
21
-
22
- import { MdOutlineShoppingCart } from 'react-icons/md';
23
- import { CircularProgress } from 'react-cssfx-loading';
24
- import { css } from 'glamor';
25
- import ShowMoreText from 'react-show-more-text';
26
-
27
- import { useParams } from 'react-router';
28
-
29
- import { IKImage } from 'imagekitio-react';
30
- import { FaShippingFast } from 'react-icons/fa';
31
- import { FiMapPin } from 'react-icons/fi';
32
- import { MdOutlinePolicy, MdOutlineLocalShipping } from 'react-icons/md';
33
- import { HiOutlinePhone } from 'react-icons/hi';
34
- import { RiSecurePaymentLine } from 'react-icons/ri';
35
- import { AiFillStar, AiOutlineStar } from 'react-icons/ai';
36
- import { FiShoppingBag, FiShoppingCart } from 'react-icons/fi';
37
- import { FaRegHeart, FaHeart } from 'react-icons/fa';
38
- import { CgShoppingBag } from 'react-icons/cg';
39
- import { BsBag } from 'react-icons/bs';
40
- import { IoBagHandleOutline } from 'react-icons/io5';
41
-
42
- // import "react-image-gallery/styles/css/image-gallery.css";
43
-
44
- const Productinfo = (props) => {
45
- // const queryClient = useQueryClient();
46
-
47
- // const { templatepropcontext } = useContext(Contexthandlerscontext);
48
- // const { routingcountext, StaticPagesLinksContext } = useContext(TemplateRoutingContext);
49
- // const { lang, langdetect } = useContext(LanguageContext);
50
- // const {
51
- // fetch_inst_tabex_websitetemplatesQueryContext,
52
- // setpageindexcontext,
53
- // ProjectOpenrcTypeContext,
54
- // TemplateIdContext,
55
- // INSTAPIKEYCONTEXT,
56
- // // PageTemplateFetcherQueryContext,
57
- // // CurrentPageIdContext,
58
- // setCurrentPageIdContext,
59
- // pageindexcontext,
60
- // StatePagePropertiesContext,
61
- // TabexSectionsComponentsContext,
62
- // } = useContext(WebsiteDesignWorkPlaceContext);
63
- // const {
64
- // FetchQueriesEngineContext,
65
- // setFetchQueriesEngineContext,
66
- // fetchProductInfoQueryContext,
67
- // fetchproductinfoObjContext,
68
- // setfetchproductinfoObjContext,
69
- // AddtoCartMutationContext,
70
- // ProductIdProdutInfoModalContext,
71
- // AddtoCartContext,
72
- // fetchAuthorizationQueryContext,
73
- // addtofavoritescontext,
74
- // } = useContext(FetchingContext);
75
- const StatePagePropertiesContext = props.actions.StatePagePropertiesContext;
76
- const lang = props.actions.lang;
77
- const langdetect = props.actions.langdetect;
78
- const templatepropcontext = props.actions.templatepropcontext;
79
- const routingcountext = props.actions.routingcountext;
80
- const StaticPagesLinksContext = props.actions.StaticPagesLinksContext;
81
- const TabexSectionsComponentsContext = props.actions.TabexSectionsComponentsContext;
82
- const FetchQueriesEngineContext = props.actions.FetchQueriesEngineContext;
83
- const setFetchQueriesEngineContext = props.actions.setFetchQueriesEngineContext;
84
- const serverbaselink = props.actions.serverbaselink;
85
- const AddtoCartMutationContext = props.actions.AddtoCartMutationContext;
86
- const ProductIdProdutInfoModalContext = props.actions.ProductIdProdutInfoModalContext;
87
- const AddtoCartContext = props.actions.AddtoCartContext;
88
- const addtofavoritescontext = props.actions.addtofavoritescontext;
89
- const fetchProductInfoQueryContext = props.actions.fetchProductInfoQueryContext;
90
- const fetchproductinfoObjContext = props.actions.fetchproductinfoObjContext;
91
- const setfetchproductinfoObjContext = props.actions.setfetchproductinfoObjContext;
92
- const pageindexcontext = props.actions.pageindexcontext;
93
- const setpageindexcontext = props.actions.setpageindexcontext;
94
- const authdetailsContext = props.actions.authdetailsContext;
95
- const setCurrentPageIdContext = props.actions.setCurrentPageIdContext;
96
- const productidparam = props.productidparam;
97
- const [sectionproperties, setsectionproperties] = useState('');
98
- const [CurrentPageId, setCurrentPageId] = useState('');
99
- const [RelatedProductsTagid, setRelatedProductsTagid] = useState('');
100
- const [ProductInfoObj, setProductInfoObj] = useState({});
101
- const { collectionidparams } = useParams();
102
- useEffect(() => {
103
- if (Object.keys(StatePagePropertiesContext).length != 0) {
104
- var secpropobj = {};
105
- StatePagePropertiesContext.pageobj != undefined &&
106
- StatePagePropertiesContext.pageobj.pageproperties != undefined &&
107
- StatePagePropertiesContext.pageobj.pageproperties.forEach(function (arrayItem, arrayindex) {
108
- secpropobj[arrayItem.property_css_name] = arrayItem.property_value;
109
- });
110
-
111
- setsectionproperties({ ...secpropobj });
112
- }
113
- }, [StatePagePropertiesContext]);
114
-
115
- // const FetchRelatedProductsQuery = useQuery([' FetchRelatedProducts_API' + RelatedProductsTagid], () => FetchRelatedProducts_API({ tagid: RelatedProductsTagid, productid: '' }), {
116
- // keepPreviousData: true,
117
- // staleTime: Infinity,
118
- // enabled: fetchproductinfoObjContext.productid != undefined && fetchproductinfoObjContext.productid.length != 0 && RelatedProductsTagid.length != 0 ? true : false,
119
- // });
120
- useEffect(() => {
121
- var cartindex = templatepropcontext.pagesnprop.findIndex((x) => x.staticpageid == '6218bccb810ae');
122
-
123
- if (cartindex >= 0) {
124
- setpageindexcontext(cartindex);
125
- setCurrentPageId(templatepropcontext.pagesnprop[cartindex].pageid);
126
- if (props.srcfromprops != 'templatedraftrouter') {
127
- // setpageindexcontext(cartindex);
128
- setCurrentPageIdContext(templatepropcontext.pagesnprop[cartindex].pageid);
129
- }
130
- }
131
- }, []);
132
- useEffect(() => {
133
- var secpropobj = {};
134
- templatepropcontext?.pagesnprop[pageindexcontext]?.pageproperties?.forEach(function (arrayItem, arrayindex) {
135
- secpropobj[arrayItem.property_css_name] = arrayItem.property_value;
136
- });
137
- setsectionproperties({ ...secpropobj });
138
- }, [pageindexcontext]);
139
- const [productimagesarray, setproductimagesarray] = useState([]);
140
- const [addtocardpayloadobj, setaddtocardpayloadobj] = useState({
141
- functype: 'add',
142
- productid: '',
143
- variantid: '',
144
- quantity: 1,
145
- });
146
- const [variantindexcompleted, setvariantindexcompleted] = useState('');
147
- useEffect(() => {
148
- if (productidparam == undefined) {
149
- productidassigner(ProductIdProdutInfoModalContext);
150
- } else {
151
- productidassigner(productidparam);
152
- }
153
- }, []);
154
- useEffect(() => {
155
- if (fetchProductInfoQueryContext.isSuccess) {
156
- setProductInfoObj(fetchProductInfoQueryContext.data);
157
- }
158
- }, [fetchProductInfoQueryContext.isSuccess, fetchProductInfoQueryContext.data]);
159
- const productidassigner = (productid) => {
160
- var tempFetchQueriesEngineContext = { ...FetchQueriesEngineContext };
161
- tempFetchQueriesEngineContext.fetchproductinfo = true;
162
- setFetchQueriesEngineContext({ ...tempFetchQueriesEngineContext });
163
- var tempfetchproductinfoObjContext = { ...fetchproductinfoObjContext };
164
-
165
- tempfetchproductinfoObjContext.productid = productid;
166
- setfetchproductinfoObjContext({ ...tempfetchproductinfoObjContext });
167
- };
168
- useEffect(() => {
169
- if (!fetchProductInfoQueryContext.isFetching && fetchProductInfoQueryContext.isSuccess) {
170
- if (fetchProductInfoQueryContext.data.data.productinfo != null) {
171
- var tempproductimagesarray = [];
172
- if (Array.isArray(fetchProductInfoQueryContext.data.data.productinfo.productimages)) {
173
- fetchProductInfoQueryContext.data.data.productinfo.productimages.forEach(function (arrayItem, arrayindex) {
174
- var productimagesarrayobj = {
175
- thumbnail: serverbaselink + arrayItem.path,
176
- original: serverbaselink + arrayItem.path,
177
- };
178
- tempproductimagesarray.push(productimagesarrayobj);
179
- });
180
- }
181
- setproductimagesarray([...tempproductimagesarray]);
182
- variantchecker();
183
- var tempaddtocardpayloadobj = { ...addtocardpayloadobj };
184
- tempaddtocardpayloadobj.productid = fetchProductInfoQueryContext.data.data.productinfo.productid;
185
- setaddtocardpayloadobj({ ...tempaddtocardpayloadobj });
186
- setRelatedProductsTagid(fetchProductInfoQueryContext.data.data.productinfo.maintagid);
187
- }
188
- }
189
- }, [fetchProductInfoQueryContext.isSuccess, fetchProductInfoQueryContext.data]);
190
- const selectproductoptionvalue = (optionindex, optionvaluesitem, optionvaluesindex) => {
191
- var productarr = ProductInfoObj;
192
- var isselected = productarr.data.productinfo.productoptions[optionindex].optionvalues[optionvaluesindex].isselected;
193
- if (isselected == 1) {
194
- productarr.data.productinfo.productoptions[optionindex].optionvalues[optionvaluesindex].isselected = 0;
195
- } else {
196
- productarr.data.productinfo.productoptions[optionindex].optionvalues[optionvaluesindex].isselected = 1;
197
- }
198
- productarr.data.productinfo.productoptions[optionindex].optionvalues.forEach(function (arrayItem, arrayindex) {
199
- if (optionvaluesindex != arrayindex) {
200
- arrayItem.isselected = 0;
201
- }
202
- });
203
- variantchecker();
204
- variantcompleting();
205
- // queryClient.setQueryData('fetchProductInfo_API' + JSON.stringify(fetchproductinfoObjContext), productarr);
206
- setProductInfoObj({ ...productarr });
207
- };
208
- const variantchecker = () => {
209
- var productarr = ProductInfoObj;
210
- if (Object.keys(productarr).length != 0) {
211
- if (productarr.data.productinfo.hasvariants == 1) {
212
- var selectedoptionsvalues = [];
213
- var variantsaccessible = [];
214
- productarr.data.productinfo.productoptions.forEach(function (productoptionsitem, productoptionsindex) {
215
- productoptionsitem.optionvalues.forEach(function (ProductOptionValuesitem, ProductOptionValuesIndex) {
216
- if (ProductOptionValuesitem.isselected == 1) {
217
- selectedoptionsvalues.push(ProductOptionValuesitem);
218
- }
219
- });
220
- });
221
- if (selectedoptionsvalues.length == 0) {
222
- productarr.data.productinfo.variants.forEach(function (ProductVariantItem, ProductVariantIndex) {
223
- ProductVariantItem.variantoptions.forEach(function (varinatoptionitem, variantoptionindex) {
224
- productarr.data.productinfo.productoptions.forEach(function (productoptionsitem, productoptionsindex) {
225
- productoptionsitem.optionvalues.forEach(function (ProductOptionValuesitem, ProductOptionValuesIndex) {
226
- if (ProductOptionValuesitem.valueid == varinatoptionitem.valueid) {
227
- ProductOptionValuesitem.isenabled = 1;
228
- }
229
- });
230
- });
231
- });
232
- });
233
- } else {
234
- productarr.data.productinfo.productoptions.forEach(function (productoptionsitem, productoptionsindex) {
235
- productoptionsitem.optionvalues.forEach(function (ProductOptionValuesitem, ProductOptionValuesIndex) {
236
- ProductOptionValuesitem.isenabled = 0;
237
- });
238
- });
239
-
240
- productarr.data.productinfo.variants.forEach(function (ProductVariantItem, ProductVariantIndex) {
241
- var variantcommonvalues = [];
242
- ProductVariantItem.variantoptions.forEach(function (varinatoptionitem, variantoptionindex) {
243
- selectedoptionsvalues.forEach(function (ProductOptionValuesitem, ProductOptionValuesIndex) {
244
- if (ProductOptionValuesitem.optionid == varinatoptionitem.optionid) {
245
- variantcommonvalues.push(varinatoptionitem);
246
- }
247
- });
248
- });
249
-
250
- var addvariantcount = [];
251
- var addvariant = false;
252
- selectedoptionsvalues.forEach(function (ProductOptionValuesitem, ProductOptionValuesIndex) {
253
- addvariant = false;
254
- variantcommonvalues.forEach(function (varinatoptionitem, variantoptionindex) {
255
- if (ProductOptionValuesitem.optionid == varinatoptionitem.optionid) {
256
- if (ProductOptionValuesitem.valueid == varinatoptionitem.valueid) {
257
- addvariant = true;
258
- } else {
259
- addvariantcount.push(varinatoptionitem);
260
- }
261
- }
262
- });
263
- });
264
- if (addvariant && addvariantcount.length == 0) {
265
- variantsaccessible.push(ProductVariantItem);
266
- }
267
- });
268
-
269
- variantsaccessible.forEach(function (ProductVariantItem, ProductVariantIndex) {
270
- ProductVariantItem.variantoptions.forEach(function (varinatoptionitem, variantoptionindex) {
271
- productarr.data.productinfo.productoptions.forEach(function (productoptionsitem, productoptionsindex) {
272
- productoptionsitem.optionvalues.forEach(function (ProductOptionValuesitem, ProductOptionValuesIndex) {
273
- if (ProductOptionValuesitem.valueid == varinatoptionitem.valueid) {
274
- ProductOptionValuesitem.isenabled = 1;
275
- }
276
- });
277
- });
278
- });
279
- });
280
- }
281
- // queryClient.setQueryData('fetchProductInfo_API' + JSON.stringify(fetchproductinfoObjContext), productarr);
282
- setProductInfoObj({ ...productarr });
283
- }
284
- }
285
- };
286
- const variantcompleting = () => {
287
- setvariantindexcompleted('');
288
- var tempaddtocardpayloadobj = { ...addtocardpayloadobj };
289
- tempaddtocardpayloadobj.variantid = '';
290
- setaddtocardpayloadobj({ ...tempaddtocardpayloadobj });
291
- var productarr = ProductInfoObj;
292
- var selectedoptionsvalues = [];
293
-
294
- productarr.data.productinfo.productoptions.forEach(function (productoptionsitem, productoptionsindex) {
295
- productoptionsitem.optionvalues.forEach(function (ProductOptionValuesitem, ProductOptionValuesIndex) {
296
- if (ProductOptionValuesitem.isselected == 1) {
297
- selectedoptionsvalues.push(ProductOptionValuesitem);
298
- }
299
- });
300
- });
301
- productarr.data.productinfo.variants.forEach(function (ProductVariantItem, ProductVariantIndex) {
302
- var isvariant = false;
303
- var variantnotmatch = [];
304
- if (selectedoptionsvalues.length == ProductVariantItem.variantoptions.length) {
305
- isvariant = true;
306
- ProductVariantItem.variantoptions.forEach(function (varinatoptionitem, variantoptionindex) {
307
- selectedoptionsvalues.forEach(function (ProductOptionValuesitem, ProductOptionValuesIndex) {
308
- if (ProductOptionValuesitem.optionid == varinatoptionitem.optionid) {
309
- if (ProductOptionValuesitem.valueid == varinatoptionitem.valueid) {
310
- } else {
311
- variantnotmatch.push('s');
312
- }
313
- }
314
- });
315
- });
316
- }
317
- if (variantnotmatch.length == 0 && isvariant == true) {
318
- var variantobj = fetchProductInfoQueryContext.data.data.productinfo.variants[ProductVariantIndex];
319
- var variantid = '';
320
- if (variantobj == undefined) {
321
- NotificationManager.warning('', 'Variant Not Found');
322
- } else {
323
- variantid = variantobj.variantid;
324
- var tempaddtocardpayloadobj = { ...addtocardpayloadobj };
325
- tempaddtocardpayloadobj.variantid = variantid;
326
- setaddtocardpayloadobj({ ...tempaddtocardpayloadobj });
327
- setvariantindexcompleted(ProductVariantIndex);
328
- }
329
- }
330
- });
331
- // queryClient.setQueryData('fetchProductInfo_API' + JSON.stringify(fetchproductinfoObjContext), productarr);
332
- setProductInfoObj({ ...productarr });
333
- };
334
- const addtocartfunc = () => {
335
- var runfunc = false;
336
- if (addtocardpayloadobj.productid.length != 0 && addtocardpayloadobj.quantity > 0) {
337
- if (fetchProductInfoQueryContext.data.data.productinfo.hasvariants == 1) {
338
- if (addtocardpayloadobj.variantid.length != 0) {
339
- runfunc = true;
340
- } else {
341
- NotificationManager.warning('', 'Please Choose Product Options');
342
- }
343
- } else {
344
- runfunc = true;
345
- }
346
- } else {
347
- NotificationManager.warning('', 'Please Choose Quantity');
348
- }
349
-
350
- if (runfunc == true) {
351
- AddtoCartContext(addtocardpayloadobj);
352
- }
353
- };
354
- const productinfo_cssstyles = {
355
- sectiontitlespan: css({
356
- ':after': {
357
- width: sectionproperties.relatedproducttitle_lineafterwidth + '%',
358
- backgroundColor: sectionproperties.relatedproducttitlelinebgcolor,
359
- },
360
- }),
361
- sectiontitlespan2: css({
362
- ':after': {
363
- width: sectionproperties.relatedproducttitle_lineafterwidth + 'px',
364
- height: '100%',
365
- backgroundColor: sectionproperties.relatedproducttitlelinebgcolor,
366
- },
367
- }),
368
- cart_btn: css({
369
- width: sectionproperties.cartBtnWidth + 'px',
370
- height: sectionproperties.cartBtnHeight + 'px',
371
- background: sectionproperties.cartbtn_bgtransparent == 'Transparent' ? 'transparent' : sectionproperties.cartBtnbgColor,
372
- borderRadius: sectionproperties.cart_btn_borderBottomLeftRadius + 'px',
373
- color: sectionproperties.cartBtnTextcolor,
374
- fontSize: sectionproperties.cartBtnTextfontsize + 'px',
375
- textTransform: sectionproperties.cartBtnTexttransform,
376
- fontWeight: sectionproperties.cartBtnTextfontweight,
377
- border: sectionproperties.cartbtnborderwidth + 'px solid ' + sectionproperties.cartbtnbordercolor,
378
- transition: '.3s',
379
- opacity: sectionproperties.cartbtn_opacity,
380
- display: 'flex',
381
- alignItems: 'center',
382
- justifyContent: 'center',
383
- overflow: 'hidden',
384
- margin: 0,
385
- position: 'relative',
386
- ':hover': {
387
- background: sectionproperties.cartbtn_transparentbgcoloronhover == 'Transparent' ? 'transparent' : sectionproperties.cartBtnbgColoronhover,
388
- color: sectionproperties.cartBtnTextcoloronhover,
389
- opacity: sectionproperties.cartbtn_opacityonhover,
390
- },
391
- }),
392
- quantitybtn: css({
393
- width: sectionproperties.quantitybtn_height + 'px',
394
- height: sectionproperties.quantitybtn_width + 'px',
395
- display: 'flex',
396
- flexDirection: 'column',
397
- overflow: 'hidden',
398
- borderRadius: sectionproperties.quantitybtn_borderradius + 'px',
399
- background: sectionproperties.quantitybtn_bgcolor,
400
- alignItems: 'center',
401
- justifyContent: 'center',
402
- margin: 0,
403
- position: 'relative',
404
- fontWeight: sectionproperties.quantitybtn_textfontweight,
405
- color: sectionproperties.quantitybtn_textcolor,
406
- fontSize: sectionproperties.quantitybtn_textfontsize + 'px',
407
- border: sectionproperties.quantitybtnborderwidth + 'px solid ' + sectionproperties.quantitybtnbordercolor,
408
- }),
409
- quantitybtn_text: css({
410
- margin: 'auto',
411
- }),
412
- add_quantitybtn_icon_container: css({
413
- position: 'relative',
414
- width: '35px',
415
- height: '35px',
416
- background: sectionproperties.add_quantitybtn_bgcolor,
417
- display: 'flex',
418
- alignItems: 'center',
419
- justifyContent: 'center',
420
- borderRadius: sectionproperties.add_quantitybtn_borderradius + 'px',
421
- fontSize: sectionproperties.add_quantitybtn_textfontsize + 'px',
422
- color: sectionproperties.add_quantitybtn_textcolor,
423
- transition: '.3s',
424
- ':hover': {
425
- color: sectionproperties.add_quantitybtn_textcoloronhover,
426
- background: sectionproperties.add_quantitybtn_bgcoloronhover,
427
- },
428
- }),
429
- minus_quantitybtn_icon_container: css({
430
- position: 'relative',
431
- width: '35px',
432
- height: '35px',
433
- background: sectionproperties.remove_quantitybtn_bgcolor,
434
- display: 'flex',
435
- alignItems: 'center',
436
- justifyContent: 'center',
437
- borderRadius: sectionproperties.remove_quantitybtn_borderradius + 'px',
438
- fontSize: sectionproperties.remove_quantitybtn_textfontsize + 'px',
439
- color: sectionproperties.remove_quantitybtn_textcolor,
440
- transition: '.3s',
441
- ':hover': {
442
- color: sectionproperties.remove_quantitybtn_textcoloronhover,
443
- background: sectionproperties.remove_quantitybtn_bgcoloronhover,
444
- },
445
- }),
446
- imagecont: css({
447
- width: '60px',
448
- height: '60px',
449
- border: sectionproperties.prodimage_borderwidth + 'px solid ' + sectionproperties.prodimage_color,
450
- backgroundColor: sectionproperties.prodimage_bgcolor,
451
- borderBottomLeftRadius: sectionproperties.prodimage__borderBottomLeftRadius + 'px',
452
- borderBottomRightRadius: sectionproperties.prodimage__borderBottomRightRadius + 'px',
453
- borderTopLeftRadius: sectionproperties.prodimage__borderTopLeftRadius + 'px',
454
- borderTopRightRadius: sectionproperties.prodimage__borderTopRightRadius + 'px',
455
- display: 'flex',
456
- alignItems: 'center',
457
- justifyContent: 'center',
458
- backgroundRepeat: 'no-repeat',
459
- backgroundSize: 'cover',
460
- backgroundPosition: 'center',
461
- position: 'relative',
462
- }),
463
- relatedproductNameStyles: css({
464
- color: sectionproperties.relatedprodNameColor,
465
- fontSize: sectionproperties.relatedprodNameFontSize + 'px',
466
- fontWeight: sectionproperties.relatedprodnamefontWeight,
467
- textTransform: sectionproperties.relatedprodNameTextTranform,
468
-
469
- ':hover': {
470
- color: sectionproperties.relatedprodNameColoronhover,
471
- },
472
- }),
473
- relatedproductPricestyles: css({
474
- color: sectionproperties.relatedprodPriceColor,
475
- fontSize: sectionproperties.relatedprodpriceFontSize + 'px',
476
- fontWeight: sectionproperties.relatedprodPriceFontWeight,
477
- }),
478
- cardcontainer: css({
479
- backgroundColor: sectionproperties.backgroundColor,
480
- borderTopLeftRadius: sectionproperties.borderTopLeftRadius + 'px',
481
- borderTopRightRadius: sectionproperties.borderTopRightRadius + 'px',
482
- borderBottomLeftRadius: sectionproperties.borderBottomLeftRadius + 'px',
483
- borderBottomRightRadius: sectionproperties.borderBottomRightRadius + 'px',
484
- paddingRight: sectionproperties.paddingRight + 'px',
485
- paddingLeft: sectionproperties.paddingLeft + 'px',
486
- paddingTop: sectionproperties.paddingTop + 'px',
487
- paddingBottom: sectionproperties.paddingBottom + 'px',
488
- border: sectionproperties.sectioncardborderwidth + 'px solid ' + sectionproperties.sectioncardbordercolor,
489
- }),
490
- wishlist_btn: css({
491
- width: sectionproperties.favBtnWidth + 'px',
492
- height: sectionproperties.favBtnHeight + 'px',
493
- background: sectionproperties.favbtn_bgtransparent == 'Transparent' ? 'transparent' : sectionproperties.favBtnbgColor,
494
- borderRadius: sectionproperties.fav_btn_borderBottomLeftRadius + 'px',
495
- color: sectionproperties.favBtniconcolor,
496
- fontSize: sectionproperties.favBtnTextfontsize + 'px',
497
- textTransform: sectionproperties.favBtnTexttransform,
498
- fontWeight: sectionproperties.favBtnTextfontweight,
499
- transition: '.3s',
500
- boxShadow: sectionproperties.favbtn_showshadow == 'Show' ? '0 0 10px ' + sectionproperties.favbtn_shadowcolor : '',
501
- border: sectionproperties.favbtnborderwidth + 'px solid ' + sectionproperties.favbtnbordercolor,
502
- opacity: sectionproperties.favbtn_opacity,
503
- cursor: 'pointer',
504
- ':hover': {
505
- background: sectionproperties.favbtn_transparentbgcoloronhover == 'Transparent' ? 'transparent' : sectionproperties.favBtnbgColoronhover,
506
- color: sectionproperties.favBtnTextcoloronhover,
507
- opacity: sectionproperties.favbtn_opacityonhover,
508
- },
509
- }),
510
- productname: css({
511
- fontSize: sectionproperties.prodNameFontSize + 'px',
512
- textTransform: sectionproperties.prodNameTextTranform,
513
- fontWeight: sectionproperties.prodNameFontWeight,
514
- color: sectionproperties.prodNameColor,
515
- }),
516
- productnamehover: css({
517
- transition: '.3s',
518
- ':hover': {
519
- color: sectionproperties.prodNameColorOnHover,
520
- },
521
- }),
522
- };
523
- const returnpolicyobj = (policytype) => {
524
- var policyobj = {};
525
- authdetailsContext?.instinfo?.instpolicies?.forEach(function (item, index) {
526
- if (item.policytype == policytype) {
527
- policyobj = item;
528
- }
529
- });
530
- return policyobj;
531
- };
532
- return (
533
- <div
534
- className={'row w-100 ml-0 mr-0'}
535
- style={{
536
- marginTop: sectionproperties.marginTop + 'px',
537
- }}
538
- >
539
- {fetchProductInfoQueryContext.isFetching && (
540
- <div className={'row ml-0 mr-0 mt-2 w-100 pb-3 mb-3'}>
541
- {/* <Pagepreloader /> */}
542
- Loading..
543
- </div>
544
- )}
545
- <div className="col-lg-12 p-0">
546
- {!fetchProductInfoQueryContext.isFetching && fetchProductInfoQueryContext.isSuccess && fetchProductInfoQueryContext.data.data.productinfo != null && (
547
- <div
548
- className={'row m-0 w-100 pl-md-3 pr-md-3 p-sm-0'}
549
- style={{
550
- paddingLeft: props.srcfromprops == 'templatdraftrouter' ? sectionproperties.card_marginLeft + 'px' : 0,
551
- paddingRight: props.srcfromprops == 'templatdraftrouter' ? sectionproperties.card_marginRight + 'px' : 0,
552
- }}
553
- >
554
- <div className="col-lg-9 pl-2 pr-2 mb-md-3">
555
- <div className={`${productinfo_cssstyles.cardcontainer}`} style={{ minHeight: '70vh' }}>
556
- <div className={'row m-0 w-100'}>
557
- <div className="col-xl-5 col-lg-6 col-md-12 col-sm-12 mb-md-3 pl-1 pr-1">
558
- <div
559
- className="col-lg-12 p-0 "
560
- style={{
561
- width: '100%',
562
- height: '100%',
563
- }}
564
- >
565
- <ImageGallery items={productimagesarray} thumbnailPosition="bottom" showNav={false} showPlayButton={false} />
566
- </div>
567
- </div>
568
- <div className={langdetect == 'en' ? 'col-lg-7 col-md-12 col-sm-12 pl-2 pr-0' : 'col-lg-7 col-md-12 col-sm-12 pl-0 pr-2'}>
569
- <div className="row m-0 w-100">
570
- {/* Name */}
571
- <div className="row m-0 w-100">
572
- {props.srcfromprops != 'templatdraftrouter' && (
573
- <div className="col-lg-10 col-md-10 col-sm-10 p-0 mb-2 d-flex justify-content-start align-items-center">
574
- <p
575
- className={
576
- `${productinfo_cssstyles.productname} ${productinfo_cssstyles.productnamehover}` +
577
- ' m-0 p-0 wordbreak d-flex justify-content-start cursor-pointer font-sm-15 '
578
- }
579
- onClick={() => {
580
- routingcountext(StaticPagesLinksContext.productinfo, true, fetchProductInfoQueryContext.data.data.productinfo.productid);
581
- }}
582
- >
583
- {langdetect == 'en'
584
- ? fetchProductInfoQueryContext.data.data.productinfo.name_en
585
- : fetchProductInfoQueryContext.data.data.productinfo.name_ar}
586
- </p>
587
- </div>
588
- )}
589
- {props.srcfromprops == 'templatdraftrouter' && (
590
- <div className="col-lg-10 col-md-10 col-sm-10 p-0 mb-2 d-flex justify-content-start align-items-center">
591
- <p className={`${productinfo_cssstyles.productname}` + ' m-0 p-0 wordbreak d-flex justify-content-start '}>
592
- {langdetect == 'en'
593
- ? fetchProductInfoQueryContext.data.data.productinfo.name_en
594
- : fetchProductInfoQueryContext.data.data.productinfo.name_ar}
595
- </p>
596
- </div>
597
- )}
598
- <div className="col-lg-2 col-md-2 col-sm-2 d-flex justify-content-end p-0">
599
- <div
600
- className={productinfo_cssstyles.wishlist_btn + ' d-flex justify-content-center align-items-center '}
601
- onClick={() => {
602
- addtofavoritescontext(fetchProductInfoQueryContext.data.data.productinfo.productid);
603
- }}
604
- style={{
605
- background: fetchProductInfoQueryContext.data.data.productinfo.IsFavExists == true ? sectionproperties.activebgcolor : '',
606
- }}
607
- >
608
- <i className="h-100 d-flex align-items-center justify-content-center">
609
- {fetchProductInfoQueryContext.data.data.productinfo.IsFavExists && (
610
- <i className="h-100 d-flex align-items-center justify-content-center">
611
- {sectionproperties.faviconshape == 'Star Shape' && (
612
- <AiFillStar size={sectionproperties.favBtnIconfontsize} style={{ color: sectionproperties.activefaviconcolor }} />
613
- )}
614
- {sectionproperties.faviconshape == 'Heart Shape' && (
615
- <FaHeart size={sectionproperties.favBtnIconfontsize} style={{ color: sectionproperties.activefaviconcolor }} />
616
- )}
617
- </i>
618
- )}
619
- {!fetchProductInfoQueryContext.data.data.productinfo.IsFavExists && (
620
- <i className="h-100 d-flex align-items-center justify-content-center">
621
- {sectionproperties.faviconshape == 'Star Shape' && <AiOutlineStar size={sectionproperties.favBtnIconfontsize} />}
622
- {sectionproperties.faviconshape == 'Heart Shape' && <FaRegHeart size={sectionproperties.favBtnIconfontsize} />}
623
- </i>
624
- )}
625
- </i>
626
- </div>
627
- </div>
628
- </div>
629
- {/* Desc */}
630
- {langdetect == 'en' && fetchProductInfoQueryContext.data.data.productinfo.description_en != '' && (
631
- <div className="col-lg-12 p-0 mb-5 d-flex justify-content-center" style={{ minHeight: '15vh' }}>
632
- <div className="row m-0 w-100 d-flex flex-column">
633
- <p className="m-0 p-0 text-light font-15 d-flex justify-content-start">{lang.description}:</p>
634
- {/* <ShowMoreText
635
- lines={5}
636
- more={lang.showmore}
637
- less={lang.showless}
638
- anchorClass="my-anchor-css-className"
639
- expanded={false}
640
- truncatedEndingComponent={'... '}
641
- >
642
- <p
643
- className={'text-black text-capitalize m-0 p-0 wordbreak'}
644
- style={{ textAlign: langdetect == 'en' ? 'left' : 'right' }}
645
- dangerouslySetInnerHTML={{
646
- __html:
647
- langdetect == 'en'
648
- ? fetchProductInfoQueryContext.data.data.productinfo.description_en
649
- : fetchProductInfoQueryContext.data.data.productinfo.description_ar,
650
- }}
651
- ></p>
652
- </ShowMoreText> */}
653
- </div>
654
- </div>
655
- )}
656
- {langdetect == 'ar' && fetchProductInfoQueryContext.data.data.productinfo.description_ar != '' && (
657
- <div className="col-lg-12 p-0 mb-5 d-flex justify-content-center" style={{ minHeight: '15vh' }}>
658
- <div className="row m-0 w-100 d-flex flex-column">
659
- <p className="m-0 p-0 text-light font-15 d-flex justify-content-start">{lang.description}:</p>
660
- <ShowMoreText
661
- lines={5}
662
- more="Show more"
663
- less="Show less"
664
- anchorClass="my-anchor-css-className"
665
- expanded={false}
666
- truncatedEndingComponent={'... '}
667
- >
668
- <p
669
- className={'text-black text-capitalize m-0 p-0 wordbreak'}
670
- style={{ textAlign: langdetect == 'en' ? 'left' : 'right' }}
671
- dangerouslySetInnerHTML={{
672
- __html:
673
- langdetect == 'en'
674
- ? fetchProductInfoQueryContext.data.data.productinfo.description_en
675
- : fetchProductInfoQueryContext.data.data.productinfo.description_ar,
676
- }}
677
- ></p>
678
- </ShowMoreText>
679
- </div>
680
- </div>
681
- )}
682
- {fetchProductInfoQueryContext.data.data.productinfo.hasvariants == 1 && (
683
- <div className="row m-0 w-100 d-flex align-items-start">
684
- {fetchProductInfoQueryContext.data.data.productinfo.productoptions.map((item, index) => {
685
- return (
686
- <div className="col-lg-12 p-0 mb-3 d-flex justify-content-start">
687
- <div className="row m-0 w-100 d-flex align-items-start">
688
- <div className="col-lg-12 col-md-12 p-0 d-flex mb-1">
689
- <p
690
- className={' m-0 p-0 wordbreak'}
691
- style={{
692
- color: sectionproperties.varianttitle_color,
693
- fontWeight: sectionproperties.varianttitle_fontweight,
694
- textTransform: sectionproperties.varianttitle_texttransform,
695
- fontSize: sectionproperties.varianttitle_fontSize + 'px',
696
- }}
697
- >
698
- {lang.select} {item.optionname}:
699
- </p>
700
- </div>
701
- <div className="col-lg-12 col-md-12 p-0 d-flex pb-md-3 justify-content-start align-items-start scrollhorixontalcontainer">
702
- {item.optionvalues.map((optionvaluesitem, optionvaluesindex) => {
703
- var isoptionvalueselected = 0;
704
- if (optionvaluesitem.isselected == 1) {
705
- isoptionvalueselected = 1;
706
- } else {
707
- isoptionvalueselected = 0;
708
- }
709
- var isoptionvaluedenabled = 0;
710
- if (optionvaluesitem.isenabled == 1) {
711
- isoptionvaluedenabled = 1;
712
- } else {
713
- isoptionvaluedenabled = 0;
714
- }
715
- if (item.optionname == 'color') {
716
- return (
717
- <div
718
- className={
719
- productinfostyles.color_container +
720
- ' mr-2 variabttcontainer ' +
721
- `${isoptionvalueselected == 1 ? productinfostyles.color_container_active : ''}`
722
- }
723
- onClick={() => {
724
- if (optionvaluesitem.isenabled == 1) {
725
- selectproductoptionvalue(index, optionvaluesitem, optionvaluesindex);
726
- }
727
- }}
728
- style={{
729
- background: optionvaluesitem.valuename,
730
- opacity: isoptionvaluedenabled == 1 ? 1 : 0.2,
731
- cursor: isoptionvaluedenabled == 1 ? 'pointer' : 'not-allowed',
732
- }}
733
- ></div>
734
- );
735
- } else if (item.optionname == 'size') {
736
- return (
737
- <div
738
- className={
739
- `${productinfostyles.variant_container} ${productinfostyles.size_variant_container}` +
740
- ' mr-2 variabttcontainer ' +
741
- `${isoptionvalueselected == 1 ? productinfostyles.variant_container_active : ''}`
742
- }
743
- onClick={() => {
744
- if (optionvaluesitem.isenabled == 1) {
745
- selectproductoptionvalue(index, optionvaluesitem, optionvaluesindex);
746
- }
747
- }}
748
- style={{
749
- backgroundColor: isoptionvaluedenabled == 1 ? '' : 'grey',
750
- cursor: isoptionvaluedenabled == 1 ? 'pointer' : 'not-allowed',
751
- }}
752
- >
753
- <p
754
- className={'font-12 wordbreak m-0 p-0 d-flex align-items-center justify-content-center'}
755
- style={{
756
- color: sectionproperties.varianttext_color,
757
- fontWeight: sectionproperties.varianttext_fontweight,
758
- textTransform: sectionproperties.varianttext_texttransform,
759
- fontSize: sectionproperties.varianttext_fontSize + 'px',
760
- }}
761
- >
762
- {optionvaluesitem.valuename}
763
- </p>
764
- </div>
765
- );
766
- } else {
767
- return (
768
- <div
769
- className={
770
- productinfostyles.variant_container +
771
- ' mr-2 variabttcontainer ' +
772
- `${isoptionvalueselected == 1 ? productinfostyles.variant_container_active : ''}`
773
- }
774
- onClick={() => {
775
- if (optionvaluesitem.isenabled == 1) {
776
- selectproductoptionvalue(index, optionvaluesitem, optionvaluesindex);
777
- }
778
- }}
779
- style={{
780
- backgroundColor:
781
- isoptionvalueselected == 1
782
- ? 'green'
783
- : isoptionvaluedenabled == 1
784
- ? sectionproperties.variantcontainer_bgcolor
785
- : 'grey',
786
- minWidth: sectionproperties.variantcontainer_minwidth + 'px',
787
- height: sectionproperties.variantcontainer_height + 'px',
788
- borderRadius: sectionproperties.variantcontainer_borderBottomLeftRadius + 'px',
789
- color: sectionproperties.variantcontainer_color,
790
- cursor: isoptionvaluedenabled == 1 ? 'pointer' : 'not-allowed',
791
- }}
792
- >
793
- <p
794
- className={'m-0 p-0 d-flex align-items-center justify-content-center'}
795
- style={{
796
- color: sectionproperties.varianttext_color,
797
- fontWeight: sectionproperties.varianttext_fontweight,
798
- textTransform: sectionproperties.varianttext_texttransform,
799
- fontSize: sectionproperties.varianttext_fontSize + 'px',
800
- }}
801
- >
802
- {optionvaluesitem.valuename}
803
- </p>
804
- </div>
805
- );
806
- }
807
- })}
808
- </div>
809
- </div>
810
- </div>
811
- );
812
- })}
813
- </div>
814
- )}
815
- <div className="col-lg-12 p-0 mb-3">
816
- <div
817
- style={{
818
- width: sectionproperties.availability_width + 'px',
819
- height: sectionproperties.availability_height + 'px',
820
- background:
821
- fetchProductInfoQueryContext.data.data.productinfo.quantavailtype == 'nolimit'
822
- ? sectionproperties.availability_availablebgcolor
823
- : sectionproperties.availability_limitedbgcolor,
824
- borderRadius: sectionproperties.availability_borderrradius + 'px',
825
- border:
826
- fetchProductInfoQueryContext.data.data.productinfo.quantavailtype == 'nolimit'
827
- ? sectionproperties.availability_borderwidtth + 'px solid ' + sectionproperties.availability_availabletextcolor
828
- : sectionproperties.availability_borderwidtth + 'px solid ' + sectionproperties.availability_limitedtextcolor,
829
- }}
830
- className="d-flex justify-content-start align-items-center pl-3 pr-3"
831
- >
832
- <p
833
- className="m-0 p-0 font-weight-500 wordbreak"
834
- style={{
835
- color:
836
- fetchProductInfoQueryContext.data.data.productinfo.quantavailtype == 'nolimit'
837
- ? sectionproperties.availability_availabletextcolor
838
- : sectionproperties.availability_limitedtextcolor,
839
- fontSize: sectionproperties.availability_fontsize + 'px',
840
- }}
841
- >
842
- <span style={{ color: sectionproperties.availability_textcolor }} className="font-weight-600">
843
- {lang.availability}:
844
- </span>
845
- <span className="ml-1 mr-1">
846
- {fetchProductInfoQueryContext.data.data.productinfo.quantavailtype == 'nolimit' ? lang.available : lang.limitedquantity}
847
- </span>
848
- </p>
849
- </div>
850
- </div>
851
- <div className="col-lg-12 p-0 mb-3">
852
- <hr className="mb-0 mt-2" />
853
- </div>
854
- <div className="col-lg-12 p-0 mb-3">
855
- <div className="row m-0 w-100">
856
- <div className="col-lg-12 p-0 mb-2 d-flex justofy-content-start">
857
- <p
858
- className="m-0 p-0"
859
- style={{
860
- color: sectionproperties.text_secondarycolor,
861
- fontSize: sectionproperties.secondaryfontsize + 'px',
862
- }}
863
- >
864
- {lang.quantity}:
865
- </p>
866
- </div>
867
- <button
868
- className={` ${productinfo_cssstyles.quantitybtn}` + ' p-0 d-flex align-items-center justify-content-center ml-sm-auto mr-sm-auto mb-sm-2 '}
869
- style={{
870
- height: sectionproperties.quantitybtn_height + 'px',
871
- width: sectionproperties.quantitybtn_width + 'px',
872
- flexDirection: 'row',
873
- direction: 'ltr',
874
- }}
875
- >
876
- <span
877
- className={`${productinfo_cssstyles.minus_quantitybtn_icon_container}` + ' m-1 '}
878
- onClick={() => {
879
- var tempaddtocardpayloadobj = { ...addtocardpayloadobj };
880
- if (tempaddtocardpayloadobj.quantity > 0) {
881
- tempaddtocardpayloadobj.quantity = tempaddtocardpayloadobj.quantity - 1;
882
- }
883
- setaddtocardpayloadobj({ ...tempaddtocardpayloadobj });
884
- }}
885
- >
886
- <i className="fa fa-chevron-down font-12"></i>
887
- </span>
888
- <span className={`${productinfo_cssstyles.quantitybtn_text}`}>{addtocardpayloadobj.quantity}</span>
889
- <span
890
- className={`${productinfo_cssstyles.add_quantitybtn_icon_container}` + ' m-1 '}
891
- onClick={() => {
892
- var tempaddtocardpayloadobj = { ...addtocardpayloadobj };
893
- tempaddtocardpayloadobj.quantity = tempaddtocardpayloadobj.quantity + 1;
894
- setaddtocardpayloadobj({ ...tempaddtocardpayloadobj });
895
- }}
896
- >
897
- <i className="fa fa-chevron-up font-12"></i>
898
- </span>
899
- </button>
900
- <button
901
- className={`${productinfo_cssstyles.cart_btn} ` + ' ml-1 mr-1 d-flex align-items-center justify-content-center ml-sm-auto mr-sm-auto mb-sm-2 '}
902
- onClick={() => {
903
- addtocartfunc();
904
- }}
905
- disabled={AddtoCartMutationContext.isLoading == true ? true : false}
906
- >
907
- {!AddtoCartMutationContext.isLoading && (
908
- <span className={' d-flex align-items-center justify-content-center '}>
909
- <i
910
- className={
911
- langdetect == 'en'
912
- ? 'h-100 d-flex align-items-center justify-content-center mr-2'
913
- : 'h-100 d-flex align-items-center justify-content-center ml-2'
914
- }
915
- >
916
- {sectionproperties.carticonstyle == 'Shopping bag 1' && (
917
- <FiShoppingBag className="" size={sectionproperties.cartBtn_iconFontSize} />
918
- )}
919
- {sectionproperties.carticonstyle == 'Shopping bag 2' && (
920
- <CgShoppingBag className="" size={sectionproperties.cartBtn_iconFontSize} />
921
- )}
922
- {sectionproperties.carticonstyle == 'Shopping bag 3' && <BsBag className="" size={sectionproperties.cartBtn_iconFontSize} />}
923
- {sectionproperties.carticonstyle == 'Shopping bag 4' && (
924
- <IoBagHandleOutline className="" size={sectionproperties.cartBtn_iconFontSize} />
925
- )}
926
- {sectionproperties.carticonstyle == 'Shopping cart 1' && (
927
- <FiShoppingCart className="" size={sectionproperties.cartBtn_iconFontSize} />
928
- )}
929
- {sectionproperties.carticonstyle == 'Shopping cart 2' && <MdOutlineShoppingCart size={sectionproperties.cartBtn_iconFontSize} />}
930
- </i>
931
- {lang.addtocart}
932
- </span>
933
- )}
934
- {AddtoCartMutationContext.isLoading && (
935
- <div className={' d-flex align-items-center justify-content-center '}>
936
- <CircularProgress color="white" width="20px" height="20px" duration="1s" />
937
- </div>
938
- )}
939
- </button>
940
- </div>
941
- </div>
942
- <div className="col-lg-12 p-0 mb-3">
943
- <div className="row m-0 w-100 d-flex flex-row">
944
- <p
945
- className="m-0 p-0"
946
- style={{
947
- color: sectionproperties.total_color,
948
- fontSize: sectionproperties.total_fontsize + 'px',
949
- fontWeight: sectionproperties.total_fontweight,
950
- textTransform: sectionproperties.total_texttransform,
951
- }}
952
- >
953
- {lang.total}:
954
- </p>
955
- <div className="col-lg-9 col-md-9 col-sm-9 d-flex align-items-center pl-1 pr-1">
956
- <p
957
- className={'m-0 p-0 wordbreak d-flex align-items-center justify-content-end'}
958
- style={{
959
- fontSize: sectionproperties.prodpriceFontSize + 'px',
960
- fontWeight: sectionproperties.prodPriceFontWeight,
961
- color: sectionproperties.prodPriceColor,
962
- }}
963
- >
964
- {fetchProductInfoQueryContext.data.data.productinfo.hasvariants == 1 && variantindexcompleted.length != 0 && (
965
- <>
966
- {fetchProductInfoQueryContext.data.data.productinfo.variants[variantindexcompleted].hassale == 1 && (
967
- <p
968
- className={
969
- langdetect == 'en'
970
- ? ' m-0 p-0 d-flex align-items-center justify-content-end wordbreak text-right '
971
- : ' m-0 p-0 d-flex align-items-center justify-content-end wordbreak text-left '
972
- }
973
- >
974
- {langdetect == 'en' ? 'EGP' : ''}{' '}
975
- {fetchProductInfoQueryContext.data.data.productinfo.variants[variantindexcompleted].variantsaleprice}{' '}
976
- {langdetect == 'en' ? '' : 'ج.م'}
977
- </p>
978
- )}
979
- <>
980
- {fetchProductInfoQueryContext.data.data.productinfo.variants[variantindexcompleted].hassale == 0 && (
981
- <p
982
- className={
983
- langdetect == 'en'
984
- ? ' m-0 p-0 d-flex align-items-center justify-content-end wordbreak text-right wordbreak '
985
- : ' m-0 p-0 d-flex align-items-center justify-content-end wordbreak text-left wordbreak '
986
- }
987
- >
988
- {langdetect == 'en' ? 'EGP' : ''}{' '}
989
- {fetchProductInfoQueryContext.data.data.productinfo.variants[variantindexcompleted].variantprice}{' '}
990
- {langdetect == 'en' ? '' : 'ج.م'}
991
- </p>
992
- )}
993
- </>
994
- </>
995
- )}
996
- {fetchProductInfoQueryContext.data.data.productinfo.hasvariants == 0 && (
997
- <>
998
- {fetchProductInfoQueryContext.data.data.productinfo.hassale == 0 && (
999
- <span
1000
- className={
1001
- langdetect == 'en'
1002
- ? ' d-flex align-items-center justify-content-end wordbreak text-right wordbreak '
1003
- : ' d-flex align-items-center justify-content-end wordbreak text-left wordbreak '
1004
- }
1005
- >
1006
- {langdetect == 'en' ? 'EGP' : ''} {fetchProductInfoQueryContext.data.data.productinfo.defaultprice}{' '}
1007
- {langdetect == 'en' ? '' : 'ج.م'}
1008
- </span>
1009
- )}
1010
- <>
1011
- {fetchProductInfoQueryContext.data.data.productinfo.hassale == 1 && (
1012
- <span
1013
- className={
1014
- langdetect == 'en'
1015
- ? ' d-flex align-items-center justify-content-end wordbreak text-right wordbreak '
1016
- : ' d-flex align-items-center justify-content-end wordbreak text-left wordbreak '
1017
- }
1018
- >
1019
- {langdetect == 'en' ? 'EGP' : ''} {fetchProductInfoQueryContext.data.data.productinfo.defaultsaleprice}{' '}
1020
- {langdetect == 'en' ? '' : 'ج.م'}
1021
- </span>
1022
- )}
1023
- </>
1024
- </>
1025
- )}
1026
- </p>
1027
- <p
1028
- className={'m-0 p-0 linethrough wordbreak'}
1029
- style={{
1030
- color: sectionproperties.prodsalePriceColor,
1031
- fontSize: sectionproperties.prodsalepriceFontSize + 'px',
1032
- fontWeight: sectionproperties.prodsalePriceFontWeight,
1033
- }}
1034
- >
1035
- {fetchProductInfoQueryContext.data.data.productinfo.hasvariants == 0 && (
1036
- <>
1037
- {fetchProductInfoQueryContext.data.data.productinfo.hassale == 1 && (
1038
- <span
1039
- className={
1040
- langdetect == 'en'
1041
- ? ' d-flex align-items-center justify-content-end wordbreak text-right wordbreak '
1042
- : ' d-flex align-items-center justify-content-end wordbreak text-left wordbreak '
1043
- }
1044
- >
1045
- <span className="ml-2 mr-2">-</span> {langdetect == 'en' ? 'EGP' : ''}{' '}
1046
- {fetchProductInfoQueryContext.data.data.productinfo.defaultprice} {langdetect == 'en' ? '' : 'ج.م'}
1047
- </span>
1048
- )}
1049
- </>
1050
- )}
1051
- {fetchProductInfoQueryContext.data.data.productinfo.hasvariants == 1 && variantindexcompleted.length != 0 && (
1052
- <>
1053
- {fetchProductInfoQueryContext.data.data.productinfo.variants[variantindexcompleted].hassale == 1 && (
1054
- <span
1055
- className={
1056
- langdetect == 'en'
1057
- ? ' d-flex align-items-center justify-content-end wordbreak text-right wordbreak '
1058
- : ' d-flex align-items-center justify-content-end wordbreak text-left wordbreak '
1059
- }
1060
- >
1061
- <span className="ml-2 mr-2">-</span>
1062
- {langdetect == 'en' ? 'EGP' : ''}{' '}
1063
- {fetchProductInfoQueryContext.data.data.productinfo.variants[variantindexcompleted].variantprice}{' '}
1064
- {langdetect == 'en' ? '' : 'ج.م'}
1065
- </span>
1066
- )}
1067
- </>
1068
- )}
1069
- </p>
1070
- </div>
1071
- </div>
1072
- </div>
1073
- <div className="col-lg-12 p-0 mb-3">
1074
- <hr className="mb-0 mt-2" />
1075
- </div>
1076
- <div className="row m-0 w-100 d-flex align-items-center mb-3">
1077
- <div
1078
- style={{
1079
- width: sectionproperties.iconcontainerwidth + 'px',
1080
- height: sectionproperties.iconcontainerheight + 'px',
1081
- borderRadius: sectionproperties.iconcontainerborderbl + 'px',
1082
- background: sectionproperties.iconcontainerbg,
1083
- }}
1084
- >
1085
- <i className="h-100 d-flex align-items-center justify-content-center">
1086
- <RiSecurePaymentLine
1087
- size={20}
1088
- style={{
1089
- color: sectionproperties.iconcontainercolor,
1090
- }}
1091
- />
1092
- </i>
1093
- </div>
1094
- <div className="col-lg-9 col-md-9 col-sm-9 d-flex justofy-content-start">
1095
- <p
1096
- className="m-0 p-0 wordbreak"
1097
- style={{
1098
- fontSize: sectionproperties.icontextfontsize + 'px',
1099
- color: sectionproperties.icontextcolor,
1100
- fontWeight: sectionproperties.icontextfontweight,
1101
- }}
1102
- >
1103
- {lang.securepayment}
1104
- </p>
1105
- </div>
1106
- </div>
1107
- <div className="row m-0 w-100 d-flex align-items-center mb-3">
1108
- <div
1109
- style={{
1110
- width: sectionproperties.iconcontainerwidth + 'px',
1111
- height: sectionproperties.iconcontainerheight + 'px',
1112
- borderRadius: sectionproperties.iconcontainerborderbl + 'px',
1113
- background: sectionproperties.iconcontainerbg,
1114
- }}
1115
- >
1116
- <i className="h-100 d-flex align-items-center justify-content-center">
1117
- <MdOutlineLocalShipping
1118
- size={20}
1119
- style={{
1120
- color: sectionproperties.iconcontainercolor,
1121
- }}
1122
- />
1123
- </i>
1124
- </div>
1125
- <div className="col-lg-9 col-md-9 col-sm-9 d-flex justofy-content-start">
1126
- <p
1127
- className="m-0 p-0 wordbreak"
1128
- style={{
1129
- fontSize: sectionproperties.icontextfontsize + 'px',
1130
- color: sectionproperties.icontextcolor,
1131
- fontWeight: sectionproperties.icontextfontweight,
1132
- }}
1133
- >
1134
- {lang.trustedshipping}
1135
- </p>
1136
- </div>
1137
- </div>
1138
- </div>
1139
- </div>
1140
- </div>
1141
- </div>
1142
- </div>
1143
- <div className="col-lg-3 pl-2 pr-2">
1144
- {authdetailsContext?.loggedin && (
1145
- <div className={`${productinfo_cssstyles.cardcontainer}` + ' mb-3 '}>
1146
- <div className="row m-0 w-100">
1147
- <i className="h-100 d-flex align-items-center justify-content-center mt-1">
1148
- <FiMapPin
1149
- size={20}
1150
- style={{
1151
- color: sectionproperties.generaliconcolor,
1152
- }}
1153
- />
1154
- </i>
1155
- <div className="col-lg-10 col-md-10 col-sm-10 d-flex justify-content-start flex-column">
1156
- <div className="row m-0 w-100">
1157
- <div className="col-lg-12 p-0 d-flex justify-content-start">
1158
- <p
1159
- className="m-0 p-0 wordbreak"
1160
- style={{
1161
- fontSize: sectionproperties.generaltext_fontSize + 'px',
1162
- color: sectionproperties.generaltext_fontColor,
1163
- textTransform: sectionproperties.generaltext_textTransform,
1164
- fontWeight: sectionproperties.generaltext_fontWeight,
1165
- }}
1166
- >
1167
- {lang.deliverto}
1168
- </p>
1169
- </div>
1170
- <div className="col-lg-12 p-0 d-flex justify-content-start">
1171
- {authdetailsContext?.loggedin && (
1172
- <p
1173
- className="m-0 p-0 wordbreak"
1174
- style={{
1175
- color: sectionproperties.text_secondarycolor,
1176
- fontSize: sectionproperties.secondaryfontsize + 'px',
1177
- }}
1178
- >
1179
- {authdetailsContext?.customerinfo?.name}, Egypt
1180
- </p>
1181
- )}
1182
- </div>
1183
- </div>
1184
- </div>
1185
- </div>
1186
- </div>
1187
- )}
1188
- <div
1189
- className={`${productinfo_cssstyles.cardcontainer}` + ' mb-3 '}
1190
- style={{ cursor: 'pointer' }}
1191
- onClick={() => {
1192
- routingcountext(StaticPagesLinksContext.Policies);
1193
- }}
1194
- >
1195
- <div className="row m-0 w-100">
1196
- <div className="col-lg-12 pl-1 pr-1 d-flex align-items-center">
1197
- <i className="h-100 d-flex align-items-center justify-content-center">
1198
- <FaShippingFast
1199
- size={18}
1200
- style={{
1201
- color: sectionproperties.generaliconcolor,
1202
- }}
1203
- />
1204
- </i>
1205
- <p
1206
- className="m-0 p-0 ml-2 mr-2 wordbreak"
1207
- style={{
1208
- fontSize: sectionproperties.generaltext_fontSize + 'px',
1209
- color: sectionproperties.generaltext_fontColor,
1210
- textTransform: sectionproperties.generaltext_textTransform,
1211
- fontWeight: sectionproperties.generaltext_fontWeight,
1212
- cursor: 'pointer',
1213
- }}
1214
- >
1215
- {langdetect == 'en' ? returnpolicyobj('Shipping Policy')?.policypagename_en : returnpolicyobj('Shipping Policy')?.policypagename_ar}
1216
- {/* {lang.shippingpolicy} */}
1217
- </p>
1218
- </div>
1219
- <div className="col-lg-12 pl-1 pr-1">
1220
- <hr className="mt-2 mb-2" />
1221
- </div>
1222
- <div className="col-lg-12 pl-1 pr-1 d-flex justify-content-start">
1223
- <p
1224
- className="m-0 p-0 wordbreak"
1225
- style={{
1226
- fontSize: sectionproperties.secondaryfontsize + 'px',
1227
- color: sectionproperties.text_secondarycolor,
1228
- lineClamp: 20,
1229
- WebkitLineClamp: 20,
1230
- }}
1231
- dangerouslySetInnerHTML={{
1232
- __html: langdetect == 'en' ? returnpolicyobj('Shipping Policy')?.policycontent_en : returnpolicyobj('Shipping Policy')?.policycontent_ar,
1233
- }}
1234
- ></p>
1235
- </div>
1236
- </div>
1237
- </div>
1238
- <div
1239
- className={`${productinfo_cssstyles.cardcontainer}` + ' mb-3 '}
1240
- style={{ cursor: 'pointer' }}
1241
- onClick={() => {
1242
- routingcountext(StaticPagesLinksContext.Policies);
1243
- }}
1244
- >
1245
- <div className="row m-0 w-100">
1246
- <div className="col-lg-12 pl-1 pr-1 d-flex align-items-center">
1247
- <i className="h-100 d-flex align-items-center justify-content-center">
1248
- <MdOutlinePolicy
1249
- size={18}
1250
- style={{
1251
- color: sectionproperties.generaliconcolor,
1252
- }}
1253
- />
1254
- </i>
1255
- <p
1256
- className="m-0 p-0 ml-2 mr-2 wordbreak"
1257
- style={{
1258
- fontSize: sectionproperties.generaltext_fontSize + 'px',
1259
- color: sectionproperties.generaltext_fontColor,
1260
- textTransform: sectionproperties.generaltext_textTransform,
1261
- fontWeight: sectionproperties.generaltext_fontWeight,
1262
- }}
1263
- >
1264
- {langdetect == 'en' ? returnpolicyobj('Refund Policy')?.policypagename_en : returnpolicyobj('Refund Policy')?.policypagename_ar}
1265
- </p>
1266
- </div>
1267
- <div className="col-lg-12 pl-1 pr-1">
1268
- <hr className="mt-2 mb-2" />
1269
- </div>
1270
- <div className="col-lg-12 pl-1 pr-1 d-flex justify-content-start">
1271
- <p
1272
- className="m-0 p-0 wordbreak"
1273
- style={{
1274
- fontSize: sectionproperties.secondaryfontsize + 'px',
1275
- color: sectionproperties.text_secondarycolor,
1276
- lineClamp: 20,
1277
- WebkitLineClamp: 20,
1278
- }}
1279
- dangerouslySetInnerHTML={{
1280
- __html: langdetect == 'en' ? returnpolicyobj('Refund Policy')?.policycontent_en : returnpolicyobj('Refund Policy')?.policycontent_ar,
1281
- }}
1282
- ></p>
1283
- </div>
1284
- </div>
1285
- </div>
1286
- <div className={`${productinfo_cssstyles.cardcontainer}` + ' mb-3 '}>
1287
- <div className="row m-0 w-100">
1288
- <i className="h-100 d-flex align-items-center justify-content-center text-light mt-1">
1289
- <HiOutlinePhone
1290
- size={20}
1291
- style={{
1292
- color: sectionproperties.generaliconcolor,
1293
- }}
1294
- />
1295
- </i>
1296
- <div className="col-lg-10 col-md-10 col-sm-10 d-flex justify-content-start">
1297
- <div className="row m-0 w-100">
1298
- <div className="col-lg-12 p-0 d-flex justify-content-start">
1299
- <p
1300
- className="m-0 p-0 wordbreak"
1301
- style={{
1302
- fontSize: sectionproperties.generaltext_fontSize + 'px',
1303
- color: sectionproperties.generaltext_fontColor,
1304
- textTransform: sectionproperties.generaltext_textTransform,
1305
- fontWeight: sectionproperties.generaltext_fontWeight,
1306
- }}
1307
- >
1308
- {lang.callus}
1309
- </p>
1310
- </div>
1311
- <div className="col-lg-12 p-0 d-flex justify-content-start">
1312
- <p
1313
- className="m-0 p-0 wordbreak"
1314
- style={{
1315
- fontSize: sectionproperties.secondaryfontsize + 'px',
1316
- color: sectionproperties.text_secondarycolor,
1317
- }}
1318
- >
1319
- {authdetailsContext?.instinfo?.contactinfo?.mobile}
1320
- </p>
1321
- </div>
1322
- </div>
1323
- </div>
1324
- </div>
1325
- </div>
1326
- </div>
1327
- </div>
1328
- )}
1329
- </div>
1330
- {/* {FetchRelatedProductsQuery.isSuccess && FetchRelatedProductsQuery.data.data.productsrelated.length != 0 && (
1331
- <div className="w-100 row m-0 d-flex justify-content-start">
1332
- <div className="col-lg-12">
1333
- <hr className="mt-0" />
1334
- </div>
1335
- <div
1336
- className="col-lg-12"
1337
- style={{
1338
- background: sectionproperties.relatedproductsbg,
1339
- paddingTop: sectionproperties.relatedproductspaddingTop + 'px',
1340
- paddingBottom: sectionproperties.relatedproductspaddingBottom + 'px',
1341
- paddingLeft: sectionproperties.relatedproductspaddingLeft + 'px',
1342
- paddingRight: sectionproperties.relatedproductspaddingRight + 'px',
1343
- borderTopLeftRadius: sectionproperties.relatedproductsbgbtlr + 'px',
1344
- borderTopRightRadius: sectionproperties.relatedproductsbgbtrr + 'px',
1345
- borderBottomLeftRadius: sectionproperties.relatedproductsbgbblr + 'px',
1346
- borderBottomRightRadius: sectionproperties.relatedproductsbgbbrr + 'px',
1347
- boxShadow: sectionproperties.relatedproductsbgbbrrshowshadow == 'Show' ? '0 0 10px ' + sectionproperties.relatedproductsshadowcolor : 'none',
1348
- }}
1349
- >
1350
- <div className="row m-0 w-100">
1351
- <div className="col-lg-12 col-md-12 col-sm-12 d-flex align-items-center p-0 mb-2">
1352
- <div className={`${generalstyles.sectiontitlecont} `}>
1353
- {sectionproperties.relatedproductstitlestyle == 'Line Under Text' && (
1354
- <div className="col-lg-12 col-md-12 col-sm-12 d-flex align-items-center p-0">
1355
- <div className={`${generalstyles.sectiontitlecont} `}>
1356
- <div className={' col-lg-12 d-flex align-items-center p-0'}>
1357
- <span
1358
- className={`${productinfo_cssstyles.sectiontitlespan}`}
1359
- style={{
1360
- fontSize: sectionproperties.relatedproductstitlefontsize + 'px',
1361
- color: sectionproperties.relatedproductstitlecolor,
1362
- fontWeight: sectionproperties.relatedproductstitlefontweight,
1363
- textTransform: sectionproperties.relatedproductstitletextTransform,
1364
- }}
1365
- >
1366
- {lang.relatedproducts}
1367
- </span>
1368
- </div>
1369
- </div>
1370
- </div>
1371
- )}
1372
- {sectionproperties.relatedproductstitlestyle == 'Line Before Text' && (
1373
- <div
1374
- className="col-lg-12 col-md-12 col-sm-12 d-flex align-items-center p-0"
1375
- style={{
1376
- justifyContent: sectionproperties.sectiontitleposition == 'Centered' ? 'center' : '',
1377
- }}
1378
- >
1379
- <div className={`${generalstyles.sectiontitlecont2}`}>
1380
- <span
1381
- className={`${productinfo_cssstyles.sectiontitlespan2}` + ' pl-3 '}
1382
- style={{
1383
- fontSize: sectionproperties.relatedproductstitlefontsize + 'px',
1384
- color: sectionproperties.relatedproductstitlecolor,
1385
- fontWeight: sectionproperties.relatedproductstitlefontweight,
1386
- textTransform: sectionproperties.relatedproductstitletextTransform,
1387
- }}
1388
- >
1389
- Related
1390
- <br /> Products
1391
- </span>
1392
- </div>
1393
- </div>
1394
- )}
1395
- </div>
1396
- </div>
1397
-
1398
- <div className="col-lg-12 p-0 pl-md-2 pr-md-2">
1399
- <ScrollMenu
1400
- // onWheel={onWheel}
1401
- transitionBehavior={'auto'}
1402
- wrapperClassName={''}
1403
- itemClassName={'scrollmenuclassnameitem'}
1404
- scrollContainerClassName={'scrollmenuclasssubscrollbar'}
1405
- >
1406
- {FetchRelatedProductsQuery.data.data.productsrelated.map((item, index) => {
1407
- if (item.productid != fetchProductInfoQueryContext.data.data.productinfo.productid) {
1408
- return (
1409
- <div
1410
- className="col-lg-12 w-100 p-2"
1411
- onClick={() => {
1412
- if (props.srcfromprops != 'templatdraftrouter') {
1413
- productidassigner(item.productid);
1414
- } else {
1415
- routingcountext(StaticPagesLinksContext.productinfo, true, item.productid);
1416
- }
1417
- }}
1418
- >
1419
- <div
1420
- className="row w-100 m-0 cursor-pointer p-1"
1421
- style={{ boxShadow: '0 0 10px #ccc', cursor: 'pointer', borderRadius: '10px', background: 'white' }}
1422
- >
1423
- <div className={'col-lg-2 col-md-2 col-sm-2 pl-0'}>
1424
- <div className={productinfo_cssstyles.imagecont}>
1425
- <IKImage
1426
- path={item.productinfo.productmainimage}
1427
- style={{
1428
- borderBottomLeftRadius: sectionproperties.prodimage__borderBottomLeftRadius + 'px',
1429
- borderBottomRightRadius: sectionproperties.prodimage__borderBottomRightRadius + 'px',
1430
- borderTopLeftRadius: sectionproperties.prodimage__borderTopLeftRadius + 'px',
1431
- borderTopRightRadius: sectionproperties.prodimage__borderTopRightRadius + 'px',
1432
- width: '100%',
1433
- height: '100%',
1434
- objectFit: 'cover',
1435
- }}
1436
- loading="lazy"
1437
- />
1438
- </div>
1439
- </div>
1440
- <div className="col-lg-10 col-md-10 col-sm-10 pl-3 ">
1441
- <div className="row m-0 w-100">
1442
- <div className="col-lg-12 col-md-12 col-sm-12 p-0 d-flex justify-content-start">
1443
- <p
1444
- className={`${productinfo_cssstyles.relatedproductNameStyles}` + ' m-0 p-0 module line-clamp d-flex justify-content-start '}
1445
- style={{ fontSize: '15px' }}
1446
- >
1447
- {langdetect == 'en' ? item.productinfo.name_en : item.productinfo.name_ar}
1448
- </p>
1449
- </div>
1450
- <div
1451
- className={
1452
- langdetect == 'en'
1453
- ? `${productinfo_cssstyles.relatedproductPricestyles}` + ' col-lg-12 col-md-12 col-sm-12 p-0 d-flex wordbreak text-right '
1454
- : `${productinfo_cssstyles.relatedproductPricestyles}` + ' col-lg-12 col-md-12 col-sm-12 p-0 d-flex wordbreak text-left '
1455
- }
1456
- >
1457
- <span className={'ml-1 mr-1'}>
1458
- {item.productinfo.hasvariants == 1 ? item.productinfo.variants.variantsaleprice : item.productinfo.defaultsaleprice}{' '}
1459
- {langdetect == 'en' ? 'EGP' : 'ج.م'}
1460
- </span>
1461
- </div>
1462
- </div>
1463
- </div>
1464
- </div>
1465
- </div>
1466
- );
1467
- }
1468
- })}
1469
- </ScrollMenu>
1470
- </div>
1471
- </div>
1472
- </div>
1473
- </div>
1474
- )} */}
1475
- {/* {props.srcfromprops != 'templatedraftrouter' && (
1476
- <div className="col-lg-12 d-flex align-items-center justify-content-center p-0">
1477
- {pageindexcontext.length != 0 && Object.keys(StatePagePropertiesContext).length != 0 && (
1478
- <div className={generalstyles.app_container + ' w-100 '} style={{ position: 'relative' }}>
1479
- {StatePagePropertiesContext.pageobj.sections.map((item, index) => {
1480
- if (item.tabexsectioninfo != null && TabexSectionsComponentsContext[item.tabexsectioninfo.sectioncompname] != undefined && item.componenttype == 'section') {
1481
- var sectioncomp = TabexSectionsComponentsContext[item.tabexsectioninfo.sectioncompname];
1482
- return (
1483
- <div className="row w-100 ml-0 mr-0 d-flex justify-content-center p-0">
1484
- {item.tabexsectioninfo.sectiontype == 'Cards' && (
1485
- <ProductsCardsSectionContext_Provider>
1486
- {React.createElement(sectioncomp, {
1487
- sectionidprops: item.sectionid,
1488
- sectionindexprops: index,
1489
- srcfromprops: 'GeneralProductsComponent',
1490
- collectionidprops: collectionidparams,
1491
- })}
1492
- </ProductsCardsSectionContext_Provider>
1493
- )}
1494
- {item.tabexsectioninfo.sectiontype != 'Cards' && React.createElement(sectioncomp, { sectionidprops: item.sectionid, sectionindexprops: index })}
1495
- </div>
1496
- );
1497
- }
1498
- })}
1499
- </div>
1500
- )}
1501
- </div>
1502
- )} */}
1503
- </div>
1504
- );
1505
- };
1506
- export default Productinfo;