An error occurred while processing the template.
The following has evaluated to null or missing:
==> qstringmap["ecdma-lc"] [in template "10154#10192#153417670" at line 19, column 15]
----
Tip: It's the final [] step that caused this error, not those before it.
----
Tip: If the failing expression is known to legally refer to something that's sometimes null or missing, either specify a default value like myOptionalVar!myDefault, or use <#if myOptionalVar??>when-present<#else>when-missing</#if>. (These only cover the last step of the expression; to cover the whole expression, use parenthesis: (myOptionalVar.foo)!myDefault, (myOptionalVar.foo)??
----
----
FTL stack trace ("~" means nesting-related):
- Failed at: #assign lc = qstringmap["ecdma-lc"]?f... [in template "10154#10192#153417670" at line 19, column 1]
----
1<#assign utilServ = (serviceLocator.findService("com.elan.crc.utilites.service.CRCRemoteServiceService"))! />
2<#assign oadURL = propsUtil.get('elan.oad.url') >
3<#assign serviceContext = staticUtil["com.liferay.portal.kernel.service.ServiceContextThreadLocal"].getServiceContext() >
4<#assign themeDisplay = serviceContext.getThemeDisplay() />
5<#assign url = themeDisplay.getPortalURL() + themeDisplay.getURLCurrent()/>
6<#assign qstringmap = httpUtil.getParameterMap(httpUtil.getQueryString(url))>
7<#assign url404 = '/error/404.html' >
8<#assign environment = url?replace('/11t3.*','','r')>
9
10<#assign text_to_apply_source = "vanity url" >
11<#if qstringmap["sms"]?has_content>
12 <#assign sms = 1 >
13 <#assign text_to_apply_source = "sms" >
14</#if>
15<#if qstringmap["qrCode"]?has_content>
16 <#assign text_to_apply_source = "qr code" >
17</#if>
18
19<#assign lc = qstringmap["ecdma-lc"]?first>
20<#assign lc = htmlUtil.escape(lc)>
21<#assign lc = htmlUtil.escapeJS(lc)>
22
23<#assign prefix = "00000" >
24<#assign lcWithPrefix = prefix + lc >
25<#assign withPrefixLength = lcWithPrefix?length >
26<#assign startHere = withPrefixLength - 5>
27<#assign lc = lcWithPrefix?substring(startHere)>
28
29<#if qstringmap["ecid"]?has_content>
30 <#assign ecidExt = qstringmap["ecid"]?first>
31 <#assign ecidExt = htmlUtil.escape(ecidExt)>
32 <#assign ecidExt = htmlUtil.escapeJS(ecidExt)>
33 <#assign ecidExt = "&ecid=" + ecidExt>
34
35
36 <#assign campaignId = qstringmap["ecid"]?first >
37 <#assign campaignId = htmlUtil.escape(campaignId)>
38 <#assign campaignId = htmlUtil.escapeJS(campaignId)>
39<#else>
40 <#assign ecidExt="">
41 <#assign campaignId = "" >
42</#if>
43
44<#assign isFromDCOLink = false>
45<#assign dcoSourceCode = ''>
46<#if qstringmap["sourcecode"]?has_content>
47 <#assign dcoSourceCode = qstringmap["sourcecode"]?first>
48 <#assign dcoSourceCode = htmlUtil.escape(dcoSourceCode)>
49 <#assign dcoSourceCode = htmlUtil.escapeJS(dcoSourceCode)>
50<#elseif qstringmap["sourceCode"]?has_content>
51 <#assign dcoSourceCode = qstringmap["sourceCode"]?first>
52 <#assign dcoSourceCode = htmlUtil.escape(dcoSourceCode)>
53 <#assign dcoSourceCode = htmlUtil.escapeJS(dcoSourceCode)>
54</#if>
55
56<#if dcoSourceCode?has_content>
57 <#assign isFromDCOLink = true>
58</#if>
59
60<#assign clientProfileService = (serviceLocator.findService("com.elan.crc.user.service.CrcClientProfileLocalService"))! />
61<#assign clientProfileList = clientProfileService.findByLocationCode(lc)>
62<#assign clientProfile = clientProfileList?first>
63<#assign partnerName = clientProfile.getMarketingNameLong()>
64<#assign pbu = clientProfile.getPbu()>
65<#assign subbu = clientProfile.getSUBBRANDBUNBR()>
66
67<#assign logoFileName = clientProfile.getLogoBFormat1()?replace(".", "-")?replace("-([^-]*)$", ".$1", "r")?lower_case>
68<#assign cdnLogoUrl = (propsUtil.get('rackspace.cdn.web.url'))!>
69<#assign fiCardsData = utilServ.makeCall('crcTier3GetPbuData','0&'+pbu+'&'+subbu)>
70
71 <#assign clientDataService = (serviceLocator.findService("com.elan.crc.user.service.CrcPbuLocalService"))! />
72<#assign clientProfileDataList = clientDataService.getByPbuAndSubBu(pbu,subbu)>
73<#assign partnerUrl = clientProfileDataList.getPartnerMainUrl()>
74<script>
75//console.log('Partner URL', ${partnerUrl});
76</script>
77<#if partnerUrl?has_content && !partnerUrl?matches(r"(?i)^https?\:\/\/.*")>
78 <#assign partnerUrl = 'https://' + partnerUrl>
79</#if>
80<script>
81//console.log('Partner URL', ${partnerUrl});
82
83</script>
84<#-- Begin: filter duplicated cards-->
85<#assign temp = []>
86<#assign offerTypeList = []>
87<#if (fiCardsData?size > 0)>
88 <#assign index = 0>
89 <#list fiCardsData as fib>
90 <#if (fib.offerType?has_content && !(offerTypeList?seq_contains(fib.offerType)))>
91 <#assign offerTypeList = offerTypeList + [fib.offerType]>
92 <#assign temp = temp + fiCardsData[index..index]>
93 </#if>
94 <#assign index = index + 1>
95 </#list>
96 <#assign fiCardsData = temp>
97 <#if (fiCardsData?size > 0)>
98 <div class="content-container content-container-main" title="${partnerName!''}">
99 <#if url?contains("index")>
100 <#assign product="All Cards">
101 <header class="jn-header">
102 <div class="header-logo">
103
104 <#if partnerUrl?has_content>
105 <a href="${partnerUrl!''}" title="${partnerName!''}">
106 <img src="${cdnLogoUrl!''}/${logoFileName!''}" alt="${partnerName!''} Logo" title="${partnerName!''} Logo">
107 </a>
108 <#else>
109 <img src="${cdnLogoUrl!''}/${logoFileName!''}" alt="${partnerName!''} Logo" title="${partnerName!''} Logo">
110 </#if>
111 </div>
112 </header>
113 <#else>
114 <header class="jn-header">
115 <#if !isFromDCOLink>
116 <div class="back-overview hide-desktop">
117 <a href="${environment}/11t3/index?ecdma-lc=${lc}${ecidExt}">Home</a>
118 </div>
119 </#if>
120
121 <div class="header-main-logo" title="${partnerName!''}">
122 <#if partnerUrl?has_content>
123 <a href="${partnerUrl!''}" title="${partnerName!''}">
124 <img src="${cdnLogoUrl!''}/${logoFileName!''}" alt="${partnerName!''} Logo" title="${partnerName!''} Logo">
125 </a>
126 <#else>
127 <img src="${cdnLogoUrl!''}/${logoFileName!''}" alt="${partnerName!''} Logo" title="${partnerName!''} Logo">
128 </#if>
129 </div>
130 <#if !isFromDCOLink>
131 <div class="styled-select slate">
132 <nav class="styled-select__dropdown">
133 <div class="back-overview hide-mobile">
134 <a href="${environment}/11t3/index?ecdma-lc=${lc}${ecidExt}">Home</a>
135 </div>
136 <a href="javascript:void(0)" class="dropdown-select" aria-expanded="false">
137 <span class="selected-option"></span>
138 <div class="jn-arrow arrow arrow-right"></div>
139 </a>
140 <a href="javascript:void(0)" class="jn-hamburger hamburger" aria-expanded="false">
141 <div class="first-line transform transformed1"></div>
142 <div></div>
143 <div class="transform transformed2"></div>
144 <div></div>
145 </a>
146 <ul>
147 <#list fiCardsData as fib>
148 <#switch fib.offerType>
149 <#case "101">
150 <#assign productURL = "202302/consumer-edr">
151 <#assign productName = "Everyday Rewards+">
152 <#break>
153 <#case "103">
154 <#assign productURL = "202302/consumer-edr">
155 <#assign productName = "Everyday Rewards+">
156 <#break>
157 <#case "104">
158 <#assign productURL = "max-cash">
159 <#assign productName = "Max Cash Preferred Card">
160 <#break>
161 <#case "108">
162 <#assign productURL="202308/consumer-platinum">
163 <#assign productName="Platinum Card">
164 <#break>
165 <#case "109">
166 <#assign productURL="202308/consumer-platinum">
167 <#assign productName="Platinum Card">
168 <#break>
169 <#case "115">
170 <#assign productURL = "secured">
171 <#assign productName = "Secured Card" >
172 <#break>
173 <#case "138">
174 <#assign productURL = "202305/travel-rewards-plus">
175 <#assign productName = "Travel Rewards+" >
176 <#break>
177 <#case "141">
178 <#assign productURL = "college-real-rewards">
179 <#assign productName = "College Real Rewards" >
180 <#break>
181 <#case "147">
182 <#assign productURL = "max-cash-secured">
183 <#assign productName = "Max Cash Secured Card" >
184 <#break>
185 <#case "154">
186 <#assign productURL = "202305/reserve-rewards-plus">
187 <#assign productName = "Reserve Rewards+" >
188 <#break>
189 <#case "121">
190 <#assign productURL = "202208/business-platinum">
191 <#assign productName = "Business Card" >
192 <#break>
193 <#case "128">
194 <#assign productURL = "business-cash-preferred">
195 <#assign productName = "Business Cash Preferred" >
196 <#break>
197 <#case "143">
198 <#assign productURL = "business-real-rewards">
199 <#assign productName = "Business Real Rewards Card" >
200 <#break>
201 <#case "144">
202 <#assign productURL = "smart-business-rewards">
203 <#assign productName = "Smart Business Rewards Card" >
204 <#break>
205 <#default>
206 </#switch>
207 <#if url?matches(".*/${productURL}\\?.*")>
208 <li class="selected" data-value="${productName}" selected="selected"><a href="javascript:void(0)">${productName}</a></li>
209 <#else>
210 <li class="dropdown-item" data-value="${productName}">
211 <a href="${environment}/11t3/${productURL}?ecdma-lc=${lc}${ecidExt}">
212 ${productName}
213 </a>
214 </li>
215 </#if>
216 </#list>
217 </ul>
218 </nav>
219
220 </div>
221 </#if>
222 </header>
223 <script>
224 function toggleFlyOutMenu() {
225 $('.styled-select').toggleClass('show-select');
226 var ariaExpanded = $('.styled-select__dropdown .dropdown-select').attr('aria-expanded');
227 if(ariaExpanded !== null) {
228 var isAriaExpanded;
229 if(ariaExpanded === "true") {
230 isAriaExpanded = true;
231 } else {
232 isAriaExpanded = false
233 }
234 $('.styled-select__dropdown .dropdown-select').attr('aria-expanded', !isAriaExpanded);
235 $('.styled-select__dropdown .jn-hamburger').attr('aria-expanded', !isAriaExpanded);
236 }
237 }
238 AUI().ready(function () {
239 var pageSelected = $('.selected').attr('data-value');
240 $('.jn-hamburger, .dropdown-select').click(function () {
241 toggleFlyOutMenu();
242 });
243 $('.styled-select__dropdown').keydown(function(event) {
244 var firstNavigationLink = $('.styled-select__dropdown ul li:visible a').first();
245 var lastNavigationLink = $('.styled-select__dropdown ul li:visible a').last();
246
247 if(event.keyCode === 9 ) {
248 // if they tab outside of the nav close the navigation
249 //shift + tab pressed
250 if(event.shiftKey && firstNavigationLink.is(document.activeElement)) {
251 toggleFlyOutMenu();
252 } else if(!event.shiftKey && lastNavigationLink.is(document.activeElement)) {
253 toggleFlyOutMenu();
254 }
255 }
256 });
257 $('.selected-option').text(pageSelected);
258 });
259 </script>
260 </#if>
261 </div>
262 <script>
263 var reportingData = {};
264
265 //document.addEventListener('DOMContentLoaded', function() {
266 AUI().ready(function () {
267 //console.log('inside ready');
268 var page = location.pathname.split('/')[location.pathname.split('/').length-1];
269 var hostName = location.hostname;
270 function getDomainFromHostname(hostname) {
271 var parts = hostname.split('.');
272 return parts.length === 3 ? parts[1] : parts[0];
273 }
274 var domain = getDomainFromHostname(hostName);
275 var partnerName = "${partnerName!''}";
276 var product = "All Cards";
277 var title = "";
278 var metaDesc = "";
279 var m = document.createElement('meta');
280 switch(page) {
281 case "max-cash-secured":
282 product="Max Cash Secured Card";
283 title = "Earn more on the categories you pick | "+partnerName+" Max Cash Secured Card";
284 metaDesc = "Apply Today for a "+partnerName+" Credit Card. Use this card as a solid foundation to build your credit.";
285 break;
286 case "max-cash":
287 product="Max Cash Preferred Card";
288 title = "Earn a $150 Bonus and 5% cash back | "+partnerName+" Max Cash Preferred Card";
289 metaDesc = "Apply Today for a "+partnerName+" Credit Card. Earn a $150 Bonus and 5% cash back on the two categories you select";
290 break;
291 case "consumer-platinum":
292 product="Platinum Card";
293 title = "The purchasing power of Zero | "+partnerName+" Platinum Card";
294 metaDesc = "Apply Today for a "+partnerName+" Credit Card. Limited Time Offer. 0% Intro APR on Purchases and Balance Transfers for 20 Billing Cycles Consolidate your Balances with the "+partnerName+" Intro APR Card.";
295 break;
296 case "consumer-edr":
297 product="Everyday Rewards+";
298 title = "Sign up and earn bonus points | "+partnerName+" Everyday Rewards+";
299 break;
300 case "secured":
301 product="Secured Card";
302 title = "Strengthen your finances | "+partnerName+" Secured Card";
303 metaDesc = "Apply Today for a "+partnerName+" Credit Card. Use this card as a solid foundation to build your credit.";
304 break;
305 case "college-real-rewards":
306 product="College Real Rewards";
307 title = "Sign up and earn bonus points. | "+partnerName+" College Real Rewards";
308 break;
309 case "smart-business-rewards":
310 product="Smart Business Rewards Card";
311 title = "2X rewards in your top 2 spend categories | "+partnerName+" Business Smart Business Rewards Card";
312 metaDesc = "Apply Today for a "+partnerName+" Credit Card. More choices. More value for your business. Earn a $200 Bonus and 2x Rewards on your top 2 spend categories each month with the "+partnerName+" Credit Card.";
313 break;
314 case "business-cash-preferred":
315 product="Business Cash Preferred";
316 title = "Flexible rewards for your business | "+partnerName+" Business Cash Preferred";
317 metaDesc = "Apply Today for a "+partnerName+" Credit Card. Earn Cash back on common business expenses.";
318 break;
319 case "business-real-rewards":
320 product="Business Real Rewards Card";
321 title = "Earn up to 3X points with no caps | "+partnerName+" Business Real Rewards Card";
322 metaDesc = "Apply Today for a "+partnerName+" Credit Card. Get more rewards in the categories you spend the most on." ;
323 break;
324 case "business-platinum":
325 product="Business Card";
326 title = "Pay down your other credit card balances faster | "+partnerName+" Business Card";
327 metaDesc = "Apply Today for a "+partnerName+" Business Card. 0% Intro APR on Purchases and Balance Transfers for 15 Billing Cycles";
328 break;
329 case "travel-rewards-plus":
330 product="Travel Rewards+"
331 title = partnerName + " | Travel Rewards+ Card";
332 metaDesc = "Make travel more rewarding with unlimited 4x points on travel and frequent popular categories."
333 break;
334 case "reserve-rewards-plus":
335 product="Reserve Rewards+"
336 title = partnerName + " | Reserve Rewards+ Card";
337 metaDesc = "Get exceptional rewards on travel and frequent purchases with this exclusive metal card.";
338 break;
339 default:
340 product = "All Cards";
341 title = partnerName + " Credit Card Index Page";
342 }
343 document.title = title;
344 m.name = 'description';
345 m.content = metaDesc;
346 document.head.appendChild(m);
347
348 var lc = "${lc!'0'}";
349
350 /* update SiteCatalyst data object */
351 reportingData.current_page = "microsite:${partnerName}:" + domain + ':' + page.replace('-',' ');
352 reportingData.page_type = 'product';
353 reportingData.site_section = 'credit cards';
354 reportingData.platform = 'microsite';
355 reportingData.campaign_id = '${campaignId}';
356 reportingData.location_code = lc;
357 reportingData.partner_name = partnerName;
358 reportingData.product = product;
359 reportingData.text_to_apply_source = '${text_to_apply_source}';
360 reportingData.visitor_type = 'prospect';
361 reportingData.Banker_id = '0';
362 reportingData.Banker_code = '0';
363
364
365 /* SiteCatalyst pageView tracking */
366 AUI().ready(function() {
367 if (window.publisherFW) {
368 //console.log("pageView");
369 window.publisherFW.publishEvent("pageView", reportingData);
370 }
371 });
372
373 jQuery('.jn-button, .applyNowLink').on('click', function(e){
374 var buttonName = $(this).data('button-name');
375 var productName = $(this).data('product-name');
376 /* SiteCatalyst onClick tracking */
377 reportingData.applyButton = buttonName;
378 reportingData.product = productName;
379
380 if (window.publisherFW) {
381 //console.log('clicked', reportingData);
382 window.publisherFW.publishEvent("onClick", reportingData);
383 }
384
385 });
386
387 jQuery('.applyNowLink').on('click', function(e){
388 ga("send", {
389 hitType: "event",
390 eventAction: "ApplyNow",
391 eventCategory: "click",
392 eventLabel: "BottomButton"
393 });
394 });
395
396 });
397 </script>
398 <#else>
399 <script>
400 console.log("Empty card list");
401 location.href = '${url404}';
402 </script>
403 </#if>
404<#else>
405 <script>
406 console.log("FI Cards Data empty", "pbu:", "${pbu}", ",subbu:","${subbu}");
407 location.href = '${url404}';
408 </script>
409</#if>
An error occurred while processing the template.
The following has evaluated to null or missing:
==> qstringmap["ecdma-lc"] [in template "10154#10192#153417688" at line 9, column 14]
----
Tip: It's the final [] step that caused this error, not those before it.
----
Tip: If the failing expression is known to legally refer to something that's sometimes null or missing, either specify a default value like myOptionalVar!myDefault, or use <#if myOptionalVar??>when-present<#else>when-missing</#if>. (These only cover the last step of the expression; to cover the whole expression, use parenthesis: (myOptionalVar.foo)!myDefault, (myOptionalVar.foo)??
----
----
FTL stack trace ("~" means nesting-related):
- Failed at: #assign lc = qstringmap["ecdma-lc"]?f... [in template "10154#10192#153417688" at line 9, column 1]
----
1<#assign url = themeDisplay.getPortalURL() + themeDisplay.getURLCurrent()/>
2<#assign oadURL = propsUtil.get('elan.oad.url') >
3<#assign qstringmap = httpUtil.getParameterMap(httpUtil.getQueryString(url))>
4<#assign utilServ = (serviceLocator.findService("com.elan.crc.utilites.service.CRCRemoteServiceService"))! />
5<#assign url404 = '/error/404.html'>
6<#assign oadURL_TC = 'https://online1.elancard.com/oad/terms.controller' >
7<#assign currentEnvironment = 'prod' >
8
9<#assign lc= qstringmap["ecdma-lc"]?first>
10<#assign lc = htmlUtil.escape(lc)>
11<#assign lc = htmlUtil.escapeJS(lc)>
12
13<#assign prefix = "00000" >
14<#assign lcWithPrefix = prefix + lc >
15<#assign withPrefixLength = lcWithPrefix?length >
16<#assign startHere = withPrefixLength - 5>
17<#assign lc = lcWithPrefix?substring(startHere)>
18
19
20<#if qstringmap["ecid"]?has_content>
21 <#assign ecidExt = qstringmap["ecid"]?first>
22 <#assign ecidExt = htmlUtil.escape(ecidExt)>
23 <#assign ecidExt = htmlUtil.escapeJS(ecidExt)>
24 <#assign ecidExt = "&ecid=" + ecidExt>
25<#else>
26 <#assign ecidExt="">
27</#if>
28<#if oadURL?contains("uat-")>
29 <#assign oadURL_TC = 'https://uat-online1.elancard.com/oad/terms.controller' >
30 <#assign currentEnvironment = 'uat' >
31<#else>
32 <#assign oadURL_TC = 'https://online1.elancard.com/oad/terms.controller' >
33</#if>
34 <script>
35 //console.log('%ccurrentEnvironment: ', 'font-weight: bold; color: green;', '${currentEnvironment}');
36 </script>
37<#assign campaignId = "" >
38<#assign ecidExt="">
39<#if qstringmap["ecid"]?has_content>
40 <#assign campaignId = qstringmap["ecid"]?first >
41 <#assign campaignId = htmlUtil.escape(campaignId)>
42 <#assign campaignId = htmlUtil.escapeJS(campaignId)>
43
44 <#assign ecidExt = qstringmap["ecid"]?first>
45 <#assign ecidExt = htmlUtil.escape(ecidExt)>
46 <#assign ecidExt = htmlUtil.escapeJS(ecidExt)>
47 <#assign ecidExt = "&ecid=" + ecidExt>
48</#if>
49
50<#assign dcoSourceCode = "">
51<#assign dcoSourceCodeQueryParameter = "">
52
53<#if qstringmap["sourcecode"]?has_content>
54 <#assign dcoSourceCode = qstringmap["sourcecode"]?first>
55 <#assign dcoSourceCode = htmlUtil.escape(dcoSourceCode)>
56 <#assign dcoSourceCode = htmlUtil.escapeJS(dcoSourceCode)>
57 <#assign dcoSourceCodeQueryParameter = "&sourcecode=${dcoSourceCode}">
58<#elseif qstringmap["sourceCode"]?has_content>
59 <#assign dcoSourceCode = qstringmap["sourceCode"]?first>
60 <#assign dcoSourceCode = htmlUtil.escape(dcoSourceCode)>
61 <#assign dcoSourceCode = htmlUtil.escapeJS(dcoSourceCode)>
62 <#assign dcoSourceCodeQueryParameter = "&sourcecode=${dcoSourceCode}">
63</#if>
64
65<#assign clientProfileService = (serviceLocator.findService("com.elan.crc.user.service.CrcClientProfileLocalService"))! >
66<#assign clientProfileList = clientProfileService.findByLocationCode(lc)>
67<#assign clientProfile = clientProfileList?first>
68<#assign partnerName = clientProfile.getMarketingNameLong()>
69<#assign pbu = clientProfile.getPbu()>
70<#assign subbu = clientProfile.getSUBBRANDBUNBR()>
71<#assign cdnCardArtUrl = (propsUtil.get('rackspace.cdn.cardart.url'))!>
72
73<#assign fiCardsData=utilServ.makeCall('crcTier3GetPbuData','0&'+ pbu + '&'+subbu + '&' + lc)>
74<#assign temp = []>
75<#assign consumerCards = []>
76<#assign businessCards = []>
77<#assign offerTypeList = []>
78<#assign index = 0>
79<#assign consumerOfferTypes = ["101", "103", "108", "109", "115", "104", "141", "147", "138", "154"]>
80<#assign businessOfferTypes = ["128", "121", "143", "144"]>
81<#list fiCardsData as fib>
82 <#if (fib.offerType?has_content && !(offerTypeList?seq_contains(fib.offerType)))>
83 <#assign offerTypeList = offerTypeList + [fib.offerType]>
84 <#if (consumerOfferTypes?seq_contains(fib.offerType))>
85 <#assign consumerCards = consumerCards + fiCardsData[index..index]>
86 <#elseif (businessOfferTypes?seq_contains(fib.offerType))>
87 <#assign businessCards = businessCards + fiCardsData[index..index]>
88 </#if>
89 <#assign temp = temp + fiCardsData[index..index]>
90 </#if>
91 <#assign index = index + 1>
92</#list>
93
94<#assign fiCardsData = temp>
95 <script>
96 //console.log("fi card data count", ${fiCardsData?size})
97</script>
98
99<#assign clientdata = utilServ.makeCall('crcDDCTier1Customizations','0&'+pbu+'&'+subbu+'&11')>
100<#if (clientdata?size > 0)>
101 <#assign backgroundColor = clientdata[0].backgroundHexColor>
102</#if>
103
104<#if (fiCardsData?size > 0)>
105 <style>
106 .excludeModal__overlay {
107 position: fixed;
108 top: 0;
109 left: 0;
110 right: 0;
111 bottom: 0;
112 background: rgba(0,0,0,0.6);
113 display: flex;
114 justify-content: center;
115 align-items: center;
116 }
117
118 .excludeModal__container {
119 background-color: #fff;
120 padding: 30px;
121 min-width: 500px;
122 max-width: 500px;
123 max-height: 100vh;
124 border-radius: 4px;
125 overflow-y: auto;
126 box-sizing: border-box;
127 }
128
129 .excludeModal__header {
130 display: flex;
131 justify-content: space-between;
132 align-items: center;
133 }
134
135 .modal .excludeModal__container .excludeModal__title {
136 margin-top: 0;
137 margin-bottom: 0;
138 font-weight: 600;
139 font-size: 20px;
140 line-height: 1.25;
141 color: #00449e;
142 box-sizing: border-box;
143 }
144
145 .excludeModal__close {
146 background: transparent;
147 border: 1px solid white;
148 padding: 4px 8px;
149 float: right;
150 }
151
152 .excludeModal__close:hover {
153 border: 1px solid black;
154 }
155
156 .excludeModal__close:before { content: "\2715"; }
157
158 @keyframes mmfadeIn {
159 from { opacity: 0; }
160 to { opacity: 1; }
161 }
162
163 @keyframes mmfadeOut {
164 from { opacity: 1; }
165 to { opacity: 0; }
166 }
167
168 @keyframes mmslideIn {
169 from { transform: translateY(15%); }
170 to { transform: translateY(0); }
171 }
172
173 @keyframes mmslideOut {
174 from { transform: translateY(0); }
175 to { transform: translateY(-10%); }
176 }
177
178 .micromodal-slide {
179 display: none;
180 }
181
182 .micromodal-slide.is-open {
183 display: block;
184 }
185
186 .micromodal-slide[aria-hidden="false"] .excludeModal__overlay {
187 animation: mmfadeIn .3s cubic-bezier(0.0, 0.0, 0.2, 1);
188 }
189
190 .micromodal-slide[aria-hidden="false"] .excludeModal__container {
191 animation: mmslideIn .3s cubic-bezier(0, 0, .2, 1);
192 }
193
194 .micromodal-slide[aria-hidden="true"] .excludeModal__overlay {
195 animation: mmfadeOut .3s cubic-bezier(0.0, 0.0, 0.2, 1);
196 }
197
198 .micromodal-slide[aria-hidden="true"] .excludeModal__container {
199 animation: mmslideOut .3s cubic-bezier(0, 0, .2, 1);
200 }
201
202 .micromodal-slide .excludeModal__container,
203 .micromodal-slide .excludeModal__overlay {
204 will-change: transform;
205 }
206 </style>
207 <#if url?contains("index")>
208 <#assign isExcluded = 0>
209 <#assign offerId = "">
210 <#assign sourceCode = "">
211 <#assign cardArtImage = "">
212 <#assign productUrlHero = "">
213 <#assign product = "">
214 <#assign cardIndex = 0>
215 <#if (class.getData() == "landing-consumer" && consumerCards?size > 0)>
216 <#if (offerTypeList?seq_contains("108")) || (offerTypeList?seq_contains("109"))>
217 <#list consumerCards as card>
218 <#if (card.offerType=="108") || (card.offerType=="109")>
219 <#assign isExcluded = 0>
220 <#if card.dmaexclude??>
221 <#assign isExcluded = card.dmaexclude?number!0>
222 </#if>
223 <#assign offerId = card.offerId>
224 <#assign sourceCode = card.sourceCode>
225 <#assign cardArtImage = cdnCardArtUrl + "/"+card.filename+".png">
226 <#assign cardArtImageAlt = cdnCardArtUrl + "/"+card.filename+".jpg">
227
228 <#assign productUrlHero="consumer-platinum2103">
229 <#assign product="Platinum">
230 <#assign cardIndex = 1>
231 <#assign scrapedData = utilServ.makeCall('crcDDCGetSchumerBox', offerId + '&' + sourceCode)>
232 <#if (scrapedData?size > 0)>
233 <#list scrapedData as sItem>
234 <#if ((sItem.scrapedLabel?contains("Annual Percentage Rate (APR) for Purchases")) && (sItem.scrapedValue?has_content)) >
235 <#assign apr = sItem.scrapedValue?replace("(\n|\r\n|\r)+", " ","r")>
236 <#break>
237 </#if>
238 </#list>
239 <script>
240 $(document).ready(function () {
241 var aprText = "${apr}";
242 //console.log('aprText: ${aprText!''}');
243 if (aprText) {
244 $(".apr-full-text").html(aprText);
245 try {
246 var matches= aprText.match(/\d+(\.\d+)?%?/g);
247 var billing_cycle = matches[1];
248 var apr_min = apr_min = matches[2];
249 var apr_max = apr_max = matches[3];
250 //console.log('billing_cycle', billing_cycle);
251 //console.log('apr_min', apr_min);
252 //console.log('apr_max', apr_max);
253 if (billing_cycle) {
254 //console.log($(".scraped-billing-cycle"));
255 $(".scraped-billing-cycle").html(billing_cycle);
256 }
257 if (apr_min) {
258 $(".scraped-apr-min").html(apr_min);
259 }
260 if (apr_max) {
261 $('.scraped-apr-max').html(apr_max);
262 }
263
264 } catch (e) {
265 console.log(e);
266 }
267 }
268 });
269 </script>
270 </#if>
271 <script>
272 $(document).ready(function () {
273 $(".see-terms").replaceWith('<a href="${oadURL_TC}?step=display&offerId=${card.offerId}&locationCode=${lc}" target="_blank"><span class="screen-reader-only">${partnerName!''} ${product!''} Card </span>See terms & conditions</a>');
274 });
275 </script>
276 </#if>
277 </#list>
278 <#else>
279 <#assign isExcluded = 0>
280 <#if consumerCards[0].dmaexclude??>
281 <#assign isExcluded = consumerCards[0].dmaexclude?number!0>
282 </#if>
283 <#assign displayedCard = consumerCards[0]>
284 <#assign offerId = displayedCard.offerId>
285 <#assign sourceCode = displayedCard.sourceCode>
286 <#assign cardArtImage = cdnCardArtUrl + "/"+ displayedCard.filename + ".png">
287 <#assign cardArtImageAlt = cdnCardArtUrl + "/"+ displayedCard.filename + ".jpg">
288 <#if (displayedCard.offerType=="108" || displayedCard.offerType=="109")>
289 <#assign productUrlHero="consumer-platinum">
290 <#assign product="Platinum">
291 <#assign cardIndex = 1>
292 <#elseif (displayedCard.offerType=="104")>
293 <#assign productUrlHero = "max-cash">
294 <#assign product="Max Cash Preferred">
295 <#assign cardIndex = 0>
296 <#elseif (displayedCard.offerType=="115")>
297 <#assign productUrlHero = "secured">
298 <#assign product="Secured">
299 <#assign cardIndex = 2>
300 </#if>
301 </#if>
302 <#if product?has_content && product != "">
303 <#assign card_text = product + " Card">
304 </#if>
305 </#if>
306 <#if (class.getData() == "landing-business" && businessCards?size > 0)>
307 <#if (offerTypeList?seq_contains("128")) >
308 <#list businessCards as card>
309 <#if (card.offerType=="128")>
310 <#assign isExcluded = 0>
311 <#if card.dmaexclude??>
312 <#assign isExcluded = card.dmaexclude?number!0>
313 </#if>
314 <#assign offerId = card.offerId>
315 <#assign sourceCode = card.sourceCode>
316 <#assign cardArtImage = cdnCardArtUrl + "/"+card.filename+".png">
317 <#assign cardArtImageAlt = cdnCardArtUrl + "/"+card.filename+".jpg">
318
319 <#assign productUrlHero="business-cash-preferred">
320 <#assign product="Business Cash Preferred">
321 <#assign cardIndex = 1>
322 </#if>
323 </#list>
324 <#else>
325 <#assign isExcluded = 0>
326 <#if businessCards[0].dmaexclude??>
327 <#assign isExcluded = businessCards[0].dmaexclude?number!0>
328 </#if>
329 <#assign displayedCard = businessCards[0]>
330 <#assign offerId = displayedCard.offerId>
331 <#assign sourceCode = displayedCard.sourceCode>
332 <#assign cardArtImage = cdnCardArtUrl + "/"+ displayedCard.filename + ".png">
333 <#assign cardArtImageAlt = cdnCardArtUrl + "/"+ displayedCard.filename + ".jpg">
334 <#if (displayedCard.offerType=="143")>
335 <#assign productUrlHero="business-real-rewards">
336 <#assign product="Business Real Rewards">
337 <#assign cardIndex = 2>
338 <#elseif (displayedCard.offerType=="144")>
339 <#assign productUrlHero="smart-business-rewards">
340 <#assign product="Smart Business Rewards">
341 <#assign cardIndex = 0>
342 <#elseif (displayedCard.offerType=="121")>
343 <#assign productUrlHero = "business-platinum">
344 <#assign product="Business">
345 <#assign cardIndex = 3>
346 </#if>
347 </#if>
348 <#if product?has_content && product != "">
349 <#assign card_text = product + " Card">
350 </#if>
351 </#if>
352 <div class="hero-container product-${productUrlHero} tier3-hero-${class.getData()}">
353 <div class="hero-main">
354 <div class="hero-main-container">
355 <div class="hero-main-offer">
356 <div class="offer-detail">
357 <div class="offer-detail-cardArt cardArtImg">
358 <img src="${cardArtImage!''}" alt="${partnerName!''}" title="${partnerName!''}"
359 class="jn-img-responsive" onerror="this.onerror=null;this.src='${cardArtImageAlt!''}'">
360 <#-- <img src="${cardArtImage!''}" alt="${partnerName!''}" title="${partnerName!'' }"
361 class="jn-img-responsive">-->
362 <p>${card_text!''}</p>
363 </div>
364 <div class="offer-detail-text text-color-default hide-desktop">
365 ${productTitle.getSiblings()[cardIndex].primaryHeadlineFeature.getData()}
366 </div>
367 <#if isExcluded == 0>
368 <a
369 class="jn-button hide-desktop btn"
370 data-button-name="cta-button-top"
371 data-product-name="${productUrlHero!''}"
372 href="${oadURL}?locationCode=${lc}&offerId=${offerId}&preparerType=customer${dcoSourceCodeQueryParameter}"
373 >
374 ${productTitle.getSiblings()[cardIndex].ctaText.getData()}<span class="screen-reader-only"> for ${partnerName!''} ${product!''} Credit Card </span>
375 </a>
376 <#else>
377 <a
378 class="jn-button hide-desktop btn"
379 data-button-name="cta-button-top"
380 data-product-name="${productUrlHero!''}"
381 data-micromodal-trigger="modal-index-hero"
382 href="javascript:void(0);"
383 >
384 ${productTitle.getSiblings()[cardIndex].ctaText.getData()}<span class="screen-reader-only"> for ${partnerName!''} ${product!''} Credit Card </span>
385 </a>
386 </#if>
387 </div>
388 <div class="offer-header">
389 <div class="offer-text-top">
390 ${productTitle.getSiblings()[cardIndex].primaryHeadlineText.getData()}
391 </div>
392 <div class="offer-text-bottom hide-mobile">
393 <div class="offer-detail-text text-color-default ">
394 ${productTitle.getSiblings()[cardIndex].primaryHeadlineFeature.getData()}
395 </div>
396
397 <#if isExcluded == 0>
398 <a
399 class="jn-button"
400 data-button-name="cta-button-top"
401 data-product-name="${productUrlHero!''}"
402 href="${oadURL}?locationCode=${lc}&offerId=${offerId}&preparerType=customer${dcoSourceCodeQueryParameter}"
403 >
404 ${productTitle.getSiblings()[cardIndex].ctaText.getData()}<span class="screen-reader-only"> for ${partnerName!''} ${product!''} Credit Card </span>
405 </a>
406 <#else>
407 <a
408 class="jn-button"
409 data-button-name="cta-button-top"
410 data-product-name="${productUrlHero!''}"
411 data-micromodal-trigger="modal-index-hero"
412 href="javascript:void(0);"
413 >
414 ${productTitle.getSiblings()[cardIndex].ctaText.getData()}<span class="screen-reader-only"> for ${partnerName!''} ${product!''} Credit Card </span>
415 </a>
416 </#if>
417 </div>
418 </div>
419 </div>
420 </div>
421 </div>
422 </div>
423
424 <div aria-hidden="true" class="modal micromodal-slide" id="modal-index-hero" >
425 <div class="excludeModal__overlay" data-micromodal-close tabindex="-1">
426 <div
427 aria-modal="true"
428 aria-labelledby="modal-index-hero-title"
429 class="excludeModal__container"
430 role="dialog"
431 >
432 <button aria-label="Close modal" class="excludeModal__close" data-micromodal-close></button>
433 <header class="excludeModal__header">
434 <h2 class="excludeModal__title" id="modal-index-hero-title">
435 <#if productTitle.getSiblings()[cardIndex].excludedMessage?? >
436 ${productTitle.getSiblings()[cardIndex].excludedMessage.getData()!""}
437 </#if>
438 </h2>
439 </header>
440 </div>
441 </div>
442 </div>
443 <#else>
444 <#assign hasBalanceTransferCalculator = false>
445 <#list fiCardsData as fib>
446 <#switch fib.offerType>
447 <#case "101">
448 <#assign cardIndex = 3 >
449 <#assign productUrlHero = "consumer-edr">
450 <#assign product="Everyday Rewards+">
451 <#assign hasBalanceTransferCalculator = false>
452 <#break>
453 <#case "103">
454 <#assign cardIndex = 3 >
455 <#assign productUrlHero = "consumer-edr">
456 <#assign product="Everyday Rewards+">
457 <#assign hasBalanceTransferCalculator = false>
458 <#break>
459 <#case "104">
460 <#assign cardIndex = 0 >
461 <#assign productUrlHero="max-cash">
462 <#assign product="Max Cash Preferred">
463 <#assign hasBalanceTransferCalculator = false>
464 <#break>
465 <#case "108">
466 <#assign cardIndex = 1 >
467 <#assign productUrlHero = "consumer-platinum">
468 <#assign product="Platinum">
469 <#assign hasBalanceTransferCalculator = true>
470 <#break>
471 <#case "109">
472 <#assign cardIndex = 1 >
473 <#assign productUrlHero = "consumer-platinum">
474 <#assign product="Platinum">
475 <#assign hasBalanceTransferCalculator = true>
476 <#break>
477 <#case "141">
478 <#assign cardIndex = 4 >
479 <#assign productUrlHero = "college-real-rewards">
480 <#assign product = "College Real Rewards" >
481 <#assign hasBalanceTransferCalculator = false>
482 <#break>
483 <#case "147">
484 <#assign cardIndex = 5 >
485 <#assign productUrlHero = "max-cash-secured">
486 <#assign product = "Max Cash Secured" >
487 <#assign hasBalanceTransferCalculator = false>
488 <#break>
489 <#case "115">
490 <#assign cardIndex = 2 >
491 <#assign productUrlHero = "secured">
492 <#assign product="Secured">
493 <#assign hasBalanceTransferCalculator = false>
494 <#break>
495 <#case "138">
496 <#assign cardIndex = 6 >
497 <#assign productUrlHero = "travel-rewards-plus">
498 <#assign product="Travel Rewards+">
499 <#assign hasBalanceTransferCalculator = false>
500 <#break>
501 <#case "154">
502 <#assign cardIndex = 7 >
503 <#assign productUrlHero = "reserve-rewards-plus">
504 <#assign product="Reserve Rewards+">
505 <#assign hasBalanceTransferCalculator = false>
506 <#break>
507 <#case "128">
508 <#assign cardIndex = 1 >
509 <#assign productUrlHero = "business-cash-preferred">
510 <#assign product="Business Cash Preferred">
511 <#assign hasBalanceTransferCalculator = false>
512 <#break>
513 <#case "143">
514 <#assign cardIndex = 2 >
515 <#assign productUrlHero = "business-real-rewards">
516 <#assign product="Business Real Rewards">
517 <#assign hasBalanceTransferCalculator = false>
518 <#break>
519 <#case "144">
520 <#assign cardIndex = 0 >
521 <#assign productUrlHero = "smart-business-rewards">
522 <#assign product="Smart Business Rewards">
523 <#assign hasBalanceTransferCalculator = false>
524 <#break>
525 <#case "121">
526 <#assign cardIndex = 3 >
527 <#assign productUrlHero = "business-platinum">
528 <#assign product="Business">
529 <#assign hasBalanceTransferCalculator = false>
530 <#break>
531 <#default>
532 </#switch>
533 <#assign cardArtImage = cdnCardArtUrl + "/" + fib.filename + ".png">
534 <#assign cardArtImageAlt = cdnCardArtUrl + "/" + fib.filename + ".jpg">
535
536 <script>
537 console.log("offerType ${fib.offerType} productUrlHero ${productUrlHero} show calculator ${hasBalanceTransferCalculator?c}")
538 </script>
539
540 <#if url?matches(".*/${productUrlHero}\\?.*")>
541 <#assign isExcluded = 0>
542 <#if fib.dmaexclude??>
543 <#assign isExcluded = fib.dmaexclude?number!0>
544 </#if>
545 <#if (fib.offerType=="108" || fib.offerType=="109" || fib.offerType == "121")>
546
547 <#assign scrapedData = utilServ.makeCall('crcDDCGetSchumerBox', '${fib.offerId}' + '&'+ '${fib.sourceCode}')>
548 <#if (scrapedData?size > 0)>
549 <#list scrapedData as sItem>
550 <#if ((sItem.scrapedLabel?contains("Annual Percentage Rate (APR) for Purchases")) && (sItem.scrapedValue?has_content)) >
551 <#assign apr = sItem.scrapedValue?replace("(\n|\r\n|\r)+", " ","r")>
552 <#break>
553 </#if>
554
555 </#list>
556 <script>
557 $(document).ready(function () {
558 var aprText = "${apr}";
559 //console.log('aprText',aprText);
560 if (aprText) {
561 $(".apr-full-text").html(aprText);
562 try {
563 var matches= aprText.match(/\d+(\.\d+)?%?/g);
564 var billing_cycle = matches[1];
565 var apr_min = apr_min = matches[2];
566 var apr_max = apr_max = matches[3];
567 //console.log('billing_cycle', billing_cycle);
568 //console.log('apr_min', apr_min);
569 //console.log('apr_max', apr_max);
570 if (billing_cycle) {
571 //console.log($(".scraped-billing-cycle"));
572 $(".scraped-billing-cycle").html(billing_cycle);
573 }
574 if (apr_min) {
575 $(".scraped-apr-min").html(apr_min);
576 }
577 if (apr_max) {
578 $('.scraped-apr-max').html(apr_max);
579 }
580
581 } catch (e) {
582 console.log(e);
583 }
584 }
585 });
586 </script>
587 </#if>
588 </#if>
589 <#if product?has_content && product != "">
590 <#assign card_text = product + " Card">
591 </#if>
592 <#assign tc_offerTypes = ['108', '109', '121', '144']>
593 <#assign calculator_offerTypes = ['101', '104', '138', '154', '128', '143', '144']>
594 <div class="hero-container ${class.getData()}">
595 <div class="hero-main">
596 <div class="hero-main-container">
597 <div class="hero-main-offer">
598 <div class="offer-detail">
599 <div class="offer-detail-cardArt cardArtImg">
600 <img src="${cardArtImage!''}" alt="${partnerName!''}" title="${partnerName!''}"
601 onerror="this.onerror=null;this.src='${cardArtImageAlt!''}'" class="jn-img-responsive">
602 <p>${card_text!''}</p>
603 <#if (hasBalanceTransferCalculator)>
604 <a href="javascript:void(0);" data-micromodal-trigger="modal-2"aria-hidden="true" >See how much you could save with a balance transfer</a>
605 </#if>
606 </div>
607 <div class="offer-detail-text text-color-default hide-desktop">
608 ${productTitle.getSiblings()[cardIndex].primaryHeadlineFeature.getData()}
609
610 <#if (tc_offerTypes?seq_contains(fib.offerType))>
611 <a href="${oadURL_TC}?step=display&offerId=${fib.offerId}&locationCode=${lc}" target="_blank">
612 <span class="screen-reader-only">${partnerName!''} ${product!''} Card </span>See terms & conditions
613 </a>
614 </#if>
615 <#if (calculator_offerTypes?seq_contains(fib.offerType))>
616 <a class="whiteLink" onclick='ga("send", "event", "click", "Rewards Calculator", "Outbound Link");' target="_blank" href="http://www.myaccountbenefits.com/rewards-calculator?ecdma-lc=${lc}">Calculate Rewards</a>
617 </#if>
618 </div>
619
620 <#if isExcluded == 0>
621 <a
622 class="jn-button hide-desktop btn"
623 data-button-name="cta-button-top"
624 data-product-name="${productUrlHero!''}"
625 href="${oadURL}?locationCode=${lc}&offerId=${fib.offerId}&preparerType=customer${dcoSourceCodeQueryParameter}"
626 >
627 ${productTitle.getSiblings()[cardIndex].ctaText.getData()}<span class="screen-reader-only"> for ${partnerName!''} ${product!''} Credit Card </span>
628 </a>
629 <#else>
630 <a
631 class="jn-button hide-desktop btn"
632 data-button-name="cta-button-top"
633 data-product-name="${productUrlHero!''}"
634 data-micromodal-trigger="modal-product-hero"
635 href="javascript:void(0);"
636 >
637 ${productTitle.getSiblings()[cardIndex].ctaText.getData()}<span class="screen-reader-only"> for ${partnerName!''} ${product!''} Credit Card </span>
638 </a>
639 </#if>
640 </div>
641 <div class="offer-header">
642 <div class="offer-text-top">
643 ${productTitle.getSiblings()[cardIndex].primaryHeadlineText.getData()}
644 </div>
645 <div class="offer-text-bottom hide-mobile">
646 <div class="offer-detail-text text-color-default ">
647 ${productTitle.getSiblings()[cardIndex].primaryHeadlineFeature.getData()}
648 <#if (tc_offerTypes?seq_contains(fib.offerType))>
649 <a class="whiteLink" href="${oadURL_TC}?step=display&offerId=${fib.offerId}&locationCode=${lc}" target="_blank">
650 <span class="screen-reader-only">${partnerName!''} ${product!''} Card </span>See terms & conditions
651 </a>
652 </#if>
653 </div>
654
655 <#if isExcluded == 0>
656 <a
657 class="jn-button"
658 data-button-name="cta-button-top"
659 data-product-name="${productUrlHero!''}"
660 href="${oadURL}?locationCode=${lc}&offerId=${fib.offerId}&preparerType=customer${dcoSourceCodeQueryParameter}"
661 >
662 ${productTitle.getSiblings()[cardIndex].ctaText.getData()}<span class="screen-reader-only"> for ${partnerName!''} ${product!''} Credit Card </span>
663 </a>
664 <#else>
665 <a
666 class="jn-button"
667 data-button-name="cta-button-top"
668 data-product-name="${productUrlHero!''}"
669 data-micromodal-trigger="modal-product-hero"
670 href="javascript:void(0);"
671 >
672 ${productTitle.getSiblings()[cardIndex].ctaText.getData()}<span class="screen-reader-only"> for ${partnerName!''} ${product!''} Credit Card </span>
673 </a>
674 </#if>
675 <#if (calculator_offerTypes?seq_contains(fib.offerType))>
676 <a class="whiteLink" onclick='ga("send", "event", "click", "Rewards Calculator", "Outbound Link");' target="_blank" href="http://www.myaccountbenefits.com/rewards-calculator?ecdma-lc=${lc}">Calculate Rewards</a>
677 </#if>
678 </div>
679 </div>
680
681 </div>
682 </div>
683 </div>
684 </div>
685
686 <div aria-hidden="true" class="modal micromodal-slide" id="modal-product-hero" >
687 <div class="excludeModal__overlay" data-micromodal-close tabindex="-1">
688 <div
689 aria-modal="true"
690 aria-labelledby="modal-prodcut-hero-title"
691 class="excludeModal__container"
692 role="dialog"
693 >
694 <button aria-label="Close modal" class="excludeModal__close" data-micromodal-close></button>
695 <header class="excludeModal__header">
696 <h2 class="excludeModal__title" id="modal-prodcut-hero-title">
697 <#if productTitle.getSiblings()[cardIndex].excludedMessage?? >
698 ${productTitle.getSiblings()[cardIndex].excludedMessage.getData()!""}
699 </#if>
700 </h2>
701 </header>
702 </div>
703 </div>
704 </div>
705 <#break />
706 </#if>
707 </#list>
708
709 </#if>
710</#if>
711<!-- https://micromodal.vercel.app/ -->
712<script src="https://unpkg.com/micromodal/dist/micromodal.min.js"></script>
713
714<script>
715 AUI().ready(function(){
716 //The below script is there to add vertical card art in UAT only so that QA has an easier time auditing. Note that the script only applies to FI SouthState (location code 20419) which is currently the only bank with vertical card art at the moment
717 var locationCodeParam = '${lc}';
718 var currentEnvironmentParam = '${currentEnvironment}';
719 if(locationCodeParam == '20419' && currentEnvironmentParam == 'uat'){
720 Array.prototype.slice.call(document.querySelectorAll('.cardArtImg')).map(function(e){e.firstElementChild.src = "https://39f6f821fa03de239594-9f1c16ccc3b26ce57656bb4af99947b6.ssl.cf2.rackcdn.com/f20cf80a-6aea-46ec-84fc-c2a6583773d9.png"})
721 }
722
723 MicroModal.init();
724 });
725</script>
726<script>
727 if(typeof setHeaderBackground === 'undefined') { let setHeaderBackground = () => {};}
728 setHeaderBackground = () => {
729 // Makes the Header subtitle work if there is two lines of text
730 //product page header
731 var consumerHeader = document.getElementsByClassName("landing-consumer")[0];
732 if(!consumerHeader) {
733 //index page header
734 consumerHeader = document.getElementsByClassName("tier3-hero-landing-consumer")[0];
735 }
736
737 if(consumerHeader) {
738 var consumerHeroContainer = consumerHeader.getElementsByClassName("hero-main-container")[0];
739 var consumerOfferHeader = consumerHeader.getElementsByClassName("offer-subtitle")[0];
740 const offerTextTop = consumerHeader.querySelector(".offer-text-top");
741
742 if (consumerOfferHeader.innerText.length >= 76){
743 const gradientHeight = Math.max(offerTextTop.offsetHeight + 40, 200) + "px";
744 //two lines
745 //offerTextTop.style.marginTop = '0px';
746 //document.querySelector('.offer-text-bottom').style.marginTop = '25px';
747 //prevent button and text going into blue section
748 //consumerHeader.querySelector('.offer-text-top h1').style.minHeight = "120px";
749 consumerHeroContainer.style.background = "linear-gradient(180deg, ${backgroundColor!'#173989'} " + gradientHeight + ", #f8f8f8 " + gradientHeight + ")";
750 }
751 }
752 //product page header
753 var buisnessHeader = document.getElementsByClassName("landing-business")[0];
754 if(!buisnessHeader) {
755 //index page header
756 buisnessHeader = document.getElementsByClassName("tier3-hero-landing-business")[0];
757 }
758
759 if(buisnessHeader) {
760 var buisnessHeroContainer = buisnessHeader.getElementsByClassName("hero-main-container")[0];
761 var buisnessOfferHeader = buisnessHeader.getElementsByClassName("offer-subtitle")[0];
762
763 if (buisnessOfferHeader.innerText.length >= 48){
764 //two lines
765 buisnessHeroContainer.style.background = "linear-gradient(180deg, rgba(255,255,255,1) 45%, ${backgroundColor!'#173989'} 45%)";
766 }
767 }
768 };
769 /*
770 sometimes this runs before the text height it is refercning is loaded. Resulting in incorect background styles. If only in aui.ready then it flashes incorect styles then goes to correct styles everytime.
771 With the aui.ready and imediate call it normal loads correctly but if it loads before header text it will still flash incorect styles and then be fixed.
772 */
773 setHeaderBackground();
774 AUI().ready(function(){setHeaderBackground();});
775
776</script>
An error occurred while processing the template.
The following has evaluated to null or missing:
==> qstringmap["ecdma-lc"] [in template "10154#10192#153417688" at line 9, column 14]
----
Tip: It's the final [] step that caused this error, not those before it.
----
Tip: If the failing expression is known to legally refer to something that's sometimes null or missing, either specify a default value like myOptionalVar!myDefault, or use <#if myOptionalVar??>when-present<#else>when-missing</#if>. (These only cover the last step of the expression; to cover the whole expression, use parenthesis: (myOptionalVar.foo)!myDefault, (myOptionalVar.foo)??
----
----
FTL stack trace ("~" means nesting-related):
- Failed at: #assign lc = qstringmap["ecdma-lc"]?f... [in template "10154#10192#153417688" at line 9, column 1]
----
1<#assign url = themeDisplay.getPortalURL() + themeDisplay.getURLCurrent()/>
2<#assign oadURL = propsUtil.get('elan.oad.url') >
3<#assign qstringmap = httpUtil.getParameterMap(httpUtil.getQueryString(url))>
4<#assign utilServ = (serviceLocator.findService("com.elan.crc.utilites.service.CRCRemoteServiceService"))! />
5<#assign url404 = '/error/404.html'>
6<#assign oadURL_TC = 'https://online1.elancard.com/oad/terms.controller' >
7<#assign currentEnvironment = 'prod' >
8
9<#assign lc= qstringmap["ecdma-lc"]?first>
10<#assign lc = htmlUtil.escape(lc)>
11<#assign lc = htmlUtil.escapeJS(lc)>
12
13<#assign prefix = "00000" >
14<#assign lcWithPrefix = prefix + lc >
15<#assign withPrefixLength = lcWithPrefix?length >
16<#assign startHere = withPrefixLength - 5>
17<#assign lc = lcWithPrefix?substring(startHere)>
18
19
20<#if qstringmap["ecid"]?has_content>
21 <#assign ecidExt = qstringmap["ecid"]?first>
22 <#assign ecidExt = htmlUtil.escape(ecidExt)>
23 <#assign ecidExt = htmlUtil.escapeJS(ecidExt)>
24 <#assign ecidExt = "&ecid=" + ecidExt>
25<#else>
26 <#assign ecidExt="">
27</#if>
28<#if oadURL?contains("uat-")>
29 <#assign oadURL_TC = 'https://uat-online1.elancard.com/oad/terms.controller' >
30 <#assign currentEnvironment = 'uat' >
31<#else>
32 <#assign oadURL_TC = 'https://online1.elancard.com/oad/terms.controller' >
33</#if>
34 <script>
35 //console.log('%ccurrentEnvironment: ', 'font-weight: bold; color: green;', '${currentEnvironment}');
36 </script>
37<#assign campaignId = "" >
38<#assign ecidExt="">
39<#if qstringmap["ecid"]?has_content>
40 <#assign campaignId = qstringmap["ecid"]?first >
41 <#assign campaignId = htmlUtil.escape(campaignId)>
42 <#assign campaignId = htmlUtil.escapeJS(campaignId)>
43
44 <#assign ecidExt = qstringmap["ecid"]?first>
45 <#assign ecidExt = htmlUtil.escape(ecidExt)>
46 <#assign ecidExt = htmlUtil.escapeJS(ecidExt)>
47 <#assign ecidExt = "&ecid=" + ecidExt>
48</#if>
49
50<#assign dcoSourceCode = "">
51<#assign dcoSourceCodeQueryParameter = "">
52
53<#if qstringmap["sourcecode"]?has_content>
54 <#assign dcoSourceCode = qstringmap["sourcecode"]?first>
55 <#assign dcoSourceCode = htmlUtil.escape(dcoSourceCode)>
56 <#assign dcoSourceCode = htmlUtil.escapeJS(dcoSourceCode)>
57 <#assign dcoSourceCodeQueryParameter = "&sourcecode=${dcoSourceCode}">
58<#elseif qstringmap["sourceCode"]?has_content>
59 <#assign dcoSourceCode = qstringmap["sourceCode"]?first>
60 <#assign dcoSourceCode = htmlUtil.escape(dcoSourceCode)>
61 <#assign dcoSourceCode = htmlUtil.escapeJS(dcoSourceCode)>
62 <#assign dcoSourceCodeQueryParameter = "&sourcecode=${dcoSourceCode}">
63</#if>
64
65<#assign clientProfileService = (serviceLocator.findService("com.elan.crc.user.service.CrcClientProfileLocalService"))! >
66<#assign clientProfileList = clientProfileService.findByLocationCode(lc)>
67<#assign clientProfile = clientProfileList?first>
68<#assign partnerName = clientProfile.getMarketingNameLong()>
69<#assign pbu = clientProfile.getPbu()>
70<#assign subbu = clientProfile.getSUBBRANDBUNBR()>
71<#assign cdnCardArtUrl = (propsUtil.get('rackspace.cdn.cardart.url'))!>
72
73<#assign fiCardsData=utilServ.makeCall('crcTier3GetPbuData','0&'+ pbu + '&'+subbu + '&' + lc)>
74<#assign temp = []>
75<#assign consumerCards = []>
76<#assign businessCards = []>
77<#assign offerTypeList = []>
78<#assign index = 0>
79<#assign consumerOfferTypes = ["101", "103", "108", "109", "115", "104", "141", "147", "138", "154"]>
80<#assign businessOfferTypes = ["128", "121", "143", "144"]>
81<#list fiCardsData as fib>
82 <#if (fib.offerType?has_content && !(offerTypeList?seq_contains(fib.offerType)))>
83 <#assign offerTypeList = offerTypeList + [fib.offerType]>
84 <#if (consumerOfferTypes?seq_contains(fib.offerType))>
85 <#assign consumerCards = consumerCards + fiCardsData[index..index]>
86 <#elseif (businessOfferTypes?seq_contains(fib.offerType))>
87 <#assign businessCards = businessCards + fiCardsData[index..index]>
88 </#if>
89 <#assign temp = temp + fiCardsData[index..index]>
90 </#if>
91 <#assign index = index + 1>
92</#list>
93
94<#assign fiCardsData = temp>
95 <script>
96 //console.log("fi card data count", ${fiCardsData?size})
97</script>
98
99<#assign clientdata = utilServ.makeCall('crcDDCTier1Customizations','0&'+pbu+'&'+subbu+'&11')>
100<#if (clientdata?size > 0)>
101 <#assign backgroundColor = clientdata[0].backgroundHexColor>
102</#if>
103
104<#if (fiCardsData?size > 0)>
105 <style>
106 .excludeModal__overlay {
107 position: fixed;
108 top: 0;
109 left: 0;
110 right: 0;
111 bottom: 0;
112 background: rgba(0,0,0,0.6);
113 display: flex;
114 justify-content: center;
115 align-items: center;
116 }
117
118 .excludeModal__container {
119 background-color: #fff;
120 padding: 30px;
121 min-width: 500px;
122 max-width: 500px;
123 max-height: 100vh;
124 border-radius: 4px;
125 overflow-y: auto;
126 box-sizing: border-box;
127 }
128
129 .excludeModal__header {
130 display: flex;
131 justify-content: space-between;
132 align-items: center;
133 }
134
135 .modal .excludeModal__container .excludeModal__title {
136 margin-top: 0;
137 margin-bottom: 0;
138 font-weight: 600;
139 font-size: 20px;
140 line-height: 1.25;
141 color: #00449e;
142 box-sizing: border-box;
143 }
144
145 .excludeModal__close {
146 background: transparent;
147 border: 1px solid white;
148 padding: 4px 8px;
149 float: right;
150 }
151
152 .excludeModal__close:hover {
153 border: 1px solid black;
154 }
155
156 .excludeModal__close:before { content: "\2715"; }
157
158 @keyframes mmfadeIn {
159 from { opacity: 0; }
160 to { opacity: 1; }
161 }
162
163 @keyframes mmfadeOut {
164 from { opacity: 1; }
165 to { opacity: 0; }
166 }
167
168 @keyframes mmslideIn {
169 from { transform: translateY(15%); }
170 to { transform: translateY(0); }
171 }
172
173 @keyframes mmslideOut {
174 from { transform: translateY(0); }
175 to { transform: translateY(-10%); }
176 }
177
178 .micromodal-slide {
179 display: none;
180 }
181
182 .micromodal-slide.is-open {
183 display: block;
184 }
185
186 .micromodal-slide[aria-hidden="false"] .excludeModal__overlay {
187 animation: mmfadeIn .3s cubic-bezier(0.0, 0.0, 0.2, 1);
188 }
189
190 .micromodal-slide[aria-hidden="false"] .excludeModal__container {
191 animation: mmslideIn .3s cubic-bezier(0, 0, .2, 1);
192 }
193
194 .micromodal-slide[aria-hidden="true"] .excludeModal__overlay {
195 animation: mmfadeOut .3s cubic-bezier(0.0, 0.0, 0.2, 1);
196 }
197
198 .micromodal-slide[aria-hidden="true"] .excludeModal__container {
199 animation: mmslideOut .3s cubic-bezier(0, 0, .2, 1);
200 }
201
202 .micromodal-slide .excludeModal__container,
203 .micromodal-slide .excludeModal__overlay {
204 will-change: transform;
205 }
206 </style>
207 <#if url?contains("index")>
208 <#assign isExcluded = 0>
209 <#assign offerId = "">
210 <#assign sourceCode = "">
211 <#assign cardArtImage = "">
212 <#assign productUrlHero = "">
213 <#assign product = "">
214 <#assign cardIndex = 0>
215 <#if (class.getData() == "landing-consumer" && consumerCards?size > 0)>
216 <#if (offerTypeList?seq_contains("108")) || (offerTypeList?seq_contains("109"))>
217 <#list consumerCards as card>
218 <#if (card.offerType=="108") || (card.offerType=="109")>
219 <#assign isExcluded = 0>
220 <#if card.dmaexclude??>
221 <#assign isExcluded = card.dmaexclude?number!0>
222 </#if>
223 <#assign offerId = card.offerId>
224 <#assign sourceCode = card.sourceCode>
225 <#assign cardArtImage = cdnCardArtUrl + "/"+card.filename+".png">
226 <#assign cardArtImageAlt = cdnCardArtUrl + "/"+card.filename+".jpg">
227
228 <#assign productUrlHero="consumer-platinum2103">
229 <#assign product="Platinum">
230 <#assign cardIndex = 1>
231 <#assign scrapedData = utilServ.makeCall('crcDDCGetSchumerBox', offerId + '&' + sourceCode)>
232 <#if (scrapedData?size > 0)>
233 <#list scrapedData as sItem>
234 <#if ((sItem.scrapedLabel?contains("Annual Percentage Rate (APR) for Purchases")) && (sItem.scrapedValue?has_content)) >
235 <#assign apr = sItem.scrapedValue?replace("(\n|\r\n|\r)+", " ","r")>
236 <#break>
237 </#if>
238 </#list>
239 <script>
240 $(document).ready(function () {
241 var aprText = "${apr}";
242 //console.log('aprText: ${aprText!''}');
243 if (aprText) {
244 $(".apr-full-text").html(aprText);
245 try {
246 var matches= aprText.match(/\d+(\.\d+)?%?/g);
247 var billing_cycle = matches[1];
248 var apr_min = apr_min = matches[2];
249 var apr_max = apr_max = matches[3];
250 //console.log('billing_cycle', billing_cycle);
251 //console.log('apr_min', apr_min);
252 //console.log('apr_max', apr_max);
253 if (billing_cycle) {
254 //console.log($(".scraped-billing-cycle"));
255 $(".scraped-billing-cycle").html(billing_cycle);
256 }
257 if (apr_min) {
258 $(".scraped-apr-min").html(apr_min);
259 }
260 if (apr_max) {
261 $('.scraped-apr-max').html(apr_max);
262 }
263
264 } catch (e) {
265 console.log(e);
266 }
267 }
268 });
269 </script>
270 </#if>
271 <script>
272 $(document).ready(function () {
273 $(".see-terms").replaceWith('<a href="${oadURL_TC}?step=display&offerId=${card.offerId}&locationCode=${lc}" target="_blank"><span class="screen-reader-only">${partnerName!''} ${product!''} Card </span>See terms & conditions</a>');
274 });
275 </script>
276 </#if>
277 </#list>
278 <#else>
279 <#assign isExcluded = 0>
280 <#if consumerCards[0].dmaexclude??>
281 <#assign isExcluded = consumerCards[0].dmaexclude?number!0>
282 </#if>
283 <#assign displayedCard = consumerCards[0]>
284 <#assign offerId = displayedCard.offerId>
285 <#assign sourceCode = displayedCard.sourceCode>
286 <#assign cardArtImage = cdnCardArtUrl + "/"+ displayedCard.filename + ".png">
287 <#assign cardArtImageAlt = cdnCardArtUrl + "/"+ displayedCard.filename + ".jpg">
288 <#if (displayedCard.offerType=="108" || displayedCard.offerType=="109")>
289 <#assign productUrlHero="consumer-platinum">
290 <#assign product="Platinum">
291 <#assign cardIndex = 1>
292 <#elseif (displayedCard.offerType=="104")>
293 <#assign productUrlHero = "max-cash">
294 <#assign product="Max Cash Preferred">
295 <#assign cardIndex = 0>
296 <#elseif (displayedCard.offerType=="115")>
297 <#assign productUrlHero = "secured">
298 <#assign product="Secured">
299 <#assign cardIndex = 2>
300 </#if>
301 </#if>
302 <#if product?has_content && product != "">
303 <#assign card_text = product + " Card">
304 </#if>
305 </#if>
306 <#if (class.getData() == "landing-business" && businessCards?size > 0)>
307 <#if (offerTypeList?seq_contains("128")) >
308 <#list businessCards as card>
309 <#if (card.offerType=="128")>
310 <#assign isExcluded = 0>
311 <#if card.dmaexclude??>
312 <#assign isExcluded = card.dmaexclude?number!0>
313 </#if>
314 <#assign offerId = card.offerId>
315 <#assign sourceCode = card.sourceCode>
316 <#assign cardArtImage = cdnCardArtUrl + "/"+card.filename+".png">
317 <#assign cardArtImageAlt = cdnCardArtUrl + "/"+card.filename+".jpg">
318
319 <#assign productUrlHero="business-cash-preferred">
320 <#assign product="Business Cash Preferred">
321 <#assign cardIndex = 1>
322 </#if>
323 </#list>
324 <#else>
325 <#assign isExcluded = 0>
326 <#if businessCards[0].dmaexclude??>
327 <#assign isExcluded = businessCards[0].dmaexclude?number!0>
328 </#if>
329 <#assign displayedCard = businessCards[0]>
330 <#assign offerId = displayedCard.offerId>
331 <#assign sourceCode = displayedCard.sourceCode>
332 <#assign cardArtImage = cdnCardArtUrl + "/"+ displayedCard.filename + ".png">
333 <#assign cardArtImageAlt = cdnCardArtUrl + "/"+ displayedCard.filename + ".jpg">
334 <#if (displayedCard.offerType=="143")>
335 <#assign productUrlHero="business-real-rewards">
336 <#assign product="Business Real Rewards">
337 <#assign cardIndex = 2>
338 <#elseif (displayedCard.offerType=="144")>
339 <#assign productUrlHero="smart-business-rewards">
340 <#assign product="Smart Business Rewards">
341 <#assign cardIndex = 0>
342 <#elseif (displayedCard.offerType=="121")>
343 <#assign productUrlHero = "business-platinum">
344 <#assign product="Business">
345 <#assign cardIndex = 3>
346 </#if>
347 </#if>
348 <#if product?has_content && product != "">
349 <#assign card_text = product + " Card">
350 </#if>
351 </#if>
352 <div class="hero-container product-${productUrlHero} tier3-hero-${class.getData()}">
353 <div class="hero-main">
354 <div class="hero-main-container">
355 <div class="hero-main-offer">
356 <div class="offer-detail">
357 <div class="offer-detail-cardArt cardArtImg">
358 <img src="${cardArtImage!''}" alt="${partnerName!''}" title="${partnerName!''}"
359 class="jn-img-responsive" onerror="this.onerror=null;this.src='${cardArtImageAlt!''}'">
360 <#-- <img src="${cardArtImage!''}" alt="${partnerName!''}" title="${partnerName!'' }"
361 class="jn-img-responsive">-->
362 <p>${card_text!''}</p>
363 </div>
364 <div class="offer-detail-text text-color-default hide-desktop">
365 ${productTitle.getSiblings()[cardIndex].primaryHeadlineFeature.getData()}
366 </div>
367 <#if isExcluded == 0>
368 <a
369 class="jn-button hide-desktop btn"
370 data-button-name="cta-button-top"
371 data-product-name="${productUrlHero!''}"
372 href="${oadURL}?locationCode=${lc}&offerId=${offerId}&preparerType=customer${dcoSourceCodeQueryParameter}"
373 >
374 ${productTitle.getSiblings()[cardIndex].ctaText.getData()}<span class="screen-reader-only"> for ${partnerName!''} ${product!''} Credit Card </span>
375 </a>
376 <#else>
377 <a
378 class="jn-button hide-desktop btn"
379 data-button-name="cta-button-top"
380 data-product-name="${productUrlHero!''}"
381 data-micromodal-trigger="modal-index-hero"
382 href="javascript:void(0);"
383 >
384 ${productTitle.getSiblings()[cardIndex].ctaText.getData()}<span class="screen-reader-only"> for ${partnerName!''} ${product!''} Credit Card </span>
385 </a>
386 </#if>
387 </div>
388 <div class="offer-header">
389 <div class="offer-text-top">
390 ${productTitle.getSiblings()[cardIndex].primaryHeadlineText.getData()}
391 </div>
392 <div class="offer-text-bottom hide-mobile">
393 <div class="offer-detail-text text-color-default ">
394 ${productTitle.getSiblings()[cardIndex].primaryHeadlineFeature.getData()}
395 </div>
396
397 <#if isExcluded == 0>
398 <a
399 class="jn-button"
400 data-button-name="cta-button-top"
401 data-product-name="${productUrlHero!''}"
402 href="${oadURL}?locationCode=${lc}&offerId=${offerId}&preparerType=customer${dcoSourceCodeQueryParameter}"
403 >
404 ${productTitle.getSiblings()[cardIndex].ctaText.getData()}<span class="screen-reader-only"> for ${partnerName!''} ${product!''} Credit Card </span>
405 </a>
406 <#else>
407 <a
408 class="jn-button"
409 data-button-name="cta-button-top"
410 data-product-name="${productUrlHero!''}"
411 data-micromodal-trigger="modal-index-hero"
412 href="javascript:void(0);"
413 >
414 ${productTitle.getSiblings()[cardIndex].ctaText.getData()}<span class="screen-reader-only"> for ${partnerName!''} ${product!''} Credit Card </span>
415 </a>
416 </#if>
417 </div>
418 </div>
419 </div>
420 </div>
421 </div>
422 </div>
423
424 <div aria-hidden="true" class="modal micromodal-slide" id="modal-index-hero" >
425 <div class="excludeModal__overlay" data-micromodal-close tabindex="-1">
426 <div
427 aria-modal="true"
428 aria-labelledby="modal-index-hero-title"
429 class="excludeModal__container"
430 role="dialog"
431 >
432 <button aria-label="Close modal" class="excludeModal__close" data-micromodal-close></button>
433 <header class="excludeModal__header">
434 <h2 class="excludeModal__title" id="modal-index-hero-title">
435 <#if productTitle.getSiblings()[cardIndex].excludedMessage?? >
436 ${productTitle.getSiblings()[cardIndex].excludedMessage.getData()!""}
437 </#if>
438 </h2>
439 </header>
440 </div>
441 </div>
442 </div>
443 <#else>
444 <#assign hasBalanceTransferCalculator = false>
445 <#list fiCardsData as fib>
446 <#switch fib.offerType>
447 <#case "101">
448 <#assign cardIndex = 3 >
449 <#assign productUrlHero = "consumer-edr">
450 <#assign product="Everyday Rewards+">
451 <#assign hasBalanceTransferCalculator = false>
452 <#break>
453 <#case "103">
454 <#assign cardIndex = 3 >
455 <#assign productUrlHero = "consumer-edr">
456 <#assign product="Everyday Rewards+">
457 <#assign hasBalanceTransferCalculator = false>
458 <#break>
459 <#case "104">
460 <#assign cardIndex = 0 >
461 <#assign productUrlHero="max-cash">
462 <#assign product="Max Cash Preferred">
463 <#assign hasBalanceTransferCalculator = false>
464 <#break>
465 <#case "108">
466 <#assign cardIndex = 1 >
467 <#assign productUrlHero = "consumer-platinum">
468 <#assign product="Platinum">
469 <#assign hasBalanceTransferCalculator = true>
470 <#break>
471 <#case "109">
472 <#assign cardIndex = 1 >
473 <#assign productUrlHero = "consumer-platinum">
474 <#assign product="Platinum">
475 <#assign hasBalanceTransferCalculator = true>
476 <#break>
477 <#case "141">
478 <#assign cardIndex = 4 >
479 <#assign productUrlHero = "college-real-rewards">
480 <#assign product = "College Real Rewards" >
481 <#assign hasBalanceTransferCalculator = false>
482 <#break>
483 <#case "147">
484 <#assign cardIndex = 5 >
485 <#assign productUrlHero = "max-cash-secured">
486 <#assign product = "Max Cash Secured" >
487 <#assign hasBalanceTransferCalculator = false>
488 <#break>
489 <#case "115">
490 <#assign cardIndex = 2 >
491 <#assign productUrlHero = "secured">
492 <#assign product="Secured">
493 <#assign hasBalanceTransferCalculator = false>
494 <#break>
495 <#case "138">
496 <#assign cardIndex = 6 >
497 <#assign productUrlHero = "travel-rewards-plus">
498 <#assign product="Travel Rewards+">
499 <#assign hasBalanceTransferCalculator = false>
500 <#break>
501 <#case "154">
502 <#assign cardIndex = 7 >
503 <#assign productUrlHero = "reserve-rewards-plus">
504 <#assign product="Reserve Rewards+">
505 <#assign hasBalanceTransferCalculator = false>
506 <#break>
507 <#case "128">
508 <#assign cardIndex = 1 >
509 <#assign productUrlHero = "business-cash-preferred">
510 <#assign product="Business Cash Preferred">
511 <#assign hasBalanceTransferCalculator = false>
512 <#break>
513 <#case "143">
514 <#assign cardIndex = 2 >
515 <#assign productUrlHero = "business-real-rewards">
516 <#assign product="Business Real Rewards">
517 <#assign hasBalanceTransferCalculator = false>
518 <#break>
519 <#case "144">
520 <#assign cardIndex = 0 >
521 <#assign productUrlHero = "smart-business-rewards">
522 <#assign product="Smart Business Rewards">
523 <#assign hasBalanceTransferCalculator = false>
524 <#break>
525 <#case "121">
526 <#assign cardIndex = 3 >
527 <#assign productUrlHero = "business-platinum">
528 <#assign product="Business">
529 <#assign hasBalanceTransferCalculator = false>
530 <#break>
531 <#default>
532 </#switch>
533 <#assign cardArtImage = cdnCardArtUrl + "/" + fib.filename + ".png">
534 <#assign cardArtImageAlt = cdnCardArtUrl + "/" + fib.filename + ".jpg">
535
536 <script>
537 console.log("offerType ${fib.offerType} productUrlHero ${productUrlHero} show calculator ${hasBalanceTransferCalculator?c}")
538 </script>
539
540 <#if url?matches(".*/${productUrlHero}\\?.*")>
541 <#assign isExcluded = 0>
542 <#if fib.dmaexclude??>
543 <#assign isExcluded = fib.dmaexclude?number!0>
544 </#if>
545 <#if (fib.offerType=="108" || fib.offerType=="109" || fib.offerType == "121")>
546
547 <#assign scrapedData = utilServ.makeCall('crcDDCGetSchumerBox', '${fib.offerId}' + '&'+ '${fib.sourceCode}')>
548 <#if (scrapedData?size > 0)>
549 <#list scrapedData as sItem>
550 <#if ((sItem.scrapedLabel?contains("Annual Percentage Rate (APR) for Purchases")) && (sItem.scrapedValue?has_content)) >
551 <#assign apr = sItem.scrapedValue?replace("(\n|\r\n|\r)+", " ","r")>
552 <#break>
553 </#if>
554
555 </#list>
556 <script>
557 $(document).ready(function () {
558 var aprText = "${apr}";
559 //console.log('aprText',aprText);
560 if (aprText) {
561 $(".apr-full-text").html(aprText);
562 try {
563 var matches= aprText.match(/\d+(\.\d+)?%?/g);
564 var billing_cycle = matches[1];
565 var apr_min = apr_min = matches[2];
566 var apr_max = apr_max = matches[3];
567 //console.log('billing_cycle', billing_cycle);
568 //console.log('apr_min', apr_min);
569 //console.log('apr_max', apr_max);
570 if (billing_cycle) {
571 //console.log($(".scraped-billing-cycle"));
572 $(".scraped-billing-cycle").html(billing_cycle);
573 }
574 if (apr_min) {
575 $(".scraped-apr-min").html(apr_min);
576 }
577 if (apr_max) {
578 $('.scraped-apr-max').html(apr_max);
579 }
580
581 } catch (e) {
582 console.log(e);
583 }
584 }
585 });
586 </script>
587 </#if>
588 </#if>
589 <#if product?has_content && product != "">
590 <#assign card_text = product + " Card">
591 </#if>
592 <#assign tc_offerTypes = ['108', '109', '121', '144']>
593 <#assign calculator_offerTypes = ['101', '104', '138', '154', '128', '143', '144']>
594 <div class="hero-container ${class.getData()}">
595 <div class="hero-main">
596 <div class="hero-main-container">
597 <div class="hero-main-offer">
598 <div class="offer-detail">
599 <div class="offer-detail-cardArt cardArtImg">
600 <img src="${cardArtImage!''}" alt="${partnerName!''}" title="${partnerName!''}"
601 onerror="this.onerror=null;this.src='${cardArtImageAlt!''}'" class="jn-img-responsive">
602 <p>${card_text!''}</p>
603 <#if (hasBalanceTransferCalculator)>
604 <a href="javascript:void(0);" data-micromodal-trigger="modal-2"aria-hidden="true" >See how much you could save with a balance transfer</a>
605 </#if>
606 </div>
607 <div class="offer-detail-text text-color-default hide-desktop">
608 ${productTitle.getSiblings()[cardIndex].primaryHeadlineFeature.getData()}
609
610 <#if (tc_offerTypes?seq_contains(fib.offerType))>
611 <a href="${oadURL_TC}?step=display&offerId=${fib.offerId}&locationCode=${lc}" target="_blank">
612 <span class="screen-reader-only">${partnerName!''} ${product!''} Card </span>See terms & conditions
613 </a>
614 </#if>
615 <#if (calculator_offerTypes?seq_contains(fib.offerType))>
616 <a class="whiteLink" onclick='ga("send", "event", "click", "Rewards Calculator", "Outbound Link");' target="_blank" href="http://www.myaccountbenefits.com/rewards-calculator?ecdma-lc=${lc}">Calculate Rewards</a>
617 </#if>
618 </div>
619
620 <#if isExcluded == 0>
621 <a
622 class="jn-button hide-desktop btn"
623 data-button-name="cta-button-top"
624 data-product-name="${productUrlHero!''}"
625 href="${oadURL}?locationCode=${lc}&offerId=${fib.offerId}&preparerType=customer${dcoSourceCodeQueryParameter}"
626 >
627 ${productTitle.getSiblings()[cardIndex].ctaText.getData()}<span class="screen-reader-only"> for ${partnerName!''} ${product!''} Credit Card </span>
628 </a>
629 <#else>
630 <a
631 class="jn-button hide-desktop btn"
632 data-button-name="cta-button-top"
633 data-product-name="${productUrlHero!''}"
634 data-micromodal-trigger="modal-product-hero"
635 href="javascript:void(0);"
636 >
637 ${productTitle.getSiblings()[cardIndex].ctaText.getData()}<span class="screen-reader-only"> for ${partnerName!''} ${product!''} Credit Card </span>
638 </a>
639 </#if>
640 </div>
641 <div class="offer-header">
642 <div class="offer-text-top">
643 ${productTitle.getSiblings()[cardIndex].primaryHeadlineText.getData()}
644 </div>
645 <div class="offer-text-bottom hide-mobile">
646 <div class="offer-detail-text text-color-default ">
647 ${productTitle.getSiblings()[cardIndex].primaryHeadlineFeature.getData()}
648 <#if (tc_offerTypes?seq_contains(fib.offerType))>
649 <a class="whiteLink" href="${oadURL_TC}?step=display&offerId=${fib.offerId}&locationCode=${lc}" target="_blank">
650 <span class="screen-reader-only">${partnerName!''} ${product!''} Card </span>See terms & conditions
651 </a>
652 </#if>
653 </div>
654
655 <#if isExcluded == 0>
656 <a
657 class="jn-button"
658 data-button-name="cta-button-top"
659 data-product-name="${productUrlHero!''}"
660 href="${oadURL}?locationCode=${lc}&offerId=${fib.offerId}&preparerType=customer${dcoSourceCodeQueryParameter}"
661 >
662 ${productTitle.getSiblings()[cardIndex].ctaText.getData()}<span class="screen-reader-only"> for ${partnerName!''} ${product!''} Credit Card </span>
663 </a>
664 <#else>
665 <a
666 class="jn-button"
667 data-button-name="cta-button-top"
668 data-product-name="${productUrlHero!''}"
669 data-micromodal-trigger="modal-product-hero"
670 href="javascript:void(0);"
671 >
672 ${productTitle.getSiblings()[cardIndex].ctaText.getData()}<span class="screen-reader-only"> for ${partnerName!''} ${product!''} Credit Card </span>
673 </a>
674 </#if>
675 <#if (calculator_offerTypes?seq_contains(fib.offerType))>
676 <a class="whiteLink" onclick='ga("send", "event", "click", "Rewards Calculator", "Outbound Link");' target="_blank" href="http://www.myaccountbenefits.com/rewards-calculator?ecdma-lc=${lc}">Calculate Rewards</a>
677 </#if>
678 </div>
679 </div>
680
681 </div>
682 </div>
683 </div>
684 </div>
685
686 <div aria-hidden="true" class="modal micromodal-slide" id="modal-product-hero" >
687 <div class="excludeModal__overlay" data-micromodal-close tabindex="-1">
688 <div
689 aria-modal="true"
690 aria-labelledby="modal-prodcut-hero-title"
691 class="excludeModal__container"
692 role="dialog"
693 >
694 <button aria-label="Close modal" class="excludeModal__close" data-micromodal-close></button>
695 <header class="excludeModal__header">
696 <h2 class="excludeModal__title" id="modal-prodcut-hero-title">
697 <#if productTitle.getSiblings()[cardIndex].excludedMessage?? >
698 ${productTitle.getSiblings()[cardIndex].excludedMessage.getData()!""}
699 </#if>
700 </h2>
701 </header>
702 </div>
703 </div>
704 </div>
705 <#break />
706 </#if>
707 </#list>
708
709 </#if>
710</#if>
711<!-- https://micromodal.vercel.app/ -->
712<script src="https://unpkg.com/micromodal/dist/micromodal.min.js"></script>
713
714<script>
715 AUI().ready(function(){
716 //The below script is there to add vertical card art in UAT only so that QA has an easier time auditing. Note that the script only applies to FI SouthState (location code 20419) which is currently the only bank with vertical card art at the moment
717 var locationCodeParam = '${lc}';
718 var currentEnvironmentParam = '${currentEnvironment}';
719 if(locationCodeParam == '20419' && currentEnvironmentParam == 'uat'){
720 Array.prototype.slice.call(document.querySelectorAll('.cardArtImg')).map(function(e){e.firstElementChild.src = "https://39f6f821fa03de239594-9f1c16ccc3b26ce57656bb4af99947b6.ssl.cf2.rackcdn.com/f20cf80a-6aea-46ec-84fc-c2a6583773d9.png"})
721 }
722
723 MicroModal.init();
724 });
725</script>
726<script>
727 if(typeof setHeaderBackground === 'undefined') { let setHeaderBackground = () => {};}
728 setHeaderBackground = () => {
729 // Makes the Header subtitle work if there is two lines of text
730 //product page header
731 var consumerHeader = document.getElementsByClassName("landing-consumer")[0];
732 if(!consumerHeader) {
733 //index page header
734 consumerHeader = document.getElementsByClassName("tier3-hero-landing-consumer")[0];
735 }
736
737 if(consumerHeader) {
738 var consumerHeroContainer = consumerHeader.getElementsByClassName("hero-main-container")[0];
739 var consumerOfferHeader = consumerHeader.getElementsByClassName("offer-subtitle")[0];
740 const offerTextTop = consumerHeader.querySelector(".offer-text-top");
741
742 if (consumerOfferHeader.innerText.length >= 76){
743 const gradientHeight = Math.max(offerTextTop.offsetHeight + 40, 200) + "px";
744 //two lines
745 //offerTextTop.style.marginTop = '0px';
746 //document.querySelector('.offer-text-bottom').style.marginTop = '25px';
747 //prevent button and text going into blue section
748 //consumerHeader.querySelector('.offer-text-top h1').style.minHeight = "120px";
749 consumerHeroContainer.style.background = "linear-gradient(180deg, ${backgroundColor!'#173989'} " + gradientHeight + ", #f8f8f8 " + gradientHeight + ")";
750 }
751 }
752 //product page header
753 var buisnessHeader = document.getElementsByClassName("landing-business")[0];
754 if(!buisnessHeader) {
755 //index page header
756 buisnessHeader = document.getElementsByClassName("tier3-hero-landing-business")[0];
757 }
758
759 if(buisnessHeader) {
760 var buisnessHeroContainer = buisnessHeader.getElementsByClassName("hero-main-container")[0];
761 var buisnessOfferHeader = buisnessHeader.getElementsByClassName("offer-subtitle")[0];
762
763 if (buisnessOfferHeader.innerText.length >= 48){
764 //two lines
765 buisnessHeroContainer.style.background = "linear-gradient(180deg, rgba(255,255,255,1) 45%, ${backgroundColor!'#173989'} 45%)";
766 }
767 }
768 };
769 /*
770 sometimes this runs before the text height it is refercning is loaded. Resulting in incorect background styles. If only in aui.ready then it flashes incorect styles then goes to correct styles everytime.
771 With the aui.ready and imediate call it normal loads correctly but if it loads before header text it will still flash incorect styles and then be fixed.
772 */
773 setHeaderBackground();
774 AUI().ready(function(){setHeaderBackground();});
775
776</script>
An error occurred while processing the template.
The following has evaluated to null or missing:
==> qstringmap["ecdma-lc"] [in template "10154#10192#155407401" at line 13, column 15]
----
Tip: It's the final [] step that caused this error, not those before it.
----
Tip: If the failing expression is known to legally refer to something that's sometimes null or missing, either specify a default value like myOptionalVar!myDefault, or use <#if myOptionalVar??>when-present<#else>when-missing</#if>. (These only cover the last step of the expression; to cover the whole expression, use parenthesis: (myOptionalVar.foo)!myDefault, (myOptionalVar.foo)??
----
----
FTL stack trace ("~" means nesting-related):
- Failed at: #assign lc = qstringmap["ecdma-lc"]?f... [in template "10154#10192#155407401" at line 13, column 1]
----
1<#assign utilServ = (serviceLocator.findService("com.elan.crc.utilites.service.CRCRemoteServiceService"))! />
2<#assign oadURL = propsUtil.get('elan.oad.url') >
3<#assign url = themeDisplay.getPortalURL() + themeDisplay.getURLCurrent()/>
4<#assign qstringmap = httpUtil.getParameterMap(httpUtil.getQueryString(url))>
5<#assign environment = url?replace('/index.*','','r')>
6<#assign oadURL_TC = 'https://online1.elancard.com/oad/terms.controller' >
7
8<script>
9var currentUrl = '${url}';
10
11</script>
12
13<#assign lc = qstringmap["ecdma-lc"]?first>
14<#assign lc = htmlUtil.escape(lc)>
15<#assign lc = htmlUtil.escapeJS(lc)>
16
17<#assign prefix = "00000" >
18<#assign lcWithPrefix = prefix + lc >
19<#assign withPrefixLength = lcWithPrefix?length >
20<#assign startHere = withPrefixLength - 5>
21<#assign lc = lcWithPrefix?substring(startHere)>
22
23
24<#if qstringmap["ecid"]?has_content>
25 <#assign ecidExt = qstringmap["ecid"]?first>
26 <#assign ecidExt = htmlUtil.escape(ecidExt)>
27 <#assign ecidExt = htmlUtil.escapeJS(ecidExt)>
28 <#assign ecidExt = "&ecid=" + ecidExt>
29<#else>
30 <#assign ecidExt="">
31</#if>
32
33<#if oadURL?contains("uat-")>
34 <#assign oadURL_TC = 'https://uat-online1.elancard.com/oad/terms.controller' >
35<#else>
36 <#assign oadURL_TC = 'https://online1.elancard.com/oad/terms.controller' >
37</#if>
38
39
40<#assign clientProfileService = (serviceLocator.findService("com.elan.crc.user.service.CrcClientProfileLocalService"))! >
41<#assign clientProfileList = clientProfileService.findByLocationCode(lc)>
42<#assign clientProfile = clientProfileList?first>
43<#assign partnerName = clientProfile.getMarketingNameLong()>
44<#assign pbu = clientProfile.getPbu()>
45<#assign subbu = clientProfile.getSUBBRANDBUNBR()>
46<#assign cdnCardArtUrl = (propsUtil.get('rackspace.cdn.cardart.url'))!>
47
48<#if qstringmap["ecid"]?has_content>
49 <#assign ecidExt = qstringmap["ecid"]?first>
50 <#assign ecidExt = htmlUtil.escape(ecidExt)>
51 <#assign ecidExt = htmlUtil.escapeJS(ecidExt)>
52 <#assign ecidExt = "&ecid=" + ecidExt>
53
54 <#assign campaignId = qstringmap["ecid"]?first >
55 <#assign campaignId = htmlUtil.escape(campaignId)>
56 <#assign campaignId = htmlUtil.escapeJS(campaignId)>
57<#else>
58 <#assign ecidExt="">
59 <#assign campaignId = "" >
60</#if>
61
62<#assign fiCardsData = utilServ.makeCall('crcTier3GetPbuData','0&'+ pbu +'&'+subbu + '&' + lc)>
63<#-- filter duplicated cards-->
64<#assign consumerCards = []>
65<#assign businessCards = []>
66<#assign offerTypeList = []>
67<#assign consumerOfferTypes =['101', '104', '108', '109', '115', '141','147', '138', '154']>
68<#assign businessOfferTypes =['144', '128', '143', '121']>
69<#assign index = 0>
70<#list fiCardsData as fib>
71 <#if (fib.offerType?has_content && !(offerTypeList?seq_contains(fib.offerType)))>
72 <#assign offerTypeList = offerTypeList + [fib.offerType]>
73 <#if consumerOfferTypes?seq_contains(fib.offerType)>
74 <#assign consumerCards = consumerCards + fiCardsData[index..index]>
75 <#elseif (businessOfferTypes?seq_contains(fib.offerType))>
76 <#assign businessCards = businessCards + fiCardsData[index..index]>
77 </#if>
78 </#if>
79 <#assign index = index + 1>
80</#list>
81
82<style>
83 .excludeModal__overlay {
84 position: fixed;
85 top: 0;
86 left: 0;
87 right: 0;
88 bottom: 0;
89 background: rgba(0,0,0,0.6);
90 display: flex;
91 justify-content: center;
92 align-items: center;
93 }
94
95 .excludeModal__container {
96 background-color: #fff;
97 padding: 30px;
98 min-width: 500px;
99 max-width: 500px;
100 max-height: 100vh;
101 border-radius: 4px;
102 overflow-y: auto;
103 box-sizing: border-box;
104 }
105
106 .excludeModal__header {
107 display: flex;
108 justify-content: space-between;
109 align-items: center;
110 }
111
112 .modal .excludeModal__container .excludeModal__title {
113 margin-top: 0;
114 margin-bottom: 0;
115 font-weight: 600;
116 font-size: 20px;
117 line-height: 1.25;
118 color: #00449e;
119 box-sizing: border-box;
120 }
121
122 .excludeModal__close {
123 background: transparent;
124 border: 1px solid white;
125 padding: 4px 8px;
126 float: right;
127 }
128
129 .excludeModal__close:hover {
130 border: 1px solid black;
131 }
132
133 .excludeModal__close:before { content: "\2715"; }
134
135 @keyframes mmfadeIn {
136 from { opacity: 0; }
137 to { opacity: 1; }
138 }
139
140 @keyframes mmfadeOut {
141 from { opacity: 1; }
142 to { opacity: 0; }
143 }
144
145 @keyframes mmslideIn {
146 from { transform: translateY(15%); }
147 to { transform: translateY(0); }
148 }
149
150 @keyframes mmslideOut {
151 from { transform: translateY(0); }
152 to { transform: translateY(-10%); }
153 }
154
155 .micromodal-slide {
156 display: none;
157 }
158
159 .micromodal-slide.is-open {
160 display: block;
161 }
162
163 .micromodal-slide[aria-hidden="false"] .excludeModal__overlay {
164 animation: mmfadeIn .3s cubic-bezier(0.0, 0.0, 0.2, 1);
165 }
166
167 .micromodal-slide[aria-hidden="false"] .excludeModal__container {
168 animation: mmslideIn .3s cubic-bezier(0, 0, .2, 1);
169 }
170
171 .micromodal-slide[aria-hidden="true"] .excludeModal__overlay {
172 animation: mmfadeOut .3s cubic-bezier(0.0, 0.0, 0.2, 1);
173 }
174
175 .micromodal-slide[aria-hidden="true"] .excludeModal__container {
176 animation: mmslideOut .3s cubic-bezier(0, 0, .2, 1);
177 }
178
179 .micromodal-slide .excludeModal__container,
180 .micromodal-slide .excludeModal__overlay {
181 will-change: transform;
182 }
183</style>
184
185<#if ((consumerCards?size > 0) || (businessCards?size > 0))>
186 <div class="content-container content-container-main jn-consumer-content">
187 <#if ((consumerCards?size > 0) && (businessCards?size > 0))>
188 <nav class="jn-primary-nav two-tabs">
189 <ul>
190 <li title="${partnerName!''} - Personal products">
191 <a href="#" class="tab-nav active" id="consumerTab"><span>Personal</span></a>
192 </li>
193 <li title="${partnerName!''} - Business products">
194 <a href="#" class="tab-nav" id="businessTab"><span>Business</span></a>
195 </li>
196 </ul>
197 </nav>
198 <#else>
199 <#if (consumerCards?size > 0)>
200 <nav class="jn-primary-nav" title="${partnerName!''} - Personal products">
201 <ul>
202 <li>
203 <p class="tab-nav" id="consumerTab"><span>Personal</span></p>
204 </li>
205 </ul>
206 </nav>
207 </#if>
208 <#if (businessCards?size > 0)>
209 <nav class="jn-primary-nav" title="${partnerName!''} - Business products">
210 <ul>
211 <li>
212 <p class="tab-nav" id="businessTab"><span>Business</span></p>
213 </li>
214 </ul>
215 </nav>
216 </#if>
217 </#if>
218 <#if (consumerCards?size > 0)>
219 <div class="tab-more-wrapper">
220 <div class="jn-consumer-content-wrapper jn-tab-content active transition-start" data-id="consumerTab" title="${partnerName!''} - Personal products">
221
222 <#list consumerCards as fib>
223 <#assign cardArtImage = cdnCardArtUrl + "/" + fib.filename + ".png" >
224 <#assign cardArtImageAlt = cdnCardArtUrl + "/" + fib.filename + ".jpg" >
225 <#assign hasBalanceTransferCalculator = false>
226 <#switch fib.offerType>
227 <#case "101">
228 <#assign productName = "consumer-edr">
229 <#assign productUrl = "202302/consumer-edr">
230 <#assign product="Everyday Rewards+">
231 <#assign cardIndex = 0>
232 <#break>
233 <#case "108">
234 <#assign productName = "consumer-platinum">
235 <#assign productUrl = "202308/consumer-platinum">
236 <#assign product="Platinum">
237 <#assign cardIndex = 2>
238 <#assign hasBalanceTransferCalculator = true>
239 <#break>
240 <#case "109">
241 <#assign productName = "consumer-platinum">
242 <#assign productUrl = "202308/consumer-platinum">
243 <#assign product="Platinum">
244 <#assign cardIndex = 2>
245 <#assign hasBalanceTransferCalculator = true>
246 <#break>
247 <#case "115">
248 <#assign productName = "secured">
249 <#assign productUrl = "secured">
250 <#assign product="Secured">
251 <#assign cardIndex = 5>
252 <#break>
253 <#case "104">
254 <#assign productName = "max-cash">
255 <#assign productUrl = "max-cash">
256 <#assign product="Max Cash Preferred">
257 <#assign cardIndex = 1>
258 <#break>
259 <#case "147">
260 <#assign productName = "max-cash-secured">
261 <#assign productUrl = "max-cash-secured">
262 <#assign product="Max Cash Secured">
263 <#assign cardIndex = 4>
264 <#break>
265 <#case "141">
266 <#assign productName = "college-real-rewards">
267 <#assign productUrl = "college-real-rewards">
268 <#assign product="College Real Rewards">
269 <#assign cardIndex = 3>
270 <#break>
271 <#case "138">
272 <#assign productName = "travel-rewards-plus">
273 <#assign productUrl = "202305/travel-rewards-plus">
274 <#assign product="Travel Rewards+">
275 <#assign cardIndex = 10>
276 <#break>
277 <#case "154">
278 <#assign productName = "reserve-rewards-plus">
279 <#assign productUrl = "202305/reserve-rewards-plus">
280 <#assign product="Reserve Rewards+">
281 <#assign cardIndex = 11>
282 <#break>
283 <#default>
284 </#switch>
285 <#assign titleText = consumerTitle.getSiblings()[cardIndex].Title.getData()>
286 <#assign titleText = titleText?replace('<[^>]+>','','r')>
287 <#assign newTag = "">
288 <#if (consumerTitle.getSiblings()[cardIndex].addNewTag?has_content && consumerTitle.getSiblings()[cardIndex].addNewTag.getData() == "true")>
289 <#assign newTag = "with-new-tag">
290 </#if>
291 <#assign APR="">
292 <#assign AMF="">
293 <#assign BAL="">
294 <#assign scrapedData = utilServ.makeCall('crcDDCGetSchumerBox', fib.offerId + '&'+ fib.sourceCode)>
295 <#if (scrapedData?size > 0)>
296 <#list scrapedData as sItem>
297 <#if ((sItem.scrapedLabel?contains("Annual Percentage Rate (APR) for Purchases")) && (sItem.scrapedValue?has_content)) >
298 <#assign APR = sItem.scrapedValue>
299 <#elseif ((sItem.scrapedLabel?contains("Annual Membership Fee")) && (sItem.scrapedValue?has_content)) >
300 <#assign AMF = sItem.scrapedValue>
301 <#elseif ((sItem.scrapedLabel?contains("APR for Balance Transfers")) && (sItem.scrapedValue?has_content)) >
302 <#assign BAL = sItem.scrapedValue>
303 </#if>
304 <#if (APR?has_content && AMF?has_content && BAL?has_content)>
305 <#break>
306 </#if>
307 </#list>
308 </#if>
309 <div class="${newTag} jn-consumer-item item-${fib.offerType}" title="${partnerName!''} ${product!''} Credit Card">
310 <div class="tag-container">
311 <div class="tag-corner">
312 <div class="tag-label">NEW</div>
313 </div>
314 </div>
315 <div class="consumer-card-heading hide-desktop">
316 <div class="consumer-card-heading__subheading">${consumerTitle.getSiblings()[cardIndex].Title.getData()}</div>
317 ${consumerTitle.getSiblings()[cardIndex].headlineText.getData()}
318 </div>
319 <div class="jn-consumer-card-image">
320 <img src="${cardArtImage!''}" alt="${partnerName!''} ${product!''} Card" class="jn-img-responsive" onerror="this.onerror=null;this.src='${cardArtImageAlt!''}'">
321 <#assign calculatorConsumerOfferTypes = ["101", "103", "104", "138", "154"] >
322 <#if (calculatorConsumerOfferTypes?seq_contains(fib.offerType))>
323 <a class="reward-calculator-link" target="_blank" onclick='ga("send", "event", "click", "Rewards Calculator", "Outbound Link");' class="whiteLink" href="http://www.myaccountbenefits.com/rewards-calculator?ecdma-lc=${lc}">Calculate Rewards</a>
324 </#if>
325 <#if consumerTitle.getSiblings()[cardIndex].cardArtDescription?has_content>
326 <p class="tier3-tabs-card-art-description">${consumerTitle.getSiblings()[cardIndex].cardArtDescription.getData()}</p>
327 </#if>
328 <#if (hasBalanceTransferCalculator)>
329 <a style="display: block; text-align: center; max-width: 285px; margin: auto;" href="javascript:void(0);" data-micromodal-trigger="modal-2">See how much you could save with a balance transfer</a>
330 </#if>
331 </div>
332
333 <div class="jn-consumer-card-info">
334 <div class="consumer-card-heading hide-mobile">
335 <div class="consumer-card-heading__subheading">${consumerTitle.getSiblings()[cardIndex].Title.getData()}</div>
336 ${consumerTitle.getSiblings()[cardIndex].headlineText.getData()}
337 </div>
338 <div class="jn-additional">
339 <ul class="${fib.offerType}">
340 <li>
341 <p>
342 <#if (fib.offerType == "104")>
343 <strong>APR for Purchases: </strong>
344 <#elseif (fib.offerType == "101" ||
345 fib.offerType == "108" ||
346 fib.offerType == "109" ||
347 fib.offerType == "141"
348 )>
349 <strong>Intro APR<sup>*</sup> for Purchases and Balance Transfers: </strong>
350 <#else>
351 <strong>APR for Purchases and Balance Transfers: </strong>
352 </#if>
353 ${APR!''}
354 <a href="${oadURL_TC}?step=display&offerId=${fib.offerId}&locationCode=${lc}" target="_blank" class="t_c_link">
355 <span class="screen-reader-only">${partnerName!''} ${product!''} Card </span>See terms & conditions.
356 </a>
357 </p>
358 </li>
359 <#if (fib.offerType == "104")>
360 <li class="${fib.offerType}">
361 <p>
362 <strong>Intro APR<sup>*</sup> for Balance Transfers: </strong>
363 ${BAL!''}
364 <a href="${oadURL_TC}?step=display&offerId=${fib.offerId}&locationCode=${lc}" target="_blank" class="t_c_link">
365 <span class="screen-reader-only">${partnerName!''} ${product!''} Card </span>See terms & conditions.
366 </a>
367 </p>
368 </li>
369 </#if>
370
371 <#if consumerTitle.getSiblings()[cardIndex].additionalInfo.getSiblings()?has_content>
372 <#list consumerTitle.getSiblings()[cardIndex].additionalInfo.getSiblings() as marketingInfo>
373 <li>${marketingInfo.getData()}</li>
374 </#list>
375 </#if>
376 <li>
377 <p>Annual Fee: ${AMF!''}
378 <a href="${oadURL_TC}?step=display&offerId=${fib.offerId}&locationCode=${lc}" target="_blank" class="t_c_link">
379 <span class="screen-reader-only">${partnerName!''} ${product!''} Card </span>See terms & conditions.
380 </a>
381 </p>
382 </li>
383 </ul>
384 </div>
385 <ul class="actions">
386 <li>
387 <#assign isExcluded = 0>
388 <#if fib.dmaexclude??>
389 <#assign isExcluded = fib.dmaexclude?number!0>
390 </#if>
391 <#if isExcluded == 0>
392 <a
393 class="applyNowLink"
394 data-button-name="apply-now-link"
395 data-product-name="${productName!''}"
396 href="${oadURL}?locationCode=${lc}&offerId=${fib.offerId}&preparerType=customer"
397 >
398 ${consumerTitle.getSiblings()[cardIndex].applyNow.getData()}<span class="screen-reader-only">for ${partnerName!''} ${product!''} Card </span>
399 </a>
400 <#else>
401 <a
402 class="applyNowLink"
403 data-button-name="apply-now-link"
404 data-product-name="${productName!''}"
405 data-micromodal-trigger="modal-consumer-tabs-${fib.offerType}"
406 href="javascript:void(0);"
407 >
408 ${consumerTitle.getSiblings()[cardIndex].applyNow.getData()}<span class="screen-reader-only">for ${partnerName!''} ${product!''} Card </span>
409 </a>
410
411 </#if>
412 </li>
413 <li><a href="${environment}/${productUrl}?ecdma-lc=${lc}${ecidExt}">${consumerTitle.getSiblings()[cardIndex].LearnMore.getData()}<span class="screen-reader-only"> about ${partnerName!''} ${product!''} Card </span></a>
414 </li>
415 </ul>
416 </div>
417 </div>
418 </#list>
419 </div>
420 </div>
421 </#if>
422 <#if (businessCards?size > 0)>
423 <div class="tab-more-wrapper">
424 <div class="jn-consumer-content-wrapper jn-tab-content transition-start" data-id="businessTab" title="${partnerName!''} - Business products">
425
426 <#list businessCards as fib>
427 <#assign cardArtImage = cdnCardArtUrl + "/"+fib.filename+".png">
428 <#assign cardArtImageAlt = cdnCardArtUrl + "/"+fib.filename+".jpg">
429 <#switch fib.offerType>
430 <#case "128">
431 <#assign productName = "business-cash-preferred">
432 <#assign productUrl = "business-cash-preferred">
433 <#assign product="Business Cash Preferred">
434 <#assign cardIndex = 6>
435 <#break>
436 <#case "121">
437 <#assign productName = "business-platinum">
438 <#assign productUrl = "202208/business-platinum">
439 <#assign product="Business Card">
440 <#assign cardIndex = 7>
441 <#break>
442 <#case "144">
443 <#assign productName = "smart-business-rewards">
444 <#assign productUrl = "smart-business-rewards">
445 <#assign product="Smart Business Rewards">
446 <#assign cardIndex = 8>
447 <#break>
448 <#case "143">
449 <#assign productName = "business-real-rewards">
450 <#assign productUrl = "business-real-rewards">
451 <#assign product="Business Real Rewards">
452 <#assign cardIndex = 9>
453 <#break>
454
455 <#default>
456 </#switch>
457 <#assign newTag = "">
458 <#if (consumerTitle.getSiblings()[cardIndex].addNewTag?has_content && consumerTitle.getSiblings()[cardIndex].addNewTag.getData() == "true")>
459 <#assign newTag = "with-new-tag">
460 </#if>
461
462 <#assign APR="">
463 <#assign AMF="">
464 <#assign scrapedData = utilServ.makeCall('crcDDCGetSchumerBox', fib.offerId + '&'+ fib.sourceCode)>
465 <#if (scrapedData?size > 0)>
466 <#list scrapedData as sItem>
467 <#if ((sItem.scrapedLabel?contains("Annual Percentage Rate (APR) for Purchases")) && (sItem.scrapedValue?has_content)) >
468 <#assign APR = sItem.scrapedValue>
469 <#elseif ((sItem.scrapedLabel?contains("Annual Membership Fee")) && (sItem.scrapedValue?has_content)) >
470 <#assign AMF = sItem.scrapedValue>
471 </#if>
472 <#if (APR?has_content && AMF?has_content)>
473 <#break>
474 </#if>
475 </#list>
476 </#if>
477
478 <div class="${newTag} jn-consumer-item item-${fib.offerType}" title="${partnerName!''} ${product!''} Credit Card">
479 <div class="tag-container">
480 <div class="tag-corner">
481 <div class="tag-label">NEW</div>
482 </div>
483 </div>
484 <div class="consumer-card-heading hide-desktop">
485 <div class="consumer-card-heading__subheading">${consumerTitle.getSiblings()[cardIndex].Title.getData()}</div>
486 ${consumerTitle.getSiblings()[cardIndex].headlineText.getData()}
487 </div>
488 <div class="jn-consumer-card-image">
489
490 <img
491 src="${cardArtImage!''}"
492 alt="${partnerName!''} ${product!''} Card"
493 class="jn-img-responsive"
494 onerror="this.onerror=null;this.src='${cardArtImageAlt!''}'"
495 >
496 <#assign calculatorBizOfferTypes = ["144", "143", "128"] >
497 <#if (calculatorBizOfferTypes?seq_contains(fib.offerType))>
498 <a class="reward-calculator-link" target="_blank" onclick='ga("send", "event", "click", "Rewards Calculator", "Outbound Link");' class="whiteLink" href="http://www.myaccountbenefits.com/rewards-calculator?ecdma-lc=${lc}">Calculate Rewards</a>
499 </#if>
500 <#if consumerTitle.getSiblings()[cardIndex].cardArtDescription?has_content>
501 <p class="tier3-tabs-card-art-description">${consumerTitle.getSiblings()[cardIndex].cardArtDescription.getData()}</p>
502 </#if>
503 </div>
504 <div class="jn-consumer-card-info">
505 <div class="consumer-card-heading hide-mobile">
506 <div class="consumer-card-heading__subheading">${consumerTitle.getSiblings()[cardIndex].Title.getData()}</div>
507 ${consumerTitle.getSiblings()[cardIndex].headlineText.getData()}
508 </div>
509 <div class="jn-additional">
510 <ul class="${fib.offerType}">
511 <li>
512 <p>
513 <#if (fib.offerType == "144")>
514 <strong>APR for Purchases and Balance Transfers: </strong>
515 <#else>
516 <strong>Intro APR<sup>*</sup> for Purchases and Balance Transfers: </strong>
517 </#if>
518 ${APR!''}
519 <a href="${oadURL_TC}?step=display&offerId=${fib.offerId}&locationCode=${lc}" target="_blank" class="t_c_link"><span class="screen-reader-only">${partnerName!''} ${product!''} Card </span>See terms & conditions.</a>
520 </p>
521 </li>
522
523 <#if consumerTitle.getSiblings()[cardIndex].additionalInfo.getSiblings()?has_content>
524 <#list consumerTitle.getSiblings()[cardIndex].additionalInfo.getSiblings() as marketingInfo>
525 <li>${marketingInfo.getData()}</li>
526 </#list>
527 </#if>
528 <li><p>Annual Fee: ${AMF!''} <a
529 href="${oadURL_TC}?step=display&offerId=${fib.offerId}&locationCode=${lc}" target="_blank" class="t_c_link"><span class="screen-reader-only">${partnerName!''} ${product!''} Card </span>See terms & conditions.</a></p>
530 </li>
531 </ul>
532 </div>
533 <ul class="actions">
534 <li>
535 <#assign isExcluded = 0>
536 <#if fib.dmaexclude??>
537 <#assign isExcluded = fib.dmaexclude?number!0>
538 </#if>
539 <#if isExcluded == 0>
540 <a
541 href="${oadURL}?locationCode=${lc}&offerId=${fib.offerId}&preparerType=customer"
542 class="applyNowLink"
543 data-button-name="apply-now-link"
544 data-product-name="${productName!''}"
545 >
546 ${consumerTitle.getSiblings()[cardIndex].applyNow.getData()}<span class="screen-reader-only">for ${partnerName!''} ${product!''} Card </span>
547 </a>
548 <#else>
549 <a
550 class="applyNowLink"
551 data-button-name="apply-now-link"
552 data-product-name="${productName!''}"
553 data-micromodal-trigger="modal-business-tabs-${fib.offerType}"
554 href="javascript:void(0);"
555 >
556 ${consumerTitle.getSiblings()[cardIndex].applyNow.getData()}<span class="screen-reader-only">for ${partnerName!''} ${product!''} Card </span>
557 </a>
558
559 </#if>
560 </li>
561 <li><a href="${environment}/${productUrl}?ecdma-lc=${lc}${ecidExt}">${consumerTitle.getSiblings()[cardIndex].LearnMore.getData()}<span class="screen-reader-only"> about ${partnerName!''} ${product!''} Card </span></a></li>
562 </ul>
563 </div>
564 </div>
565
566 </#list>
567 </div>
568 </div>
569 </#if>
570 </div>
571
572 <#if (consumerCards?size > 0)>
573 <#list consumerCards as fib>
574 <#assign isExcluded = 0>
575 <#if fib.dmaexclude??>
576 <#assign isExcluded = fib.dmaexclude?number!0>
577 </#if>
578 <#if isExcluded == 1>
579 <div aria-hidden="true" class="modal micromodal-slide" id="modal-consumer-tabs-${fib.offerType}" >
580 <div class="excludeModal__overlay" data-micromodal-close tabindex="-1" >
581 <div
582 aria-modal="true"
583 aria-labelledby="modal-consumer-tabs-title-${fib.offerType}"
584 class="excludeModal__container"
585 role="dialog"
586 >
587 <button aria-label="Close modal" class="excludeModal__close" data-micromodal-close></button>
588 <header class="excludeModal__header">
589 <h2 class="excludeModal__title" id="modal-consumer-tabs-title-${fib.offerType}">
590 <#if consumerTitle.getSiblings()[cardIndex].excludedMessage?? >
591 ${consumerTitle.getSiblings()[cardIndex].excludedMessage.getData()!""}
592 </#if>
593 </h2>
594 </header>
595 </div>
596 </div>
597 </div>
598 </#if>
599 </#list>
600 </#if>
601
602 <#if (businessCards?size > 0)>
603 <#list businessCards as fib>
604 <#assign isExcluded = 0>
605 <#if fib.dmaexclude??>
606 <#assign isExcluded = fib.dmaexclude?number!0>
607 </#if>
608 <#if isExcluded == 1>
609 <div aria-hidden="true" class="modal micromodal-slide" id="modal-business-tabs-${fib.offerType}" >
610 <div class="excludeModal__overlay" data-micromodal-close tabindex="-1">
611 <div
612 aria-modal="true"
613 aria-labelledby="modal-business-tabs-title-${fib.offerType}"
614 class="excludeModal__container"
615 role="dialog"
616 >
617 <button aria-label="Close modal" class="excludeModal__close" data-micromodal-close></button>
618 <header class="excludeModal__header">
619 <h2 class="excludeModal__title" id="modal-business-tabs-title-${fib.offerType}">
620 <#if consumerTitle.getSiblings()[cardIndex].excludedMessage?? >
621 ${consumerTitle.getSiblings()[cardIndex].excludedMessage.getData()!""}
622 </#if>
623 </h2>
624 </header>
625 </div>
626 </div>
627 </div>
628 </#if>
629 </#list>
630 </#if>
631
632 <!-- https://micromodal.vercel.app/ -->
633 <script src="https://unpkg.com/micromodal/dist/micromodal.min.js"></script>
634
635 <script>
636 AUI().ready(function() {
637 var tabs=$('.tab-nav');
638 var consumerSelector = '.jn-consumer-content-wrapper.jn-tab-content[data-id="consumerTab"]';
639 var businessSelector = '.jn-consumer-content-wrapper.jn-tab-content[data-id="businessTab"]';
640 var screenWidthMobile = 768;
641 var screenWidth = window.innerWidth;
642 var heroCardImgs = document.querySelectorAll('.jn-consumer-card-image img, .cardArtImg img');
643 for (var index = 0; index < heroCardImgs.length; index++) {
644 var heroCardImg = heroCardImgs[index];
645 var heroCardSrc = heroCardImg.getAttribute("src");
646 if(heroCardSrc != "") {
647 resizeImg(heroCardImg);
648 }
649 }
650
651 if (tabs.length == 1) {
652 $(tabs).parent().css('margin', '0');
653 if ($(consumerSelector).length > 0) {
654 hideHeroAndDisclaimer('business');
655 showHeroAndDisclaimer('consumer');
656 changeCardLayout(consumerSelector);
657 renumberFootnote("consumer");
658 createMetaTag("consumer");
659 }
660 if ($(businessSelector).length > 0) {
661 $(businessSelector).addClass('active');
662 hideHeroAndDisclaimer('consumer');
663 showHeroAndDisclaimer('business');
664 changeCardLayout(businessSelector);
665 renumberFootnote("business");
666 createMetaTag("business");
667 }
668 }
669 if (tabs.length == 2) {
670 renumberFootnote("consumer");
671 renumberFootnote("business");
672 createMetaTag("consumer");
673
674 if ($(consumerSelector + ' .jn-consumer-item').length < 3) {
675 changeCardLayout(consumerSelector);
676 }
677 if ($(businessSelector + ' .jn-consumer-item').length < 3) {
678 changeCardLayout(businessSelector);
679 }
680
681 var tabsNav = document.querySelectorAll('.tab-nav');
682 togglePrimaryNav(tabsNav);
683
684 if(window.location.href.indexOf('#business') > -1 ) {
685 $(consumerSelector).removeClass('active');
686 $(businessSelector).addClass('active');
687 $('#consumerTab').removeClass('active');
688 $('#businessTab').addClass('active');
689 hideHeroAndDisclaimer('consumer');
690 showHeroAndDisclaimer('business');
691 changeCardLayout(businessSelector);
692 renumberFootnote("business");
693 createMetaTag("business");
694
695 $(tabs).click(function(){
696 if ($(this).attr('id') === "consumerTab") {
697 var newUrl = window.location.toString();
698 window.location = newUrl.replace(/#business/, '#consumer');
699 }
700 if ($(this).attr('id') === "businessTab") {
701 var url = window.location.toString();
702 window.location = url.replace(/#consumer/, '#business');
703 }
704 });
705 }
706
707 }
708 });
709
710 // Primary Nav function
711 function togglePrimaryNav(elem) {
712 for (var i = 0; i < elem.length; i++) {
713 elem[i].addEventListener("click", function(e) {
714
715 var current = this,
716 allSections = document.querySelectorAll('[data-id]'),
717 section = document.querySelector("[data-id='"+ current.id +"']");
718
719 for (var a = 0; a < allSections.length; a++) {
720 allSections[a].classList.remove('active');
721 }
722 for (var c = 0; c < elem.length; c++) {
723 if (current != elem[c]) {
724 elem[c].classList.remove('active');
725 } else {
726 current.classList.add('active');
727 section.classList.add('active');
728 hideHeroAndDisclaimer('consumer');
729 hideHeroAndDisclaimer('business');
730 if(current.getAttribute('id') === "consumerTab"){
731 showHeroAndDisclaimer('consumer');
732 } else if(current.getAttribute('id') === "businessTab"){
733 showHeroAndDisclaimer('business');
734 }
735 }
736 }
737 e.preventDefault();
738 });
739 }
740 }
741
742 function renumberFootnote(type) {
743 var discriptionSelector = '.jn-consumer-content-wrapper.jn-tab-content' + '[data-id="' + type + 'Tab"]';
744 var disclaimerSelector = '.tier3-disclaimer-landing-' + type;
745 var heroSelector = '.tier3-hero-landing-' + type;
746 var numOfFootnote = $(disclaimerSelector + ' sup').length;
747 var showList = [];
748 var hideList=[];
749 for (var i = 1; i <= numOfFootnote; i++) {
750 var cssClass="tag-" + i;
751 if ($(discriptionSelector + ' sup').hasClass(cssClass) || $(heroSelector + ' sup').hasClass(cssClass)) {
752 showList.push(i);
753 } else {
754 hideList.push(i);
755 }
756 }
757 /*
758 for (var i = 1; i < showList.length + 1; i++) {
759 if(showList[i-1] != i) {
760 var className="tag-" + showList[i-1];
761
762 //$(heroSelector).find("." + className).html(i);
763 // $(discriptionSelector).find("." + className).html(i);
764 //$(disclaimerSelector).find("." + className).html(i);
765 }
766 }
767 */
768 for (var i = 0; i <hideList.length; i++) {
769 var cname="tag-" + hideList[i];
770 $(disclaimerSelector).find("." + cname).parent().hide();
771 }
772 }
773
774 function changeCardLayout(cssSelector) {
775 var numOfCards = $(cssSelector + ' .jn-consumer-item').length;
776 if(numOfCards == 1) {
777 $(cssSelector).addClass('one-card');
778 } else if (numOfCards == 2) {
779 $(cssSelector).addClass('two-card');
780 }
781 }
782
783 function hideHeroAndDisclaimer(type) {
784 try {
785 document.querySelector('.tier3-hero-landing-'+ type).classList.remove('show');
786 document.querySelector('.tier3-hero-landing-'+ type).classList.add('hide');
787 } catch (e) {
788 console.log(e);
789 }
790
791 try {
792 document.querySelector('.tier3-disclaimer-landing-'+ type).classList.remove('show');
793 document.querySelector('.tier3-disclaimer-landing-'+ type).classList.add('hide');
794 } catch (e) {
795 console.log(e);
796 }
797
798 }
799
800 function showHeroAndDisclaimer(type) {
801 try {
802 document.querySelector('.tier3-hero-landing-'+ type).classList.add('show');
803 document.querySelector('.tier3-hero-landing-'+ type).classList.remove('hide');
804 } catch (e) {
805 console.log(e);
806 }
807
808 try {
809 document.querySelector('.tier3-disclaimer-landing-'+ type).classList.add('show');
810 document.querySelector('.tier3-disclaimer-landing-'+ type).classList.remove('hide');
811 } catch (e) {
812 console.log(e);
813 }
814
815 }
816
817 function createMetaTag(type) {
818 var partnerName = "${partnerName!0}";
819 var product_name = $('.jn-hero-container .jn-button').data('product-name');
820 var metaDesc ="";
821 if (type == "consumer") {
822 if(product_name == "consumer-platinum") {
823 metaDesc = "Apply Today for a "+partnerName+" Credit Card. Limited Time Offer. 0% Intro APR on Purchases and Balance Transfers for 20 Billing Cycles Consolidate your Balances with the "+partnerName+" Intro APR Card.";
824 } else if(product_name == "real-rewards") {
825 metaDesc = "Apply Today for a "+partnerName+" Credit Card. Take home 2,500 bonus points after your first purchase.";
826 } else if(product_name == "secured") {
827 metaDesc = "Apply Today for a "+partnerName+" Credit Card. Use this card as a solid foundation to build your credit.";
828 } else if(product_name == "max-cash") {
829 metaDesc = "Apply Today for a "+partnerName+" Credit Card. Earn a $150 Bonus.";
830 } else if(product_name == "max-cash-secured") {
831 metaDesc = "Apply Today for a "+partnerName+" Credit Card. Earn more on the categories you pick.";
832 } else if(product_name == "travel-rewards-plus") {
833 metaDesc = "Apply Today for a "+partnerName+" Credit Card.";
834 } else if(product_name == "reserve-rewards-plus") {
835 metaDesc = "Apply Today for a "+partnerName+" Credit Card.";
836 }
837
838 } else if (type == "business") {
839 if(product_name == "business-cashback") {
840 metaDesc = "Apply Today for a "+partnerName+" Credit Card. Earn Cash back on common business expenses.";
841 } else if(product_name == "business-real-rewards") {
842 metaDesc = "Apply Today for a "+partnerName+" Credit Card. Get more rewards in the categories you spend the most on.";
843 } else if(product_name == "business-platinum") {
844 metaDesc = "Apply Today for a "+partnerName+" Business Card. 0% Intro APR on Purchases and Balance Transfers for 15 Billing Cycles";
845 } else if(product_name == "smart-business-rewards") {
846 metaDesc = "Apply Today for a "+partnerName+" Credit Card. More choices. More value for your business. Earn a $200 Bonus and 2x Rewards on your top 2 spend categories each month with the "+partnerName+" Credit Card.";
847 }
848 }
849 var m = document.createElement('meta');
850 m.name = 'description';
851 m.content = metaDesc;
852 document.head.appendChild(m);
853 }
854
855 function resizeImg(img) {
856 img.addEventListener("load", function() {
857 var cardImgWidth = img.width;
858 var cardImgHeight = img.height;
859 if(cardImgWidth > cardImgHeight) {
860 img.style.width = "285px";
861 } else {
862 img.style.width = "150px";
863 }
864 });
865 }
866
867 AUI().ready(function() {
868 MicroModal.init();
869 });
870 </script>
871</#if>
An error occurred while processing the template.
The following has evaluated to null or missing:
==> qstringmap["ecdma-lc"] [in template "10154#10192#153417682" at line 5, column 15]
----
Tip: It's the final [] step that caused this error, not those before it.
----
Tip: If the failing expression is known to legally refer to something that's sometimes null or missing, either specify a default value like myOptionalVar!myDefault, or use <#if myOptionalVar??>when-present<#else>when-missing</#if>. (These only cover the last step of the expression; to cover the whole expression, use parenthesis: (myOptionalVar.foo)!myDefault, (myOptionalVar.foo)??
----
----
FTL stack trace ("~" means nesting-related):
- Failed at: #assign lc = qstringmap["ecdma-lc"]?f... [in template "10154#10192#153417682" at line 5, column 1]
----
1<#assign utilServ = (serviceLocator.findService("com.elan.crc.utilites.service.CRCRemoteServiceService"))! />
2<#assign url = themeDisplay.getPortalURL() + themeDisplay.getURLCurrent()/>
3<#assign qstringmap = httpUtil.getParameterMap(httpUtil.getQueryString(url))>
4
5<#assign lc = qstringmap["ecdma-lc"]?first>
6<#assign lc = htmlUtil.escape(lc)>
7<#assign lc = htmlUtil.escapeJS(lc)>
8
9<#assign prefix = "00000" >
10<#assign lcWithPrefix = prefix + lc >
11<#assign withPrefixLength = lcWithPrefix?length >
12<#assign startHere = withPrefixLength - 5>
13<#assign lc = lcWithPrefix?substring(startHere)>
14<#if lc?has_content>
15
16 <#assign clientProfileService = (serviceLocator.findService("com.elan.crc.user.service.CrcClientProfileLocalService"))! >
17 <#assign clientProfileList = clientProfileService.findByLocationCode(lc)>
18 <#assign clientProfile = clientProfileList?first>
19 <#assign partnerName = clientProfile.getMarketingNameLong()>
20
21 <#assign pbu = clientProfile.getPbu()>
22 <#assign subbu = clientProfile.getSUBBRANDBUNBR()>
23
24 <#assign fiCardsData = utilServ.makeCall('crcTier3GetPbuData','0&'+ pbu +'&'+subbu)>
25 <#if (fiCardsData?size > 0) >
26 <#assign cardProvider = utilServ.makeCall('crcDDCGetMcOrVisa', fiCardsData[0].offerType + '&' + lc)>
27
28 <#if (cardProvider?size > 0)>
29 <#-- This will be V for visa or M for mastercard. -->
30 <#assign cardProviderAbbreviated = cardProvider[0].cardType>
31 <#else>
32 <script>
33 console.log("No card provider(Visa/Master Card) found for disclaimer");
34 </script>
35 </#if>
36
37 <div class="jn-disclaimer tier3-disclaimer-${class.getData()}" title="${partnerName!''} - Disclaimer">
38 <div class="disclaimer">
39 <#if (disclaimersVisa?has_content && cardProviderAbbreviated?contains("V"))>
40 ${disclaimersVisa.getData()}
41 </#if>
42 <#if (disclaimersMasterCard?has_content && cardProviderAbbreviated?contains("M")) >
43 ${disclaimersMasterCard.getData()}
44 </#if>
45 </div>
46 </div>
47 <#else>
48 <script>
49 console.log("card data empty");
50 </script>
51 </#if>
52<#else>
53 <script>
54 console.log("No lc for disclaimer");
55 </script>
56</#if>
An error occurred while processing the template.
The following has evaluated to null or missing:
==> qstringmap["ecdma-lc"] [in template "10154#10192#153417682" at line 5, column 15]
----
Tip: It's the final [] step that caused this error, not those before it.
----
Tip: If the failing expression is known to legally refer to something that's sometimes null or missing, either specify a default value like myOptionalVar!myDefault, or use <#if myOptionalVar??>when-present<#else>when-missing</#if>. (These only cover the last step of the expression; to cover the whole expression, use parenthesis: (myOptionalVar.foo)!myDefault, (myOptionalVar.foo)??
----
----
FTL stack trace ("~" means nesting-related):
- Failed at: #assign lc = qstringmap["ecdma-lc"]?f... [in template "10154#10192#153417682" at line 5, column 1]
----
1<#assign utilServ = (serviceLocator.findService("com.elan.crc.utilites.service.CRCRemoteServiceService"))! />
2<#assign url = themeDisplay.getPortalURL() + themeDisplay.getURLCurrent()/>
3<#assign qstringmap = httpUtil.getParameterMap(httpUtil.getQueryString(url))>
4
5<#assign lc = qstringmap["ecdma-lc"]?first>
6<#assign lc = htmlUtil.escape(lc)>
7<#assign lc = htmlUtil.escapeJS(lc)>
8
9<#assign prefix = "00000" >
10<#assign lcWithPrefix = prefix + lc >
11<#assign withPrefixLength = lcWithPrefix?length >
12<#assign startHere = withPrefixLength - 5>
13<#assign lc = lcWithPrefix?substring(startHere)>
14<#if lc?has_content>
15
16 <#assign clientProfileService = (serviceLocator.findService("com.elan.crc.user.service.CrcClientProfileLocalService"))! >
17 <#assign clientProfileList = clientProfileService.findByLocationCode(lc)>
18 <#assign clientProfile = clientProfileList?first>
19 <#assign partnerName = clientProfile.getMarketingNameLong()>
20
21 <#assign pbu = clientProfile.getPbu()>
22 <#assign subbu = clientProfile.getSUBBRANDBUNBR()>
23
24 <#assign fiCardsData = utilServ.makeCall('crcTier3GetPbuData','0&'+ pbu +'&'+subbu)>
25 <#if (fiCardsData?size > 0) >
26 <#assign cardProvider = utilServ.makeCall('crcDDCGetMcOrVisa', fiCardsData[0].offerType + '&' + lc)>
27
28 <#if (cardProvider?size > 0)>
29 <#-- This will be V for visa or M for mastercard. -->
30 <#assign cardProviderAbbreviated = cardProvider[0].cardType>
31 <#else>
32 <script>
33 console.log("No card provider(Visa/Master Card) found for disclaimer");
34 </script>
35 </#if>
36
37 <div class="jn-disclaimer tier3-disclaimer-${class.getData()}" title="${partnerName!''} - Disclaimer">
38 <div class="disclaimer">
39 <#if (disclaimersVisa?has_content && cardProviderAbbreviated?contains("V"))>
40 ${disclaimersVisa.getData()}
41 </#if>
42 <#if (disclaimersMasterCard?has_content && cardProviderAbbreviated?contains("M")) >
43 ${disclaimersMasterCard.getData()}
44 </#if>
45 </div>
46 </div>
47 <#else>
48 <script>
49 console.log("card data empty");
50 </script>
51 </#if>
52<#else>
53 <script>
54 console.log("No lc for disclaimer");
55 </script>
56</#if>
An error occurred while processing the template.
The following has evaluated to null or missing:
==> qstringmap["ecdma-lc"] [in template "10154#10192#153417685" at line 3, column 15]
----
Tip: It's the final [] step that caused this error, not those before it.
----
Tip: If the failing expression is known to legally refer to something that's sometimes null or missing, either specify a default value like myOptionalVar!myDefault, or use <#if myOptionalVar??>when-present<#else>when-missing</#if>. (These only cover the last step of the expression; to cover the whole expression, use parenthesis: (myOptionalVar.foo)!myDefault, (myOptionalVar.foo)??
----
----
FTL stack trace ("~" means nesting-related):
- Failed at: #assign lc = qstringmap["ecdma-lc"]?f... [in template "10154#10192#153417685" at line 3, column 1]
----
1<#assign url = themeDisplay.getPortalURL() + themeDisplay.getURLCurrent()/>
2<#assign qstringmap = httpUtil.getParameterMap(httpUtil.getQueryString(url))>
3<#assign lc = qstringmap["ecdma-lc"]?first>
4<#assign lc = htmlUtil.escape(lc)>
5<#assign lc = htmlUtil.escapeJS(lc)>
6
7<#if (lc?has_content && lc?length gt 5)>
8 <#assign lc = lc[0..4] >
9</#if>
10<#assign lc = lc?web_safe>
11<#assign aDateTime = .now>
12<#assign currentYear = aDateTime?string.yyyy>
13
14
15<div id="footerIdAdPlatinum">
16 ${footerContent.getData()}
17</div>
18
19<!-- BEGIN CALIFORNIA OPT-OUT MODAL STYLE AND MARKUP -->
20<script src="https://unpkg.com/micromodal/dist/micromodal.min.js"></script>
21<style>
22 #opt-out-button,
23 .modal__btn.learn-more {
24 background: #0C2074;
25 border: 1px solid #0C2074;
26 color: white;
27 text-transform: uppercase;
28 text-decoration: none;
29 font-size: 16px;
30 padding: 0.5rem 2rem;
31 display: inline-block;
32 border-radius: 0;
33 }
34 #opt-out-button:hover,
35 .modal__btn.learn-more:hover {
36 color: white !important;
37 border-color: #2C76AF !important;
38 background-color: #2C76AF !important;
39 }
40 .modal .modal__btn.learn-more {
41 background: white;
42 border: 1px solid #0C2074;
43 color: #0C2074;
44 text-decoration: none;
45 }
46 #opt-out-button[disabled="true"] {
47 background-color: rgba(0,0,0,.15);
48 color: rgba(0,0,0,.45);
49 border-color: rgba(0,0,0,.25);
50 }
51 #opt-out-button:hover[disabled="true"] {
52 background-color: rgba(0,0,0,.15) !important;
53 color: rgba(0,0,0,.45) !important;
54 border-color: rgba(0,0,0,.25) !important;
55 }
56 #opt-out-button:focus {
57 outline-style: solid;
58 outline-color: white;
59 outline-offset: -3px;
60 outline-width: 1px;
61 }
62 .opt-out-link svg {
63 width: 30px;
64 height: 14px;
65 width: auto;
66 vertical-align: middle;
67 }
68 .modal__overlay {
69 position: fixed;
70 top: 0;
71 left: 0;
72 right: 0;
73 bottom: 0;
74 background: rgba(0,0,0,0.6);
75 display: flex;
76 justify-content: center;
77 align-items: center;
78 }
79
80 .modal__container {
81 background-color: #fff;
82 padding: 30px;
83 max-width: 500px;
84 max-height: 100vh;
85 border-radius: 4px;
86 overflow-y: auto;
87 box-sizing: border-box;
88 }
89
90 .modal__header {
91 display: flex;
92 justify-content: space-between;
93 align-items: center;
94 }
95
96 .modal .modal__container .modal__title {
97 margin-top: 0;
98 margin-bottom: 0;
99 font-weight: 600;
100 font-size: 20px;
101 line-height: 1.25;
102 color: #00449e;
103 box-sizing: border-box;
104 }
105
106 .modal__close {
107 background: transparent;
108 border: 1px solid white;
109 padding: 4px 8px;
110 }
111 .modal__close:hover {
112 border: 1px solid black;
113 }
114
115 .modal__header .modal__close:before { content: "\2715"; }
116
117 .modal__content {
118 margin-top: 2rem;
119 margin-bottom: 2rem;
120 line-height: 1.5;
121 }
122
123 @keyframes mmfadeIn {
124 from { opacity: 0; }
125 to { opacity: 1; }
126 }
127
128 @keyframes mmfadeOut {
129 from { opacity: 1; }
130 to { opacity: 0; }
131 }
132
133 @keyframes mmslideIn {
134 from { transform: translateY(15%); }
135 to { transform: translateY(0); }
136 }
137
138 @keyframes mmslideOut {
139 from { transform: translateY(0); }
140 to { transform: translateY(-10%); }
141 }
142
143 .micromodal-slide {
144 display: none;
145 }
146
147 .micromodal-slide.is-open {
148 display: block;
149 }
150
151 .micromodal-slide[aria-hidden="false"] .modal__overlay {
152 animation: mmfadeIn .3s cubic-bezier(0.0, 0.0, 0.2, 1);
153 }
154
155 .micromodal-slide[aria-hidden="false"] .modal__container {
156 animation: mmslideIn .3s cubic-bezier(0, 0, .2, 1);
157 }
158
159 .micromodal-slide[aria-hidden="true"] .modal__overlay {
160 animation: mmfadeOut .3s cubic-bezier(0.0, 0.0, 0.2, 1);
161 }
162
163 .micromodal-slide[aria-hidden="true"] .modal__container {
164 animation: mmslideOut .3s cubic-bezier(0, 0, .2, 1);
165 }
166
167 .micromodal-slide .modal__container,
168 .micromodal-slide .modal__overlay {
169 will-change: transform;
170 }
171</style>
172
173<div class="modal micromodal-slide" id="modal-1" aria-hidden="true">
174<div class="modal__overlay" tabindex="-1" data-micromodal-close>
175 <div class="modal__container" role="dialog" aria-modal="true" aria-labelledby="modal-1-title">
176 <header class="modal__header">
177 <h2 class="modal__title" id="modal-1-title">
178 Your California privacy choices
179 </h2>
180 <button class="modal__close" aria-label="Close modal" data-micromodal-close></button>
181 </header>
182 <div class="modal__content" id="modal-1-content">
183 <div id="message-no-cookie">
184 <p>
185 We use technologies, such as cookies, that gather information on our website. That information is used for a variety of purposes, such as to understand how visitors interact with our websites, or to serve advertisements on our websites or on other websites. The use of technologies, such as cookies, constitutes a ‘share’ or ‘sale’ of personal information under the California Privacy Rights Act. You can stop the use of certain third-party tracking technologies that are not considered our service providers by clicking on “Opt-Out” below or by broadcasting the global privacy control signal.</p>
186
187<p> </p>
188
189<p>Note that due to technological limitations, if you visit our website from a different computer or device, or clear cookies on your browser that store your preferences, you will need to return to this screen to opt-out and/or rebroadcast the signal. You can find a description of the types of tracking technologies, and your options with respect to those technologies, by clicking “Learn more” below.</p>
190 </div>
191 <div id="message-with-cookie">
192 <p>You have successfully opted-out.</p>
193 </div>
194 </div>
195 <div class="modal__footer">
196 <a href="https://www.myaccountaccess.com/onlineCard/publicPrivacyPolicy.do?phase=privacyPolicy" target="_blank" class="modal__btn learn-more" aria-label="Learn more">Learn More</a>
197 <button id="opt-out-button" class="modal__btn modal__btn-primary" aria-label="Opt Out and Close modal" onclick="window.californiaOptOut()">Opt Out</button>
198 </div>
199 </div>
200</div>
201</div>
202<!-- END CALIFORNIA OPT-OUT MODAL STYLE AND MARKUP -->
203<!-- BEGIN CALIFORNIA OPT-OUT MODAL LOGIC -->
204<script>
205AUI().ready(function() {
206 //this aui.ready prevents from it not showing cali opt out modal due to getting the node before page finished loading.
207 const copyrightNode = document.querySelector('#footerIdAdPlatinum .copyright');
208 const fdicNode = document.querySelector('#footerIdAdPlatinum .fdic');
209 const agreementNode = document.querySelector('#footerIdAdPlatinum .member-agreement');
210 agreementNode.innerHTML= '<a class="text-color-white" href="https://online1.elancard.com/oad/cmas.controller?locationCode=${lc!''}&preparerType=customer&isNewRequest=false" target="_blank">Cardmember Agreements</a>';
211 copyrightNode.innerHTML= '<sup>©</sup> Elan Financial Services ' + ${currentYear};
212 copyrightNode.classList.add('ecdma-footer-client-name-copyright');
213 fdicNode.innerHTML = '<a class="text-color-white" href="https://www.myaccountaccess.com/onlineCard/publicPrivacyPolicy.do?phase=privacyPolicy" target="_blank">Privacy and Security</a>';
214 /* BEGIN CALIFORNIA OPT-OUT MODAL TRIGGER */
215 fdicNode.insertAdjacentHTML('afterend', '<div style="display: inline-block; margin-left: 100px;"><a href="javascript:void(0);" class="opt-out-link" data-micromodal-trigger="modal-1">Your California privacy choices <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 14" xml:space="preserve"><path d="M7.4 12.8h6.8l3.1-11.6H7.4C4.2 1.2 1.6 3.8 1.6 7s2.6 5.8 5.8 5.8z" fill-rule="evenodd" clip-rule="evenodd" fill="#fff"/><path d="M22.6 0H7.4c-3.9 0-7 3.1-7 7s3.1 7 7 7h15.2c3.9 0 7-3.1 7-7s-3.2-7-7-7zm-21 7c0-3.2 2.6-5.8 5.8-5.8h9.9l-3.1 11.6H7.4c-3.2 0-5.8-2.6-5.8-5.8z" fill-rule="evenodd" clip-rule="evenodd" fill="#06f"/><path d="M24.6 4c.2.2.2.6 0 .8L22.5 7l2.2 2.2c.2.2.2.6 0 .8-.2.2-.6.2-.8 0l-2.2-2.2-2.2 2.2c-.2.2-.6.2-.8 0-.2-.2-.2-.6 0-.8L20.8 7l-2.2-2.2c-.2-.2-.2-.6 0-.8.2-.2.6-.2.8 0l2.2 2.2L23.8 4c.2-.2.6-.2.8 0z" fill="#fff"/><path d="M12.7 4.1c.2.2.3.6.1.8L8.6 9.8c-.1.1-.2.2-.3.2-.2.1-.5.1-.7-.1L5.4 7.7c-.2-.2-.2-.6 0-.8.2-.2.6-.2.8 0L8 8.6l3.8-4.5c.2-.2.6-.2.9 0z" fill="#06f"/></svg></a></div>');
216 /* END CALIFORNIA OPT-OUT MODAL TRIGGER */
217
218 window.getCookieDomain = function() {
219 var hostname = window.location.hostname.split(".");
220 return hostname && hostname.slice(hostname.length - 2).join(".");
221 }
222 window.setToOptOut = function() {
223 if (window.getCookie('privacy_optout')) {
224 document.getElementById('message-no-cookie').style.display = 'none';
225 document.getElementById('message-with-cookie').style.display = 'block';
226 document.getElementById('opt-out-button').setAttribute('disabled', true)
227 } else {
228 document.getElementById('message-no-cookie').style.display = 'block';
229 document.getElementById('message-with-cookie').style.display = 'none';
230 }
231 }
232 window.getCookie = function(name) {
233 var value = '; ' + document.cookie;
234 var parts = value.split('; ' + name + '=');
235 if (parts.length === 2) return parts.pop().split(';').shift();
236 }
237 window.californiaOptOut = function() {
238 if (!window.getCookie('privacy_optout')) {
239 document.cookie = 'privacy_optout=1; path=/; domain=' + window.getCookieDomain() + '; expires=Thu, 31 Dec 2099 00:00:00 GMT;';
240 try {
241 if (window.CustomEvent) {
242 window.dispatchEvent(new CustomEvent('privacy_optout'));
243 } else {
244 var privacyOptoutEvent = document.createEvent('Event');
245 privacyOptoutEvent.initEvent('privacy_optout', true, true);
246 window.dispatchEvent(privacyOptoutEvent);
247 }
248 window.setToOptOut();
249 } catch (err) {
250 console.error(err);
251 }
252 }
253 }
254 MicroModal.init({
255 onShow: window.setToOptOut
256 });
257
258 // user browser setting for Global Privacy Control to opt out of sharing information with third parties
259 const isBrowserGpcOptOut = navigator.globalPrivacyControl;
260 if(isBrowserGpcOptOut === true) {
261 window.californiaOptOut();
262 }
263 });
264</script>
265<!-- END CALIFORNIA OPT-OUT MODAL LOGIC -->