diy-template-components 0.2.0 → 0.2.1

package/build/index.es.js

@@ -503,7 +503,11 @@ const Button = /*#__PURE__*/forwardRef(function Button({
     style: styling
   }, elementProps, {
     disabled: disabled
-  }), data?.value);
+  }), /*#__PURE__*/React.createElement("span", {
+    dangerouslySetInnerHTML: {
+      __html: data?.value
+    }
+  }));
 });
 
 var liveTv = "data:image/svg+xml,%3Csvg%20width%3D%2248%22%20height%3D%2248%22%20viewBox%3D%220%200%2048%2048%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M40.2727%2012.4H26.1277L32.2591%206.3135L30.9545%205L23.5%2012.4L16.0455%205L14.7223%206.3135L20.8723%2012.4H6.72727C4.67727%2012.4%203%2014.0465%203%2016.1V38.3C3%2040.335%204.67727%2042%206.72727%2042H40.2727C42.3227%2042%2044%2040.335%2044%2038.3V16.1C44%2014.0465%2042.3227%2012.4%2040.2727%2012.4ZM40.2727%2038.3H6.72727V16.1H40.2727V38.3ZM17.9091%2019.8V34.6L30.9545%2027.2L17.9091%2019.8Z%22%20fill%3D%22%23549BF6%22%2F%3E%3C%2Fsvg%3E";
@@ -630,7 +634,7 @@ var bookSaved = "data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%2
 
 var certificate = "data:image/svg+xml,%3Csvg%20width%3D%2212%22%20height%3D%2214%22%20viewBox%3D%220%200%2012%2014%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M10.5%200H1.5C0.675%200%200%200.63%200%201.4V12.6C0%2013.37%200.675%2014%201.5%2014H10.5C11.325%2014%2012%2013.37%2012%2012.6V1.4C12%200.63%2011.325%200%2010.5%200ZM1.5%201.4H5.25V7L3.375%205.95L1.5%207V1.4Z%22%20fill%3D%22%234E93FF%22%2F%3E%3C%2Fsvg%3E";
 
-var calendar = "data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M12.5627%202.67V1.5C12.5627%201.1925%2012.3077%200.9375%2012.0002%200.9375C11.6927%200.9375%2011.4377%201.1925%2011.4377%201.5V2.625H6.56267V1.5C6.56267%201.1925%206.30767%200.9375%206.00017%200.9375C5.69267%200.9375%205.43767%201.1925%205.43767%201.5V2.67C3.41267%202.8575%202.43017%204.065%202.28017%205.8575C2.26517%206.075%202.44517%206.255%202.65517%206.255H15.3452C15.5627%206.255%2015.7427%206.0675%2015.7202%205.8575C15.5702%204.065%2014.5877%202.8575%2012.5627%202.67Z%22%20fill%3D%22%234E93FF%22%2F%3E%3Cpath%20d%3D%22M15%207.38086H3C2.5875%207.38086%202.25%207.71836%202.25%208.13086V12.7509C2.25%2015.0009%203.375%2016.5009%206%2016.5009H12C14.625%2016.5009%2015.75%2015.0009%2015.75%2012.7509V8.13086C15.75%207.71836%2015.4125%207.38086%2015%207.38086ZM6.9075%2013.6584C6.87%2013.6884%206.8325%2013.7259%206.795%2013.7484C6.75%2013.7784%206.705%2013.8009%206.66%2013.8159C6.615%2013.8384%206.57%2013.8534%206.525%2013.8609C6.4725%2013.8684%206.4275%2013.8759%206.375%2013.8759C6.2775%2013.8759%206.18%2013.8534%206.09%2013.8159C5.9925%2013.7784%205.9175%2013.7259%205.8425%2013.6584C5.7075%2013.5159%205.625%2013.3209%205.625%2013.1259C5.625%2012.9309%205.7075%2012.7359%205.8425%2012.5934C5.9175%2012.5259%205.9925%2012.4734%206.09%2012.4359C6.225%2012.3759%206.375%2012.3609%206.525%2012.3909C6.57%2012.3984%206.615%2012.4134%206.66%2012.4359C6.705%2012.4509%206.75%2012.4734%206.795%2012.5034C6.8325%2012.5334%206.87%2012.5634%206.9075%2012.5934C7.0425%2012.7359%207.125%2012.9309%207.125%2013.1259C7.125%2013.3209%207.0425%2013.5159%206.9075%2013.6584ZM6.9075%2011.0334C6.765%2011.1684%206.57%2011.2509%206.375%2011.2509C6.18%2011.2509%205.985%2011.1684%205.8425%2011.0334C5.7075%2010.8909%205.625%2010.6959%205.625%2010.5009C5.625%2010.3059%205.7075%2010.1109%205.8425%209.96836C6.0525%209.75836%206.3825%209.69086%206.66%209.81086C6.7575%209.84836%206.84%209.90086%206.9075%209.96836C7.0425%2010.1109%207.125%2010.3059%207.125%2010.5009C7.125%2010.6959%207.0425%2010.8909%206.9075%2011.0334ZM9.5325%2013.6584C9.39%2013.7934%209.195%2013.8759%209%2013.8759C8.805%2013.8759%208.61%2013.7934%208.4675%2013.6584C8.3325%2013.5159%208.25%2013.3209%208.25%2013.1259C8.25%2012.9309%208.3325%2012.7359%208.4675%2012.5934C8.745%2012.3159%209.255%2012.3159%209.5325%2012.5934C9.6675%2012.7359%209.75%2012.9309%209.75%2013.1259C9.75%2013.3209%209.6675%2013.5159%209.5325%2013.6584ZM9.5325%2011.0334C9.495%2011.0634%209.4575%2011.0934%209.42%2011.1234C9.375%2011.1534%209.33%2011.1759%209.285%2011.1909C9.24%2011.2134%209.195%2011.2284%209.15%2011.2359C9.0975%2011.2434%209.0525%2011.2509%209%2011.2509C8.805%2011.2509%208.61%2011.1684%208.4675%2011.0334C8.3325%2010.8909%208.25%2010.6959%208.25%2010.5009C8.25%2010.3059%208.3325%2010.1109%208.4675%209.96836C8.535%209.90086%208.6175%209.84836%208.715%209.81086C8.9925%209.69086%209.3225%209.75836%209.5325%209.96836C9.6675%2010.1109%209.75%2010.3059%209.75%2010.5009C9.75%2010.6959%209.6675%2010.8909%209.5325%2011.0334ZM12.1575%2013.6584C12.015%2013.7934%2011.82%2013.8759%2011.625%2013.8759C11.43%2013.8759%2011.235%2013.7934%2011.0925%2013.6584C10.9575%2013.5159%2010.875%2013.3209%2010.875%2013.1259C10.875%2012.9309%2010.9575%2012.7359%2011.0925%2012.5934C11.37%2012.3159%2011.88%2012.3159%2012.1575%2012.5934C12.2925%2012.7359%2012.375%2012.9309%2012.375%2013.1259C12.375%2013.3209%2012.2925%2013.5159%2012.1575%2013.6584ZM12.1575%2011.0334C12.12%2011.0634%2012.0825%2011.0934%2012.045%2011.1234C12%2011.1534%2011.955%2011.1759%2011.91%2011.1909C11.865%2011.2134%2011.82%2011.2284%2011.775%2011.2359C11.7225%2011.2434%2011.67%2011.2509%2011.625%2011.2509C11.43%2011.2509%2011.235%2011.1684%2011.0925%2011.0334C10.9575%2010.8909%2010.875%2010.6959%2010.875%2010.5009C10.875%2010.3059%2010.9575%2010.1109%2011.0925%209.96836C11.1675%209.90086%2011.2425%209.84836%2011.34%209.81086C11.475%209.75086%2011.625%209.73586%2011.775%209.76586C11.82%209.77336%2011.865%209.78836%2011.91%209.81086C11.955%209.82586%2012%209.84836%2012.045%209.87836C12.0825%209.90836%2012.12%209.93836%2012.1575%209.96836C12.2925%2010.1109%2012.375%2010.3059%2012.375%2010.5009C12.375%2010.6959%2012.2925%2010.8909%2012.1575%2011.0334Z%22%20fill%3D%22%234E93FF%22%2F%3E%3C%2Fsvg%3E";
+var calendar$1 = "data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M12.5627%202.67V1.5C12.5627%201.1925%2012.3077%200.9375%2012.0002%200.9375C11.6927%200.9375%2011.4377%201.1925%2011.4377%201.5V2.625H6.56267V1.5C6.56267%201.1925%206.30767%200.9375%206.00017%200.9375C5.69267%200.9375%205.43767%201.1925%205.43767%201.5V2.67C3.41267%202.8575%202.43017%204.065%202.28017%205.8575C2.26517%206.075%202.44517%206.255%202.65517%206.255H15.3452C15.5627%206.255%2015.7427%206.0675%2015.7202%205.8575C15.5702%204.065%2014.5877%202.8575%2012.5627%202.67Z%22%20fill%3D%22%234E93FF%22%2F%3E%3Cpath%20d%3D%22M15%207.38086H3C2.5875%207.38086%202.25%207.71836%202.25%208.13086V12.7509C2.25%2015.0009%203.375%2016.5009%206%2016.5009H12C14.625%2016.5009%2015.75%2015.0009%2015.75%2012.7509V8.13086C15.75%207.71836%2015.4125%207.38086%2015%207.38086ZM6.9075%2013.6584C6.87%2013.6884%206.8325%2013.7259%206.795%2013.7484C6.75%2013.7784%206.705%2013.8009%206.66%2013.8159C6.615%2013.8384%206.57%2013.8534%206.525%2013.8609C6.4725%2013.8684%206.4275%2013.8759%206.375%2013.8759C6.2775%2013.8759%206.18%2013.8534%206.09%2013.8159C5.9925%2013.7784%205.9175%2013.7259%205.8425%2013.6584C5.7075%2013.5159%205.625%2013.3209%205.625%2013.1259C5.625%2012.9309%205.7075%2012.7359%205.8425%2012.5934C5.9175%2012.5259%205.9925%2012.4734%206.09%2012.4359C6.225%2012.3759%206.375%2012.3609%206.525%2012.3909C6.57%2012.3984%206.615%2012.4134%206.66%2012.4359C6.705%2012.4509%206.75%2012.4734%206.795%2012.5034C6.8325%2012.5334%206.87%2012.5634%206.9075%2012.5934C7.0425%2012.7359%207.125%2012.9309%207.125%2013.1259C7.125%2013.3209%207.0425%2013.5159%206.9075%2013.6584ZM6.9075%2011.0334C6.765%2011.1684%206.57%2011.2509%206.375%2011.2509C6.18%2011.2509%205.985%2011.1684%205.8425%2011.0334C5.7075%2010.8909%205.625%2010.6959%205.625%2010.5009C5.625%2010.3059%205.7075%2010.1109%205.8425%209.96836C6.0525%209.75836%206.3825%209.69086%206.66%209.81086C6.7575%209.84836%206.84%209.90086%206.9075%209.96836C7.0425%2010.1109%207.125%2010.3059%207.125%2010.5009C7.125%2010.6959%207.0425%2010.8909%206.9075%2011.0334ZM9.5325%2013.6584C9.39%2013.7934%209.195%2013.8759%209%2013.8759C8.805%2013.8759%208.61%2013.7934%208.4675%2013.6584C8.3325%2013.5159%208.25%2013.3209%208.25%2013.1259C8.25%2012.9309%208.3325%2012.7359%208.4675%2012.5934C8.745%2012.3159%209.255%2012.3159%209.5325%2012.5934C9.6675%2012.7359%209.75%2012.9309%209.75%2013.1259C9.75%2013.3209%209.6675%2013.5159%209.5325%2013.6584ZM9.5325%2011.0334C9.495%2011.0634%209.4575%2011.0934%209.42%2011.1234C9.375%2011.1534%209.33%2011.1759%209.285%2011.1909C9.24%2011.2134%209.195%2011.2284%209.15%2011.2359C9.0975%2011.2434%209.0525%2011.2509%209%2011.2509C8.805%2011.2509%208.61%2011.1684%208.4675%2011.0334C8.3325%2010.8909%208.25%2010.6959%208.25%2010.5009C8.25%2010.3059%208.3325%2010.1109%208.4675%209.96836C8.535%209.90086%208.6175%209.84836%208.715%209.81086C8.9925%209.69086%209.3225%209.75836%209.5325%209.96836C9.6675%2010.1109%209.75%2010.3059%209.75%2010.5009C9.75%2010.6959%209.6675%2010.8909%209.5325%2011.0334ZM12.1575%2013.6584C12.015%2013.7934%2011.82%2013.8759%2011.625%2013.8759C11.43%2013.8759%2011.235%2013.7934%2011.0925%2013.6584C10.9575%2013.5159%2010.875%2013.3209%2010.875%2013.1259C10.875%2012.9309%2010.9575%2012.7359%2011.0925%2012.5934C11.37%2012.3159%2011.88%2012.3159%2012.1575%2012.5934C12.2925%2012.7359%2012.375%2012.9309%2012.375%2013.1259C12.375%2013.3209%2012.2925%2013.5159%2012.1575%2013.6584ZM12.1575%2011.0334C12.12%2011.0634%2012.0825%2011.0934%2012.045%2011.1234C12%2011.1534%2011.955%2011.1759%2011.91%2011.1909C11.865%2011.2134%2011.82%2011.2284%2011.775%2011.2359C11.7225%2011.2434%2011.67%2011.2509%2011.625%2011.2509C11.43%2011.2509%2011.235%2011.1684%2011.0925%2011.0334C10.9575%2010.8909%2010.875%2010.6959%2010.875%2010.5009C10.875%2010.3059%2010.9575%2010.1109%2011.0925%209.96836C11.1675%209.90086%2011.2425%209.84836%2011.34%209.81086C11.475%209.75086%2011.625%209.73586%2011.775%209.76586C11.82%209.77336%2011.865%209.78836%2011.91%209.81086C11.955%209.82586%2012%209.84836%2012.045%209.87836C12.0825%209.90836%2012.12%209.93836%2012.1575%209.96836C12.2925%2010.1109%2012.375%2010.3059%2012.375%2010.5009C12.375%2010.6959%2012.2925%2010.8909%2012.1575%2011.0334Z%22%20fill%3D%22%234E93FF%22%2F%3E%3C%2Fsvg%3E";
 
 var video = "data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2219%22%20viewBox%3D%220%200%2018%2019%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M15.8625%205.1275C15.555%204.9625%2014.91%204.79%2014.0325%205.405L12.93%206.185C12.8475%203.8525%2011.835%202.9375%209.375%202.9375H4.875C2.31%202.9375%201.3125%203.935%201.3125%206.5V12.5C1.3125%2014.225%202.25%2016.0625%204.875%2016.0625H9.375C11.835%2016.0625%2012.8475%2015.1475%2012.93%2012.815L14.0325%2013.595C14.4975%2013.925%2014.9025%2014.03%2015.225%2014.03C15.5025%2014.03%2015.72%2013.9475%2015.8625%2013.8725C16.17%2013.715%2016.6875%2013.2875%2016.6875%2012.215V6.785C16.6875%205.7125%2016.17%205.285%2015.8625%205.1275ZM8.25%209.035C7.4775%209.035%206.84%208.405%206.84%207.625C6.84%206.845%207.4775%206.215%208.25%206.215C9.0225%206.215%209.66%206.845%209.66%207.625C9.66%208.405%209.0225%209.035%208.25%209.035Z%22%20fill%3D%22%23589DF5%22%2F%3E%3C%2Fsvg%3E";
 
@@ -726,7 +730,7 @@ const icons = {
   Clock: getConfiguredIcon2(clock, false, true),
   'Book Saved': getConfiguredIcon2(bookSaved, false, true),
   Certificate: getConfiguredIcon2(certificate, false, true),
-  Calendar: getConfiguredIcon2(calendar, false, true),
+  Calendar: getConfiguredIcon2(calendar$1, false, true),
   Video: getConfiguredIcon2(video, false, true)
 };
 
@@ -2670,6 +2674,7 @@ const useSectionStyles$6 = createUseStyles(theme => ({
   },
   sectionContainer: {
     margin: '0 auto',
+    width: '100%',
     maxWidth: ({
       containerWidth
     } = {}) => containerWidth
@@ -7103,7 +7108,7 @@ const useCoursePromotionPage = createUseStyles(theme => {
       color: theme.palette.font.default
     },
     courseViewContainer: {
-      width: '645px',
+      width: '445px',
       backgroundColor: '#f4f9ff',
       display: 'flex',
       flexDirection: 'column',
@@ -7196,6 +7201,34 @@ const useCoursePromotionPage = createUseStyles(theme => {
       alignItems: 'center',
       borderRadius: '6px'
     },
+    payInstallmentContainer: {
+      display: 'flex',
+      gap: '20px',
+      padding: '12px 16px',
+      background: '#f4f9ff',
+      borderRadius: '16px',
+      marginTop: '32px',
+      cursor: 'pointer'
+    },
+    payInstallmentHeader: {
+      '& h4': {
+        color: '#0A1629',
+        fontSize: '20px',
+        fontWeight: '600',
+        margin: '0px'
+      },
+      '& p': {
+        color: '#7D8592',
+        fontSize: '16px',
+        margin: '0px',
+        fontWeight: '600',
+        marginTop: '4px',
+        lineHeight: '24px'
+      }
+    },
+    arrowRightIcon: {
+      marginLeft: 'auto'
+    },
     '@media (max-width: 767px)': {
       courseViewContainer: {
         width: '100%',
@@ -7232,6 +7265,10 @@ const useCoursePromotionPage = createUseStyles(theme => {
   };
 });
 
+var calendar = "data:image/svg+xml,%3Csvg%20width%3D%2236%22%20height%3D%2236%22%20viewBox%3D%220%200%2036%2036%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M25.1253%205.34V3C25.1253%202.385%2024.6153%201.875%2024.0003%201.875C23.3853%201.875%2022.8753%202.385%2022.8753%203V5.25H13.1253V3C13.1253%202.385%2012.6153%201.875%2012.0003%201.875C11.3853%201.875%2010.8753%202.385%2010.8753%203V5.34C6.82534%205.715%204.86034%208.13%204.56034%2011.715C4.53034%2012.15%204.89034%2012.51%205.31034%2012.51H30.6903C31.1253%2012.51%2031.4853%2012.135%2031.4403%2011.715C31.1403%208.13%2029.1753%205.715%2025.1253%205.34Z%22%20fill%3D%22%2300ADE7%22%2F%3E%3Cpath%20d%3D%22M30%2014.7598H6C5.175%2014.7598%204.5%2015.4348%204.5%2016.2598V25.4998C4.5%2029.9998%206.75%2032.9998%2012%2032.9998H24C29.25%2032.9998%2031.5%2029.9998%2031.5%2025.4998V16.2598C31.5%2015.4348%2030.825%2014.7598%2030%2014.7598ZM13.815%2027.3148C13.74%2027.3748%2013.665%2027.4498%2013.59%2027.4948C13.5%2027.5548%2013.41%2027.5998%2013.32%2027.6298C13.23%2027.6748%2013.14%2027.7048%2013.05%2027.7198C12.945%2027.7348%2012.855%2027.7498%2012.75%2027.7498C12.555%2027.7498%2012.36%2027.7048%2012.18%2027.6298C11.985%2027.5548%2011.835%2027.4498%2011.685%2027.3148C11.415%2027.0298%2011.25%2026.6398%2011.25%2026.2498C11.25%2025.8598%2011.415%2025.4698%2011.685%2025.1848C11.835%2025.0498%2011.985%2024.9448%2012.18%2024.8698C12.45%2024.7498%2012.75%2024.7198%2013.05%2024.7798C13.14%2024.7948%2013.23%2024.8248%2013.32%2024.8698C13.41%2024.8998%2013.5%2024.9448%2013.59%2025.0048C13.665%2025.0648%2013.74%2025.1248%2013.815%2025.1848C14.085%2025.4698%2014.25%2025.8598%2014.25%2026.2498C14.25%2026.6398%2014.085%2027.0298%2013.815%2027.3148ZM13.815%2022.0648C13.53%2022.3348%2013.14%2022.4998%2012.75%2022.4998C12.36%2022.4998%2011.97%2022.3348%2011.685%2022.0648C11.415%2021.7798%2011.25%2021.3898%2011.25%2020.9998C11.25%2020.6098%2011.415%2020.2198%2011.685%2019.9348C12.105%2019.5148%2012.765%2019.3798%2013.32%2019.6198C13.515%2019.6948%2013.68%2019.7998%2013.815%2019.9348C14.085%2020.2198%2014.25%2020.6098%2014.25%2020.9998C14.25%2021.3898%2014.085%2021.7798%2013.815%2022.0648ZM19.065%2027.3148C18.78%2027.5848%2018.39%2027.7498%2018%2027.7498C17.61%2027.7498%2017.22%2027.5848%2016.935%2027.3148C16.665%2027.0298%2016.5%2026.6398%2016.5%2026.2498C16.5%2025.8598%2016.665%2025.4698%2016.935%2025.1848C17.49%2024.6298%2018.51%2024.6298%2019.065%2025.1848C19.335%2025.4698%2019.5%2025.8598%2019.5%2026.2498C19.5%2026.6398%2019.335%2027.0298%2019.065%2027.3148ZM19.065%2022.0648C18.99%2022.1248%2018.915%2022.1848%2018.84%2022.2448C18.75%2022.3048%2018.66%2022.3498%2018.57%2022.3798C18.48%2022.4248%2018.39%2022.4548%2018.3%2022.4698C18.195%2022.4848%2018.105%2022.4998%2018%2022.4998C17.61%2022.4998%2017.22%2022.3348%2016.935%2022.0648C16.665%2021.7798%2016.5%2021.3898%2016.5%2020.9998C16.5%2020.6098%2016.665%2020.2198%2016.935%2019.9348C17.07%2019.7998%2017.235%2019.6948%2017.43%2019.6198C17.985%2019.3798%2018.645%2019.5148%2019.065%2019.9348C19.335%2020.2198%2019.5%2020.6098%2019.5%2020.9998C19.5%2021.3898%2019.335%2021.7798%2019.065%2022.0648ZM24.315%2027.3148C24.03%2027.5848%2023.64%2027.7498%2023.25%2027.7498C22.86%2027.7498%2022.47%2027.5848%2022.185%2027.3148C21.915%2027.0298%2021.75%2026.6398%2021.75%2026.2498C21.75%2025.8598%2021.915%2025.4698%2022.185%2025.1848C22.74%2024.6298%2023.76%2024.6298%2024.315%2025.1848C24.585%2025.4698%2024.75%2025.8598%2024.75%2026.2498C24.75%2026.6398%2024.585%2027.0298%2024.315%2027.3148ZM24.315%2022.0648C24.24%2022.1248%2024.165%2022.1848%2024.09%2022.2448C24%2022.3048%2023.91%2022.3498%2023.82%2022.3798C23.73%2022.4248%2023.64%2022.4548%2023.55%2022.4698C23.445%2022.4848%2023.34%2022.4998%2023.25%2022.4998C22.86%2022.4998%2022.47%2022.3348%2022.185%2022.0648C21.915%2021.7798%2021.75%2021.3898%2021.75%2020.9998C21.75%2020.6098%2021.915%2020.2198%2022.185%2019.9348C22.335%2019.7998%2022.485%2019.6948%2022.68%2019.6198C22.95%2019.4998%2023.25%2019.4698%2023.55%2019.5298C23.64%2019.5448%2023.73%2019.5748%2023.82%2019.6198C23.91%2019.6498%2024%2019.6948%2024.09%2019.7548C24.165%2019.8148%2024.24%2019.8748%2024.315%2019.9348C24.585%2020.2198%2024.75%2020.6098%2024.75%2020.9998C24.75%2021.3898%2024.585%2021.7798%2024.315%2022.0648Z%22%20fill%3D%22%2300ADE7%22%2F%3E%3C%2Fsvg%3E";
+
+var arrowRight = "data:image/svg+xml,%3Csvg%20width%3D%228%22%20height%3D%2214%22%20viewBox%3D%220%200%208%2014%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M1%2013L7%207L1%201%22%20stroke%3D%22%237D8592%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E";
+
 const SingleVideoSlide = props => {
   const [isReadMore, setIsReadMore] = useState(false);
   const theme = useTheme();
@@ -7262,8 +7299,11 @@ const SingleVideoSlide = props => {
   const {
     data,
     courseBuyNow,
-    conversions = 20
+    conversions = 20,
+    showCourseInstallment
   } = props;
+  const showCourseInstallmentData = data?.courseOverviewData?.installments?.isInstallmentActive;
+  const InstalmentData = data?.courseOverviewData?.installments?.formData?.installments[0].installmentAmount;
 
   const checkIfOfferIsValid = () => moment().diff(moment(props?.data?.endDate || 0)) < 0;
 
@@ -7319,12 +7359,13 @@ const SingleVideoSlide = props => {
       className: classes.courseEmblem
     }, data?.text);
   })), /*#__PURE__*/React.createElement("h3", {
+    className: classes.videoDetailsHeading
+  }, /*#__PURE__*/React.createElement("span", {
     ref: data?.videoTextHeading?.refSetter,
-    className: classes.videoDetailsHeading,
     dangerouslySetInnerHTML: {
       __html: data.courseName
     }
-  }), /*#__PURE__*/React.createElement("div", {
+  })), /*#__PURE__*/React.createElement("div", {
     className: classes.courseDetailsTags
   }, data?.courseOverviewData?.courseDuration?.text ? /*#__PURE__*/React.createElement("div", {
     className: classes.courseDetailTag
@@ -7370,6 +7411,11 @@ const SingleVideoSlide = props => {
       __html: data.description.length > 250 && !isReadMore ? 'Read More' : null
     }
   }))), /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: 'flex',
+      flexDirection: 'column'
+    }
+  }, /*#__PURE__*/React.createElement("div", {
     className: classes.courseViewContainer
   }, checkIfOfferIsValid() && (data.offerPriceValidFor !== 0 ? data.offerPriceValidFor - conversions > 0 : true) && /*#__PURE__*/React.createElement("p", {
     className: classes.offerText
@@ -7416,7 +7462,23 @@ const SingleVideoSlide = props => {
     target: null,
     rel: null // styling={isMobile ? { margin: '0 40px' } : {}}
 
-  }))))));
+  })))), showCourseInstallmentData && InstalmentData && /*#__PURE__*/React.createElement("div", {
+    className: classes.payInstallmentContainer,
+    onClick: showCourseInstallment
+  }, /*#__PURE__*/React.createElement("img", {
+    src: calendar,
+    alt: "calender"
+  }), /*#__PURE__*/React.createElement("div", {
+    className: classes.payInstallmentHeader
+  }, /*#__PURE__*/React.createElement("h4", null, /*#__PURE__*/React.createElement("span", {
+    dangerouslySetInnerHTML: {
+      __html: ` Start learning at Rs ${InstalmentData}`
+    }
+  })), /*#__PURE__*/React.createElement("p", null, "Pay in Instalments")), /*#__PURE__*/React.createElement("img", {
+    className: classes.arrowRightIcon,
+    src: arrowRight,
+    alt: "open pay-installment popup"
+  })))));
 };
 
 function CoursePromotionPage({
@@ -7441,6 +7503,7 @@ function CoursePromotionPage({
   }, /*#__PURE__*/React.createElement(SingleVideoSlide, {
     data: sectionData.components[0].metadata,
     courseBuyNow: extraProps.courseBuyNow,
+    showCourseInstallment: extraProps.showCourseInstallment,
     conversions: extraProps.conversions
   }))));
 }