Add production fix for survey (#1189)

mmahalwy · web-flow · commit 8024a19fb184 · 2020-09-02T17:35:54.000-04:00
* Add production fix for survey

* changes

* changes

* api url change

* change to client
diff --git a/.env b/.env
@@ -1,6 +1,6 @@
 NODE_ENV=development
 PORT=8000
-API_URL=http://staging.quran.com:3000
+API_URL=http://api.quran.com
 ONE_QURAN_URL=http://localhost:3030
 SEGMENTS_KEY=
 SENTRY_KEY_CLIENT=
diff --git a/src/client.js b/src/client.js
@@ -10,10 +10,12 @@ import useScroll from 'react-router-scroll';
 import { ReduxAsyncConnect } from 'redux-connect';
 import { syncHistoryWithStore } from 'react-router-redux';
 import { AppContainer } from 'react-hot-loader';
+import { ThemeProvider } from 'styled-components';
 
 import debug from 'debug';
 
 import config from './config';
+import theme from './theme';
 import ApiClient from './helpers/ApiClient';
 import createStore from './redux/create';
 import routes from './routes';
@@ -47,16 +49,18 @@ match(
   { history, routes: routes(store) },
   (error, redirectLocation, renderProps) => {
     const component = (
-      <Router
-        {...renderProps}
-        render={props => (
-          <ReduxAsyncConnect
-            {...props}
-            helpers={{ client }}
-            render={applyRouterMiddleware(useScroll())}
-          />
-        )}
-      />
+      <ThemeProvider theme={theme}>
+        <Router
+          {...renderProps}
+          render={props => (
+            <ReduxAsyncConnect
+              {...props}
+              helpers={{ client }}
+              render={applyRouterMiddleware(useScroll())}
+            />
+          )}
+        />
+      </ThemeProvider>
     );
 
     const mountNode = document.getElementById('app');
diff --git a/src/config.js b/src/config.js
@@ -40,14 +40,16 @@ const config = {
         { name: 'description', content: description },
         {
           name: 'keywords',
-          content: "quran, koran, qur'an, kareem, قران, القرآن, قران كريم, القران الكريم, surah, yasin, yaseen, kahf, mulk, rahman, muslim, islam, Allah"
+          content:
+            "quran, koran, qur'an, kareem, قران, القرآن, قران كريم, القران الكريم, surah, yasin, yaseen, kahf, mulk, rahman, muslim, islam, Allah"
         }, // eslint-disable-line max-l en
         { name: 'Charset', content: 'UTF-8' },
         { name: 'Distribution', content: 'Global' },
         { name: 'Rating', content: 'General' },
         {
           name: 'viewport',
-          content: 'width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no'
+          content:
+            'width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no'
         },
         {
           name: 'google-site-verification',
@@ -62,17 +64,16 @@ const config = {
         { property: 'og:locale', content: 'en_US' },
         { property: 'og:title', content: title },
         { property: 'og:description', content: description },
-        { property: 'og:url', content: 'https://quran.com' },
+
         { property: 'og:type', content: 'website' },
-        { name: 'twitter:card', content: 'summary' },
+        { name: 'twitter:card', content: 'summary_large_image' },
         { name: 'twitter:title', content: title },
         { name: 'twitter:description', content: description },
         {
           name: 'twitter:image',
           content: 'https://quran.com/images/thumbnail.png'
         },
-        { name: 'twitter:image:width', content: '200' },
-        { name: 'twitter:image:height', content: '200' },
+
         {
           name: 'google-play-app',
           content: 'app-id=com.quran.labs.androidquran'
@@ -198,7 +199,8 @@ const config = {
       /* SEO: https://developers.google.com/structured-data/site-name#markup_requirements */
       script: [
         {
-          src: 'https://cdn.polyfill.io/v2/polyfill.min.js?features=Intl.~locale.en',
+          src:
+            'https://cdn.polyfill.io/v2/polyfill.min.js?features=Intl.~locale.en',
           async: '',
           defer: ''
         },
diff --git a/src/containers/ChapterInfo/index.js b/src/containers/ChapterInfo/index.js
@@ -23,7 +23,12 @@ const ChapterInfo = ({ chapter, info }) => (
     <Helmet
       {...makeHeadTags({
         title: `Surah ${chapter.nameSimple} [${chapter.chapterNumber}]`,
-        description: `${info ? info.shortText : ''} This Surah has ${chapter.versesCount} verses and resides between pages ${chapter.pages[0]} to ${chapter.pages[1]} in the Quran.` // eslint-disable-line max-len
+        image: `https://quran-og-image.vercel.app/${chapter.chapterNumber}`,
+        description: `${info ? info.shortText : ''} This Surah has ${
+          chapter.versesCount
+        } verses and resides between pages ${chapter.pages[0]} to ${
+          chapter.pages[1]
+        } in the Quran.` // eslint-disable-line max-len
       })}
       script={[
         {
diff --git a/src/containers/Surah/index.js b/src/containers/Surah/index.js
@@ -80,7 +80,10 @@ class Surah extends Component {
   }
 
   componentDidMount() {
-    const { verses, options: { audio } } = this.props;
+    const {
+      verses,
+      options: { audio }
+    } = this.props;
 
     Object.values(verses).forEach((verse) => {
       this.props.actions.audio.load({
@@ -95,7 +98,10 @@ class Surah extends Component {
   // TODO: Should this belong here?
   componentWillReceiveProps(nextProps) {
     if (this.props.options.audio !== nextProps.options.audio) {
-      const { verses, options: { audio } } = nextProps;
+      const {
+        verses,
+        options: { audio }
+      } = nextProps;
 
       Object.values(verses).forEach((verse) => {
         this.props.actions.audio.load({
@@ -178,6 +184,18 @@ class Surah extends Component {
     return `Surah ${chapter.nameSimple} [${chapter.chapterNumber}]`;
   }
 
+  // Generates the url for the open graph image
+  ogImage() {
+    const { params, chapter } = this.props;
+    const hasAyahNumber = params.range && !isNaN(params.range);
+
+    if (hasAyahNumber) {
+      return `https://quran-og-image.vercel.app/${chapter.chapterNumber}/${params.range}`;
+    }
+
+    return `https://quran-og-image.vercel.app/${chapter.chapterNumber}`;
+  }
+
   description() {
     const { params, verses, chapter, info } = this.props;
 
@@ -211,7 +229,11 @@ class Surah extends Component {
       return `Surat ${chapter.nameSimple} [verse ${params.range}]`;
     }
 
-    return `${info ? info.shortText : ''} This Surah has ${chapter.versesCount} verses and resides between pages ${chapter.pages[0]} to ${chapter.pages[1]} in the Quran.`; // eslint-disable-line max-len
+    return `${info ? info.shortText : ''} This Surah has ${
+      chapter.versesCount
+    } verses and resides between pages ${chapter.pages[0]} to ${
+      chapter.pages[1]
+    } in the Quran.`; // eslint-disable-line max-len
   }
 
   renderNoAyah() {
@@ -243,15 +265,18 @@ class Surah extends Component {
 
     // If single verse, eh. /2/30
     if (isSingleAyah) {
-      const to = this.getFirst() + 10 > chapter.versesCount
-        ? chapter.versesCount
-        : this.getFirst() + 10;
+      const to =
+        this.getFirst() + 10 > chapter.versesCount
+          ? chapter.versesCount
+          : this.getFirst() + 10;
 
       return (
         <ul className="pager">
           <li className="text-center">
             <Link
-              to={`/${chapter.chapterNumber}/${this.getFirst()}-${to}?translations=${translations}`}
+              to={`/${
+                chapter.chapterNumber
+              }/${this.getFirst()}-${to}?translations=${translations}`}
             >
               <LocaleFormattedMessage
                 id="chapter.index.continue"
@@ -270,18 +295,20 @@ class Surah extends Component {
         isLoading={isLoading}
         endComponent={
           <ul className="pager">
-            {chapter.chapterNumber > 1 &&
+            {chapter.chapterNumber > 1 && (
               <li className="previous">
                 <Link
-                  to={`/${chapter.chapterNumber * 1 - 1}?translations=${translations}`}
+                  to={`/${chapter.chapterNumber * 1 -
+                    1}?translations=${translations}`}
                 >
                   ←
                   <LocaleFormattedMessage
                     id="chapter.previous"
                     defaultMessage="Previous Surah"
                   />
                 </Link>
-              </li>}
+              </li>
+            )}
             <li className="text-center">
               <Link
                 to={`/${chapter.chapterNumber}?translations=${translations}`}
@@ -292,18 +319,20 @@ class Surah extends Component {
                 />
               </Link>
             </li>
-            {chapter.chapterNumber < 114 &&
+            {chapter.chapterNumber < 114 && (
               <li className="next">
                 <Link
-                  to={`/${chapter.chapterNumber * 1 + 1}?translations=${translations}`}
+                  to={`/${chapter.chapterNumber * 1 +
+                    1}?translations=${translations}`}
                 >
                   <LocaleFormattedMessage
                     id="chapter.next"
                     defaultMessage="Next Surah"
                   />
                   →
                 </Link>
-              </li>}
+              </li>
+            )}
           </ul>
         }
         loadingComponent={<Loader isActive={isLoading} style={LoaderStyle} />}
@@ -376,7 +405,8 @@ class Surah extends Component {
         <Helmet
           {...makeHeadTags({
             title: this.title(),
-            description: this.description()
+            description: this.description(),
+            image: this.ogImage()
           })}
           script={[
             {
@@ -427,12 +457,13 @@ class Surah extends Component {
             </div>
           </div>
         </div>
-        {__CLIENT__ &&
+        {__CLIENT__ && (
           <Audioplayer
             chapter={chapter}
             startVerse={Object.values(verses)[0]}
             onLoadAyahs={this.handleLazyLoadAyahs}
-          />}
+          />
+        )}
       </div>
     );
   }
diff --git a/src/helpers/Html.js b/src/helpers/Html.js
@@ -25,30 +25,39 @@ const Html = ({ store, component, assets }) => {
             type="text/css"
           />
         ))}
-        {Object.keys(assets.styles).length === 0
-          ? <style
+        {Object.keys(assets.styles).length === 0 ? (
+          <style
             dangerouslySetInnerHTML={{
               __html: require('../../src/styles/bootstrap.config')
             }}
           />
-          : null}
+        ) : null}
+        <script
+          dangerouslySetInnerHTML={{
+            __html: `(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
+new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
+j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
+'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
+})(window,document,'script','dataLayer','GTM-M3VQW9V');`
+          }}
+        />
       </head>
       <body>
-        <div id="app" dangerouslySetInnerHTML={{ __html: content }} />
-        <style
+        {/* Google Tag Manager (noscript) */}
+        <noscript
           dangerouslySetInnerHTML={{
-            __html: '.async-hide { opacity: 0 !important}'
+            __html: `<iframe src="https://www.googletagmanager.com/ns.html?id=GTM-M3VQW9V"
+height="0" width="0" style="display:none;visibility:hidden"></iframe>`
           }}
         />
-        <script
+
+        <div id="app" dangerouslySetInnerHTML={{ __html: content }} />
+        <style
           dangerouslySetInnerHTML={{
-            __html: `(function(a,s,y,n,c,h,i,d,e){s.className+=' '+y;h.start=1*new Date;
-            h.end=i=function(){s.className=s.className.replace(RegExp(' ?'+y),'')};
-            (a[n]=a[n]||[]).hide=h;setTimeout(function(){i();h.end=null},c);h.timeout=c;
-            })(window,document.documentElement,'async-hide','dataLayer',4000,
-            {'GTM-PNMFTW3':true});`
+            __html: '.async-hide { opacity: 0 !important}'
           }}
         />
+
         <script
           dangerouslySetInnerHTML={{
             __html: `(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
@@ -74,22 +83,25 @@ const Html = ({ store, component, assets }) => {
           }}
           charSet="UTF-8"
         />
-        {process.env.NODE_ENV === 'production' &&
+        {process.env.NODE_ENV === 'production' && (
           <script
             dangerouslySetInnerHTML={{
               __html: `/*<![CDATA[*/window.zEmbed||function(e,t){var n,o,d,i,s,a=[],r=document.createElement("iframe");window.zEmbed=function(){a.push(arguments)},window.zE=window.zE||window.zEmbed,r.src="javascript:false",r.title="",r.role="presentation",(r.frameElement||r).style.cssText="display: none",d=document.getElementsByTagName("script"),d=d[d.length-1],d.parentNode.insertBefore(r,d),i=r.contentWindow,s=i.document;try{o=s}catch(c){n=document.domain,r.src='javascript:var d=document.open();d.domain="'+n+'";void(0);',o=s}o.open()._l=function(){var o=this.createElement("script");n&&(this.domain=n),o.id="js-iframe-async",o.src=e,this.t=+new Date,this.zendeskHost=t,this.zEQueue=a,this.body.appendChild(o)},o.write('<body onload="document._l();">'),o.close()}("https://assets.zendesk.com/embeddable_framework/main.js","quran.zendesk.com");/*]]>*/`
             }}
-          />}
-        {process.env.NODE_ENV === 'production' &&
+          />
+        )}
+        {process.env.NODE_ENV === 'production' && (
           <script
             dangerouslySetInnerHTML={{
               __html: `
                   (function(e,b){if(!b.__SV){var a,f,i,g;window.mixpanel=b;b._i=[];b.init=function(a,e,d){function f(b,h){var a=h.split(".");2==a.length&&(b=b[a[0]],h=a[1]);b[h]=function(){b.push([h].concat(Array.prototype.slice.call(arguments,0)))}}var c=b;"undefined"!==typeof d?c=b[d]=[]:d="mixpanel";c.people=c.people||[];c.toString=function(b){var a="mixpanel";"mixpanel"!==d&&(a+="."+d);b||(a+=" (stub)");return a};c.people.toString=function(){return c.toString(1)+".people (stub)"};i="disable time_event track track_pageview track_links track_forms register register_once alias unregister identify name_tag set_config reset people.set people.set_once people.increment people.append people.union people.track_charge people.clear_charges people.delete_user".split(" ");for(g=0;g<i.length;g++)f(c,i[g]);b._i.push([a,e,d])};b.__SV=1.2;a=e.createElement("script");a.type="text/javascript";a.async=!0;a.src="undefined"!==typeof MIXPANEL_CUSTOM_LIB_URL?MIXPANEL_CUSTOM_LIB_URL:"file:"===e.location.protocol&&"//cdn.mxpnl.com/libs/mixpanel-2-latest.min.js".match(/^\\/\\//)?"https://cdn.mxpnl.com/libs/mixpanel-2-latest.min.js":"//cdn.mxpnl.com/libs/mixpanel-2-latest.min.js";f=e.getElementsByTagName("script")[0];f.parentNode.insertBefore(a,f)}})(document,window.mixpanel||[]);mixpanel.init("d3f9b2f15c4bf0509e85845b56921034");
                 `
             }}
-          />}
-        {process.env.NODE_ENV === 'production' &&
-          <script src="https://cdn.ravenjs.com/3.0.4/raven.min.js" />}
+          />
+        )}
+        {process.env.NODE_ENV === 'production' && (
+          <script src="https://cdn.ravenjs.com/3.0.4/raven.min.js" />
+        )}
         {Object.keys(assets.javascript)
           .filter(script => !assets.javascript[script].includes('-chunk'))
           .map((script, i) => (
