From 38d9b2f89e51ad76a5878d2d7ce122e2ab19a4a4 Mon Sep 17 00:00:00 2001
From: Neil Mistry <30687441+neilmistryamplience@users.noreply.github.com>
Date: Thu, 22 Aug 2024 15:09:19 +0100
Subject: [PATCH] fix: Display of locationName and click and collect with crash
 fix

---
 components/cms-modern/Store/Store.tsx | 42 ++++++++++++++++++++++++++-
 1 file changed, 41 insertions(+), 1 deletion(-)

diff --git a/components/cms-modern/Store/Store.tsx b/components/cms-modern/Store/Store.tsx
index e2905ab4..7fddf61f 100644
--- a/components/cms-modern/Store/Store.tsx
+++ b/components/cms-modern/Store/Store.tsx
@@ -13,11 +13,12 @@ interface StoreProps {
     image: any;
     imageAltText: string;
     locationName: string;
+    locationAddress: string;
     details: string;
 }
 
 const Store = (props: StoreProps) => {
-    const { details = '', keyElements, image, imageAltText, locationName = '' } = props;
+    const { details = '', keyElements, image, imageAltText, locationAddress = '', locationName = '' } = props;
 
     const options = {
         overrides: {
@@ -60,6 +61,24 @@ const Store = (props: StoreProps) => {
                             alt={imageAltText ? imageAltText : locationName}
                             imageAltText={imageAltText ? imageAltText : locationName}
                         />
+                        {(locationAddress || locationName) && (
+                            <Paper
+                                style={{
+                                    backgroundColor: '#f6f6f6',
+                                    padding: 15,
+                                    paddingBottom: 30,
+                                    marginTop: 5,
+                                }}
+                            >
+                                <Typography style={{ marginTop: 20, marginBottom: 20 }} variant="h3" component="h3">
+                                    {locationName}
+                                </Typography>
+                                <ReactMarkdown style={{ width: '70%' }} options={options}>
+                                    {locationAddress}
+                                </ReactMarkdown>
+                            </Paper>
+                        )}
+
                         <Grid container style={{ marginTop: 20 }}>
                             {keyElements?.parking && (
                                 <Grid item xs={4}>
@@ -103,6 +122,27 @@ const Store = (props: StoreProps) => {
                                     </Paper>
                                 </Grid>
                             )}
+                            {keyElements?.clickAndCollect && (
+                                <Grid item xs={4}>
+                                    <Paper
+                                        style={{
+                                            backgroundColor: '#f6f6f6',
+                                            padding: 15,
+                                            paddingBottom: 30,
+                                            margin: 5,
+                                        }}
+                                    >
+                                        <Typography variant="body2">Click & Collect</Typography>
+                                        <Box display="flex" alignItems="center" justifyContent="center">
+                                            <img
+                                                style={{ margin: 'auto', width: '50%', paddingTop: 20 }}
+                                                src="/images/click-and-collect.svg"
+                                                alt="Click & Collect"
+                                            />
+                                        </Box>
+                                    </Paper>
+                                </Grid>
+                            )}
                         </Grid>
                     </Grid>
                     <Grid item xs={12} sm={6} style={{ paddingTop: 10, paddingLeft: 30 }}>