Commit 2e20c28f by Matthew Piatetsky Committed by GitHub

Merge pull request #14773 from edx/ECOM-7388

ECOM-7388 Program details page redesign
parents eaed23d5 18ac075a
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1524.05 150.17"><title>MicroMasters Program Logo</title><path d="M31.57,65.82a3,3,0,0,0,.72.09,3,3,0,0,0,2.91-2.28,74.73,74.73,0,0,1,14-28.45A143.33,143.33,0,0,0,63.68,39a75.1,75.1,0,0,0-8.46,23.65,3,3,0,1,0,5.91,1.06A68,68,0,0,1,70,40.24a216.58,216.58,0,0,0,36.87,3.29V63.18a3,3,0,1,0,6,0V43.48a224.37,224.37,0,0,0,35.75-3.67,67.78,67.78,0,0,1,9,23.66,3,3,0,1,0,5.91-1.06A74.82,74.82,0,0,0,155,38.54q6.81-1.46,13.86-3.43a74.71,74.71,0,0,1,14,28.43,3,3,0,1,0,5.82-1.45,82.24,82.24,0,0,0-159.27.1A3,3,0,0,0,31.57,65.82Zm42.2-31.16c11.14-15,26.08-23.14,33.12-26.39V37.41A217.27,217.27,0,0,1,73.77,34.67Zm39.12,2.7V8.72c7.35,3.47,21.4,11.46,32,25.63A218.5,218.5,0,0,1,112.89,37.37Zm51.57-7.27q-6.54,1.75-12.89,3A87.8,87.8,0,0,0,124.33,7.95,76,76,0,0,1,164.47,30.09ZM95,7.71A88.63,88.63,0,0,0,67.11,33.47c-6.06-1.19-10.7-2.41-13.63-3.27A76,76,0,0,1,95,7.71Z" transform="translate(-28.32 -0.42)"/><path d="M187.68,144.34h0l-156.37.25a3,3,0,0,0,0,6h0l156.37-.25a3,3,0,0,0,0-6Z" transform="translate(-28.32 -0.42)"/><path d="M31.32,82.85h0l156.37-.25a3,3,0,1,0,0-6l-156.37.25a3,3,0,0,0,0,6Z" transform="translate(-28.32 -0.42)"/><path d="M31.32,135.06a3,3,0,0,0,3-3V103.72l28.44,28.45a3.09,3.09,0,0,0,4.24,0l28.44-28.45v28.34a3,3,0,1,0,6,0V96.47a3,3,0,0,0-5.12-2.12L64.88,125.81,33.44,94.35a3,3,0,0,0-5.12,2.12v35.59A3,3,0,0,0,31.32,135.06Z" transform="translate(-28.32 -0.42)"/><path d="M188.83,93.7a3,3,0,0,0-3.27.65l-31.44,31.45L122.69,94.35a3,3,0,0,0-5.12,2.12v35.59a3,3,0,0,0,6,0V103.72L152,132.17a3.09,3.09,0,0,0,4.24,0l28.44-28.45v28.34a3,3,0,0,0,6,0V96.47A3,3,0,0,0,188.83,93.7Z" transform="translate(-28.32 -0.42)"/><path d="M283.34,121,258.5,49.46H258q1,15.94,1,29.88V121H246.31V35.34h19.75l23.79,68.14h.35l24.49-68.14h19.8V121H321V78.64q0-6.39.32-16.64t.56-12.42h-.47L295.7,121Z" transform="translate(-28.32 -0.42)"/><path d="M354.77,39a7.62,7.62,0,0,1,2-5.68,7.88,7.88,0,0,1,5.77-2,7.71,7.71,0,0,1,5.65,2,7.62,7.62,0,0,1,2,5.68,7.48,7.48,0,0,1-2,5.54,7.64,7.64,0,0,1-5.65,2,7.81,7.81,0,0,1-5.77-2A7.48,7.48,0,0,1,354.77,39Zm14.59,82H355.59V56.2h13.77Z" transform="translate(-28.32 -0.42)"/><path d="M415.18,122.17q-14.71,0-22.35-8.58t-7.65-24.64q0-16.35,8-25.14T416.29,55a43.33,43.33,0,0,1,18.46,3.81l-4.16,11.07q-8.73-3.4-14.41-3.4-16.82,0-16.82,22.32,0,10.9,4.19,16.38t12.28,5.48a35.22,35.22,0,0,0,17.4-4.57v12a27.18,27.18,0,0,1-7.88,3.11A47.35,47.35,0,0,1,415.18,122.17Z" transform="translate(-28.32 -0.42)"/><path d="M481.33,55a33.18,33.18,0,0,1,6.86.59l-1.35,12.83a26,26,0,0,0-6.09-.7q-8.26,0-13.39,5.39t-5.13,14V121H448.46V56.2h10.78l1.82,11.43h.7a25.67,25.67,0,0,1,8.41-9.2A20,20,0,0,1,481.33,55Z" transform="translate(-28.32 -0.42)"/><path d="M557.68,88.48q0,15.88-8.14,24.79t-22.68,8.91a31.07,31.07,0,0,1-16.05-4.1,27.07,27.07,0,0,1-10.72-11.78,40.11,40.11,0,0,1-3.75-17.81q0-15.76,8.09-24.61T527.21,55q14.06,0,22.27,9.05T557.68,88.48Zm-47.17,0q0,22.44,16.58,22.44,16.4,0,16.41-22.44,0-22.21-16.52-22.21-8.67,0-12.57,5.74T510.51,88.48Z" transform="translate(-28.32 -0.42)"/><path d="M612,121,587.15,49.46h-.47q1,15.94,1,29.88V121H575V35.34h19.75l23.79,68.14h.35l24.49-68.14h19.8V121H649.67V78.64q0-6.39.32-16.64t.56-12.42h-.47L624.36,121Z" transform="translate(-28.32 -0.42)"/><path d="M724.79,121,722,112h-.47q-4.69,5.92-9.43,8.06a29.84,29.84,0,0,1-12.19,2.14q-9.55,0-14.91-5.16t-5.36-14.59q0-10,7.44-15.12t22.68-5.57L721,81.39V77.93q0-6.21-2.9-9.29t-9-3.08A31.11,31.11,0,0,0,699.53,67a72.23,72.23,0,0,0-8.79,3.46l-4.45-9.84a48,48,0,0,1,11.54-4.19A53.14,53.14,0,0,1,709.67,55q12.36,0,18.66,5.39t6.3,16.93V121Zm-20.51-9.37q7.5,0,12-4.19t4.54-11.75V90.06l-8.32.35q-9.73.35-14.15,3.25T694,102.54a8.66,8.66,0,0,0,2.58,6.71Q699.12,111.63,704.28,111.63Z" transform="translate(-28.32 -0.42)"/><path d="M797.38,102.54q0,9.49-6.91,14.56t-19.8,5.07q-13,0-20.8-3.93V106.35q11.43,5.27,21.27,5.27,12.71,0,12.71-7.68a6.08,6.08,0,0,0-1.41-4.1,16.66,16.66,0,0,0-4.63-3.4,79.66,79.66,0,0,0-9-4q-11.19-4.34-15.15-8.67t-4-11.25a14.77,14.77,0,0,1,6.71-12.92q6.71-4.6,18.25-4.6a51.7,51.7,0,0,1,21.62,4.63L791.88,70q-10.49-4.34-17.64-4.34-10.9,0-10.9,6.21a6.25,6.25,0,0,0,2.84,5.16q2.84,2.11,12.39,5.8a56.67,56.67,0,0,1,11.66,5.68,17,17,0,0,1,5.39,5.95A17.21,17.21,0,0,1,797.38,102.54Z" transform="translate(-28.32 -0.42)"/><path d="M836.41,111a33.49,33.49,0,0,0,10.08-1.58v10.37a27.74,27.74,0,0,1-5.89,1.67,40.66,40.66,0,0,1-7.47.67q-19.57,0-19.57-20.62V66.63h-8.85V60.53l9.49-5,4.69-13.71h8.5V56.2h18.46V66.63H827.38v34.69q0,5,2.49,7.35A9.08,9.08,0,0,0,836.41,111Z" transform="translate(-28.32 -0.42)"/><path d="M887.73,122.17q-15.12,0-23.64-8.82t-8.53-24.29q0-15.88,7.91-25T885.21,55q12.83,0,20.27,7.79t7.44,21.45V91.7H869.75q.29,9.43,5.1,14.5t13.54,5.07a50,50,0,0,0,10.69-1.08,56.05,56.05,0,0,0,10.63-3.6v11.19a42.26,42.26,0,0,1-10.2,3.4A62.52,62.52,0,0,1,887.73,122.17Zm-2.52-56.72a13.84,13.84,0,0,0-10.52,4.16q-4,4.16-4.72,12.13h29.41q-.12-8-3.87-12.16T885.21,65.45Z" transform="translate(-28.32 -0.42)"/><path d="M961.45,55a33.18,33.18,0,0,1,6.86.59L967,68.44a26,26,0,0,0-6.09-.7q-8.26,0-13.39,5.39t-5.13,14V121H928.57V56.2h10.78l1.82,11.43h.7a25.67,25.67,0,0,1,8.41-9.2A20,20,0,0,1,961.45,55Z" transform="translate(-28.32 -0.42)"/><path d="M1023.85,102.54q0,9.49-6.91,14.56t-19.8,5.07q-13,0-20.8-3.93V106.35q11.43,5.27,21.27,5.27,12.71,0,12.71-7.68a6.08,6.08,0,0,0-1.41-4.1,16.66,16.66,0,0,0-4.63-3.4,79.66,79.66,0,0,0-9-4q-11.19-4.34-15.15-8.67t-4-11.25a14.77,14.77,0,0,1,6.71-12.92q6.71-4.6,18.25-4.6a51.7,51.7,0,0,1,21.62,4.63L1018.34,70q-10.49-4.34-17.64-4.34-10.9,0-10.9,6.21a6.25,6.25,0,0,0,2.84,5.16q2.84,2.11,12.39,5.8a56.67,56.67,0,0,1,11.66,5.68,17,17,0,0,1,5.39,5.95A17.21,17.21,0,0,1,1023.85,102.54Z" transform="translate(-28.32 -0.42)"/><path d="M1128.09,61.23q0,13.42-8.79,20.57t-25,7.15h-8.91V121h-14V35.34H1096q16.05,0,24.05,6.56T1128.09,61.23Zm-42.71,15.94h7.44q10.78,0,15.82-3.75t5-11.72q0-7.38-4.51-11t-14.06-3.63h-9.73Z" transform="translate(-28.32 -0.42)"/><path d="M1176.6,55a33.18,33.18,0,0,1,6.86.59l-1.35,12.83a26,26,0,0,0-6.09-.7q-8.26,0-13.39,5.39t-5.13,14V121h-13.77V56.2h10.78l1.82,11.43h.7a25.67,25.67,0,0,1,8.41-9.2A20,20,0,0,1,1176.6,55Z" transform="translate(-28.32 -0.42)"/><path d="M1252.95,88.48q0,15.88-8.14,24.79t-22.68,8.91a31.07,31.07,0,0,1-16.05-4.1,27.07,27.07,0,0,1-10.72-11.78,40.11,40.11,0,0,1-3.75-17.81q0-15.76,8.09-24.61T1222.48,55q14.06,0,22.27,9.05T1252.95,88.48Zm-47.17,0q0,22.44,16.58,22.44,16.4,0,16.41-22.44,0-22.21-16.52-22.21-8.67,0-12.57,5.74T1205.78,88.48Z" transform="translate(-28.32 -0.42)"/><path d="M1323.5,56.2v7.56l-11.07,2.05a17.91,17.91,0,0,1,2.52,5,19.88,19.88,0,0,1,1,6.33q0,10-6.91,15.76t-19,5.74a30.86,30.86,0,0,1-5.62-.47q-4.45,2.75-4.45,6.45A3.58,3.58,0,0,0,1282,108q2.08,1.11,7.65,1.11h11.31q10.72,0,16.29,4.57t5.57,13.18a19.17,19.17,0,0,1-9.08,17q-9.08,6-26.25,6-13.24,0-20.21-4.69a15.15,15.15,0,0,1-7-13.36,14.22,14.22,0,0,1,3.78-10,20.25,20.25,0,0,1,10.58-5.65,10.34,10.34,0,0,1-4.54-3.78,9.53,9.53,0,0,1-1.79-5.48,9.43,9.43,0,0,1,2.05-6.15,23.66,23.66,0,0,1,6.09-5,18,18,0,0,1-8.17-7.06,20.77,20.77,0,0,1-3.13-11.46q0-10.55,6.65-16.35t19-5.8a46.24,46.24,0,0,1,5.77.38,36.55,36.55,0,0,1,4.54.79Zm-50.92,74.88a7.58,7.58,0,0,0,4,6.86q4,2.4,11.28,2.4,11.25,0,16.76-3.22t5.51-8.55q0-4.22-3-6t-11.22-1.79h-10.43q-5.92,0-9.4,2.78A9.13,9.13,0,0,0,1272.58,131.08Zm5.92-53.91q0,6.09,3.13,9.38t9,3.28q12,0,12-12.77,0-6.33-3-9.76t-9-3.43q-6,0-9.05,3.4T1278.5,77.17Z" transform="translate(-28.32 -0.42)"/><path d="M1368.38,55a33.18,33.18,0,0,1,6.86.59l-1.35,12.83a26,26,0,0,0-6.09-.7q-8.26,0-13.39,5.39t-5.13,14V121h-13.77V56.2h10.78l1.82,11.43h.7a25.67,25.67,0,0,1,8.41-9.2A20,20,0,0,1,1368.38,55Z" transform="translate(-28.32 -0.42)"/><path d="M1427.79,121l-2.75-9h-.47q-4.69,5.92-9.43,8.06a29.84,29.84,0,0,1-12.19,2.14q-9.55,0-14.91-5.16t-5.36-14.59q0-10,7.44-15.12t22.68-5.57l11.19-.35V77.93q0-6.21-2.9-9.29t-9-3.08a31.11,31.11,0,0,0-9.55,1.46,72.23,72.23,0,0,0-8.79,3.46l-4.45-9.84a48,48,0,0,1,11.54-4.19A53.14,53.14,0,0,1,1412.68,55q12.36,0,18.66,5.39t6.3,16.93V121Zm-20.51-9.37q7.5,0,12-4.19t4.54-11.75V90.06l-8.32.35q-9.73.35-14.15,3.25t-4.42,8.88a8.66,8.66,0,0,0,2.58,6.71Q1402.13,111.63,1407.29,111.63Z" transform="translate(-28.32 -0.42)"/><path d="M1511.46,121h-13.83V81q0-7.44-2.81-11.1T1486,66.27q-8,0-11.69,5.19t-3.72,17.26V121h-13.77V56.2h10.78l1.93,8.5h.7a18,18,0,0,1,7.82-7.15A25.23,25.23,0,0,1,1489.38,55q14.94,0,19.8,10.2h.94a19.75,19.75,0,0,1,8.09-7.5,25.67,25.67,0,0,1,12-2.7q11.6,0,16.9,5.86t5.3,17.87V121h-13.77V81q0-7.44-2.84-11.1t-8.82-3.66q-8,0-11.75,5t-3.72,15.38Z" transform="translate(-28.32 -0.42)"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2116.96 151"><title>Professional Certificate Logo</title><path d="M219,42A42,42,0,0,0,153.33,7.33,3,3,0,0,0,152,7H3a3,3,0,0,0-3,3V125a3,3,0,0,0,3,3H146v20a3,3,0,0,0,5.12,2.12l25.41-25.41,12,11.69c3.55,3.44,7.11,6.88,9.79,9.46C203.71,151,203.71,151,205,151a3,3,0,0,0,3-3V71a3,3,0,0,0-.07-.62A41.84,41.84,0,0,0,219,42Zm-6,0A36,36,0,1,1,177,6,36,36,0,0,1,213,42ZM6,122V13H146.66a41.9,41.9,0,0,0-.6,57.38A3,3,0,0,0,146,71v51Zm172.59-3.65a3,3,0,0,0-4.21,0L152,140.76v-65a41.91,41.91,0,0,0,50,0V141C196.07,135.33,186,125.54,178.59,118.35Z"/><path d="M170.88,56.12a3,3,0,0,0,4.24,0l21-21a3,3,0,0,0-4.24-4.24L173,49.76,161.12,37.88a3,3,0,1,0-4.24,4.24Z"/><path d="M97.31,37.79H57.55a3.46,3.46,0,1,0,0,6.92H89L45.36,88.3a3.46,3.46,0,0,0,4.89,4.89L93.85,49.6V81a3.46,3.46,0,0,0,6.92,0V41.25A3.46,3.46,0,0,0,97.31,37.79Z"/><path d="M316,56.23q0,13.42-8.79,20.57t-25,7.15h-8.91V116h-14V30.34H284Q300,30.34,308,36.9T316,56.23ZM273.31,72.17h7.44q10.78,0,15.82-3.75t5-11.72q0-7.38-4.51-11T283,42.05h-9.73Z"/><path d="M364.54,50a33.18,33.18,0,0,1,6.86.59l-1.35,12.83a26,26,0,0,0-6.09-.7q-8.26,0-13.39,5.39t-5.13,14V116H331.67V51.2h10.78l1.82,11.43h.7a25.67,25.67,0,0,1,8.41-9.2A20,20,0,0,1,364.54,50Z"/><path d="M440.89,83.48q0,15.88-8.14,24.79t-22.68,8.91a31.07,31.07,0,0,1-16.05-4.1,27.07,27.07,0,0,1-10.72-11.78,40.11,40.11,0,0,1-3.75-17.81q0-15.76,8.09-24.61T410.42,50q14.06,0,22.27,9.05T440.89,83.48Zm-47.17,0q0,22.44,16.58,22.44,16.4,0,16.41-22.44,0-22.21-16.52-22.21-8.67,0-12.57,5.74T393.72,83.48Z"/><path d="M489.23,61.63H473.41V116H459.58V61.63H448.92V55.18L459.58,51V46.74q0-11.48,5.39-17t16.46-5.54a44,44,0,0,1,14.3,2.4L492.1,37a31.76,31.76,0,0,0-9.73-1.64q-4.69,0-6.83,2.9T473.41,47V51.2h15.82Z"/><path d="M528.55,117.17q-15.12,0-23.64-8.82t-8.53-24.29q0-15.88,7.91-25T526,50q12.83,0,20.27,7.79t7.44,21.45V86.7H510.56q.29,9.43,5.1,14.5t13.54,5.07a50,50,0,0,0,10.69-1.08,56.05,56.05,0,0,0,10.63-3.6v11.19a42.31,42.31,0,0,1-10.2,3.4A62.52,62.52,0,0,1,528.55,117.17ZM526,60.45a13.84,13.84,0,0,0-10.52,4.16q-4,4.16-4.72,12.13h29.41q-.12-8-3.87-12.16T526,60.45Z"/><path d="M612.92,97.54q0,9.49-6.91,14.56t-19.8,5.07q-13,0-20.8-3.93V101.35q11.43,5.27,21.27,5.27,12.71,0,12.71-7.68a6.08,6.08,0,0,0-1.41-4.1,16.66,16.66,0,0,0-4.63-3.4,79.66,79.66,0,0,0-9-4q-11.19-4.34-15.15-8.67t-4-11.25A14.77,14.77,0,0,1,572,54.62Q578.7,50,590.25,50a51.7,51.7,0,0,1,21.62,4.63L607.41,65q-10.49-4.34-17.64-4.34-10.9,0-10.9,6.21a6.25,6.25,0,0,0,2.84,5.16q2.84,2.11,12.39,5.8a56.67,56.67,0,0,1,11.66,5.68,17,17,0,0,1,5.39,5.95A17.21,17.21,0,0,1,612.92,97.54Z"/><path d="M671.34,97.54q0,9.49-6.91,14.56t-19.8,5.07q-13,0-20.8-3.93V101.35q11.43,5.27,21.27,5.27,12.71,0,12.71-7.68a6.08,6.08,0,0,0-1.41-4.1,16.66,16.66,0,0,0-4.63-3.4,79.66,79.66,0,0,0-9-4q-11.19-4.34-15.15-8.67t-4-11.25a14.77,14.77,0,0,1,6.71-12.92q6.71-4.6,18.25-4.6a51.7,51.7,0,0,1,21.62,4.63L665.83,65q-10.49-4.34-17.64-4.34-10.9,0-10.9,6.21a6.25,6.25,0,0,0,2.84,5.16q2.84,2.11,12.39,5.8a56.67,56.67,0,0,1,11.66,5.68,17,17,0,0,1,5.39,5.95A17.21,17.21,0,0,1,671.34,97.54Z"/><path d="M685.4,34a7.62,7.62,0,0,1,2-5.68,7.88,7.88,0,0,1,5.77-2,7.71,7.71,0,0,1,5.65,2,7.62,7.62,0,0,1,2,5.68,7.48,7.48,0,0,1-2,5.54,7.64,7.64,0,0,1-5.65,2,7.81,7.81,0,0,1-5.77-2A7.48,7.48,0,0,1,685.4,34ZM700,116H686.22V51.2H700Z"/><path d="M777.16,83.48q0,15.88-8.14,24.79t-22.68,8.91a31.07,31.07,0,0,1-16.05-4.1,27.07,27.07,0,0,1-10.72-11.78,40.11,40.11,0,0,1-3.75-17.81q0-15.76,8.09-24.61T746.69,50q14.06,0,22.27,9.05T777.16,83.48Zm-47.17,0q0,22.44,16.58,22.44,16.4,0,16.41-22.44,0-22.21-16.52-22.21-8.67,0-12.57,5.74T730,83.48Z"/><path d="M850,116H836.16V76.16q0-7.5-3-11.19t-9.58-3.69q-8.73,0-12.77,5.16t-4,17.29V116H793V51.2h10.78l1.93,8.5h.7a19.17,19.17,0,0,1,8.32-7.15,27.89,27.89,0,0,1,12-2.52Q850,50,850,73.75Z"/><path d="M909.7,116l-2.75-9h-.47q-4.69,5.92-9.43,8.06a29.84,29.84,0,0,1-12.19,2.14q-9.55,0-14.91-5.16t-5.36-14.59q0-10,7.44-15.12t22.68-5.57l11.19-.35V72.93q0-6.21-2.9-9.29t-9-3.08A31.11,31.11,0,0,0,884.45,62a72.23,72.23,0,0,0-8.79,3.46l-4.45-9.84a48,48,0,0,1,11.54-4.19A53.14,53.14,0,0,1,894.58,50q12.36,0,18.66,5.39t6.3,16.93V116Zm-20.51-9.37q7.5,0,12-4.19t4.54-11.75V85.06l-8.32.35q-9.73.35-14.15,3.25t-4.42,8.88a8.66,8.66,0,0,0,2.58,6.71Q884,106.63,889.19,106.63Z"/><path d="M952.53,116H938.76V24.83h13.77Z"/><path d="M1041.3,41.12q-12.07,0-19,8.55t-6.91,23.61q0,15.76,6.65,23.85t19.25,8.09a50.58,50.58,0,0,0,10.55-1.08q5.1-1.08,10.61-2.78v12a64.3,64.3,0,0,1-22.85,3.81q-18.81,0-28.89-11.4t-10.08-32.61q0-13.36,4.89-23.38a34.91,34.91,0,0,1,14.15-15.35q9.26-5.33,21.74-5.33a54,54,0,0,1,24.26,5.51l-5,11.66a75.46,75.46,0,0,0-9.17-3.6A33.06,33.06,0,0,0,1041.3,41.12Z"/><path d="M1107.75,117.17q-15.12,0-23.64-8.82t-8.53-24.29q0-15.88,7.91-25T1105.23,50q12.83,0,20.27,7.79t7.44,21.45V86.7h-43.18q.29,9.43,5.1,14.5t13.54,5.07a50,50,0,0,0,10.69-1.08,56.05,56.05,0,0,0,10.63-3.6v11.19a42.31,42.31,0,0,1-10.2,3.4A62.52,62.52,0,0,1,1107.75,117.17Zm-2.52-56.72a13.84,13.84,0,0,0-10.52,4.16q-4,4.16-4.72,12.13h29.41q-.12-8-3.87-12.16T1105.23,60.45Z"/><path d="M1181.46,50a33.18,33.18,0,0,1,6.86.59L1187,63.44a26,26,0,0,0-6.09-.7q-8.26,0-13.39,5.39t-5.13,14V116h-13.77V51.2h10.78l1.82,11.43h.7a25.67,25.67,0,0,1,8.41-9.2A20,20,0,0,1,1181.46,50Z"/><path d="M1224.46,106a33.49,33.49,0,0,0,10.08-1.58v10.37a27.8,27.8,0,0,1-5.89,1.67,40.66,40.66,0,0,1-7.47.67q-19.57,0-19.57-20.62V61.63h-8.85V55.53l9.49-5,4.69-13.71h8.5V51.2h18.46V61.63h-18.46V96.31q0,5,2.49,7.35A9.08,9.08,0,0,0,1224.46,106Z"/><path d="M1246.67,34a7.62,7.62,0,0,1,2-5.68,7.88,7.88,0,0,1,5.77-2,7.71,7.71,0,0,1,5.65,2,7.62,7.62,0,0,1,2,5.68,7.48,7.48,0,0,1-2,5.54,7.64,7.64,0,0,1-5.65,2,7.81,7.81,0,0,1-5.77-2A7.48,7.48,0,0,1,1246.67,34Zm14.59,82h-13.77V51.2h13.77Z"/><path d="M1313.47,61.63h-15.82V116h-13.83V61.63h-10.66V55.18L1283.82,51V46.74q0-11.48,5.39-17t16.46-5.54a44,44,0,0,1,14.3,2.4L1316.34,37a31.76,31.76,0,0,0-9.73-1.64q-4.69,0-6.83,2.9t-2.14,8.7V51.2h15.82Zm10.2-27.6a7.62,7.62,0,0,1,2-5.68,7.88,7.88,0,0,1,5.77-2,7.71,7.71,0,0,1,5.65,2,7.62,7.62,0,0,1,2,5.68,7.48,7.48,0,0,1-2,5.54,7.64,7.64,0,0,1-5.65,2,7.81,7.81,0,0,1-5.77-2A7.48,7.48,0,0,1,1323.66,34Zm14.59,82h-13.77V51.2h13.77Z"/><path d="M1384.13,117.17q-14.71,0-22.35-8.58t-7.65-24.64q0-16.35,8-25.14T1385.25,50a43.33,43.33,0,0,1,18.46,3.81l-4.16,11.07q-8.73-3.4-14.41-3.4-16.82,0-16.82,22.32,0,10.9,4.19,16.38t12.28,5.48a35.22,35.22,0,0,0,17.4-4.57v12a27.2,27.2,0,0,1-7.88,3.11A47.35,47.35,0,0,1,1384.13,117.17Z"/><path d="M1458,116l-2.75-9h-.47q-4.69,5.92-9.43,8.06a29.84,29.84,0,0,1-12.19,2.14q-9.55,0-14.91-5.16t-5.36-14.59q0-10,7.44-15.12T1443,76.74l11.19-.35V72.93q0-6.21-2.9-9.29t-9-3.08a31.11,31.11,0,0,0-9.55,1.46,72.23,72.23,0,0,0-8.79,3.46l-4.45-9.84A48,48,0,0,1,1431,51.46,53.14,53.14,0,0,1,1442.84,50q12.36,0,18.66,5.39t6.3,16.93V116Zm-20.51-9.37q7.5,0,12-4.19T1454,90.69V85.06l-8.32.35q-9.73.35-14.15,3.25t-4.42,8.88a8.66,8.66,0,0,0,2.58,6.71Q1432.3,106.63,1437.45,106.63Z"/><path d="M1511.16,106a33.49,33.49,0,0,0,10.08-1.58v10.37a27.8,27.8,0,0,1-5.89,1.67,40.66,40.66,0,0,1-7.47.67q-19.57,0-19.57-20.62V61.63h-8.85V55.53l9.49-5,4.69-13.71h8.5V51.2h18.46V61.63h-18.46V96.31q0,5,2.49,7.35A9.08,9.08,0,0,0,1511.16,106Z"/><path d="M1562.49,117.17q-15.12,0-23.64-8.82t-8.53-24.29q0-15.88,7.91-25T1560,50q12.83,0,20.27,7.79t7.44,21.45V86.7H1544.5q.29,9.43,5.1,14.5t13.54,5.07a50,50,0,0,0,10.69-1.08,56.05,56.05,0,0,0,10.63-3.6v11.19a42.31,42.31,0,0,1-10.2,3.4A62.52,62.52,0,0,1,1562.49,117.17ZM1560,60.45a13.84,13.84,0,0,0-10.52,4.16q-4,4.16-4.72,12.13h29.41q-.12-8-3.87-12.16T1560,60.45Z"/><path d="M1692.69,56.23q0,13.42-8.79,20.57t-25,7.15H1650V116h-14V30.34h24.67q16.05,0,24.05,6.56T1692.69,56.23ZM1650,72.17h7.44q10.78,0,15.82-3.75t5-11.72q0-7.38-4.51-11t-14.06-3.63H1650Z"/><path d="M1741.2,50a33.18,33.18,0,0,1,6.86.59l-1.35,12.83a26,26,0,0,0-6.09-.7q-8.26,0-13.39,5.39t-5.13,14V116h-13.77V51.2h10.78l1.82,11.43h.7a25.67,25.67,0,0,1,8.41-9.2A20,20,0,0,1,1741.2,50Z"/><path d="M1817.55,83.48q0,15.88-8.14,24.79t-22.68,8.91a31.07,31.07,0,0,1-16.05-4.1A27.07,27.07,0,0,1,1760,101.29a40.11,40.11,0,0,1-3.75-17.81q0-15.76,8.09-24.61T1787.08,50q14.06,0,22.27,9.05T1817.55,83.48Zm-47.17,0q0,22.44,16.58,22.44,16.4,0,16.41-22.44,0-22.21-16.52-22.21-8.67,0-12.57,5.74T1770.38,83.48Z"/><path d="M1888.1,51.2v7.56L1877,60.8a17.91,17.91,0,0,1,2.52,5,19.88,19.88,0,0,1,1,6.33q0,10-6.91,15.76t-19,5.74a30.86,30.86,0,0,1-5.62-.47q-4.45,2.75-4.45,6.45a3.58,3.58,0,0,0,2.08,3.34q2.08,1.11,7.65,1.11h11.31q10.72,0,16.29,4.57t5.57,13.18a19.17,19.17,0,0,1-9.08,17q-9.08,6-26.25,6-13.24,0-20.21-4.69a15.15,15.15,0,0,1-7-13.36,14.22,14.22,0,0,1,3.78-10,20.25,20.25,0,0,1,10.58-5.65,10.34,10.34,0,0,1-4.54-3.78,9.53,9.53,0,0,1-1.79-5.48,9.43,9.43,0,0,1,2.05-6.15,23.66,23.66,0,0,1,6.09-5,18,18,0,0,1-8.17-7.06,20.77,20.77,0,0,1-3.13-11.46q0-10.55,6.65-16.35t19-5.8a46.24,46.24,0,0,1,5.77.38,36.55,36.55,0,0,1,4.54.79Zm-50.92,74.88a7.58,7.58,0,0,0,4,6.86q4,2.4,11.28,2.4,11.25,0,16.76-3.22t5.51-8.55q0-4.22-3-6t-11.22-1.79h-10.43q-5.92,0-9.4,2.78A9.13,9.13,0,0,0,1837.18,126.08Zm5.92-53.91q0,6.09,3.13,9.38t9,3.28q12,0,12-12.77,0-6.33-3-9.76t-9-3.43q-6,0-9.05,3.4T1843.1,72.17Z"/><path d="M1933,50a33.18,33.18,0,0,1,6.86.59l-1.35,12.83a26,26,0,0,0-6.09-.7q-8.26,0-13.39,5.39t-5.13,14V116h-13.77V51.2h10.78l1.82,11.43h.7a25.67,25.67,0,0,1,8.41-9.2A20,20,0,0,1,1933,50Z"/><path d="M1992.39,116l-2.75-9h-.47q-4.69,5.92-9.43,8.06a29.84,29.84,0,0,1-12.19,2.14q-9.55,0-14.91-5.16t-5.36-14.59q0-10,7.44-15.12t22.68-5.57l11.19-.35V72.93q0-6.21-2.9-9.29t-9-3.08a31.11,31.11,0,0,0-9.55,1.46,72.23,72.23,0,0,0-8.79,3.46l-4.45-9.84a48,48,0,0,1,11.54-4.19A53.14,53.14,0,0,1,1977.28,50q12.36,0,18.66,5.39t6.3,16.93V116Zm-20.51-9.37q7.5,0,12-4.19t4.54-11.75V85.06l-8.32.35q-9.73.35-14.15,3.25t-4.42,8.88a8.66,8.66,0,0,0,2.58,6.71Q1966.73,106.63,1971.89,106.63Z"/><path d="M2076.07,116h-13.83V76q0-7.44-2.81-11.1t-8.79-3.66q-8,0-11.69,5.19t-3.72,17.26V116h-13.77V51.2h10.78l1.93,8.5h.7a18,18,0,0,1,7.82-7.15A25.23,25.23,0,0,1,2054,50q14.94,0,19.8,10.2h.94a19.75,19.75,0,0,1,8.09-7.5,25.67,25.67,0,0,1,12-2.7q11.6,0,16.9,5.86t5.3,17.87V116H2103.2V76q0-7.44-2.84-11.1t-8.82-3.66q-8,0-11.75,5t-3.72,15.38Z"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1198.33 151"><title>XSeries Program Logo</title><path d="M219,42A42,42,0,0,0,153.33,7.33,3,3,0,0,0,152,7H3a3,3,0,0,0-3,3V125a3,3,0,0,0,3,3H146v20a3,3,0,0,0,5.12,2.12l25.41-25.41,12,11.69c3.55,3.44,7.11,6.88,9.79,9.46C203.71,151,203.71,151,205,151a3,3,0,0,0,3-3V71a3,3,0,0,0-.07-.62A41.84,41.84,0,0,0,219,42Zm-6,0A36,36,0,1,1,177,6,36,36,0,0,1,213,42ZM6,122V13H146.66a41.9,41.9,0,0,0-.6,57.38A3,3,0,0,0,146,71v51Zm172.59-3.65a3,3,0,0,0-4.21,0L152,140.76v-65a41.91,41.91,0,0,0,50,0V141C196.07,135.33,186,125.54,178.59,118.35Z"/><path d="M170.88,56.12a3,3,0,0,0,4.24,0l21-21a3,3,0,0,0-4.24-4.24L173,49.76,161.12,37.88a3,3,0,1,0-4.24,4.24Z"/><path d="M109,99h-4.62l-27-31.5L105.24,35h2.91a3,3,0,1,0,0-6H92.71a3,3,0,0,0,0,6h4.62L73.43,62.89,49.52,35h3.76a3,3,0,0,0,0-6H37.86a3,3,0,0,0,0,6h3.76L69.48,67.5,42.48,99H37a3,3,0,0,0,0,6H54.14a3,3,0,1,0,0-6H50.38l23-26.89L96.48,99H91.86a3,3,0,1,0,0,6H109a3,3,0,0,0,0-6Z"/><path d="M326.75,116.67H310.63l-21.45-35-21.62,35h-15L281,72.25,254.38,31H270l19.8,32.4L309.58,31H324.7L297.92,72.49Z"/><path d="M387.68,93.41q0,11.43-8.26,17.93t-22.79,6.5q-14.53,0-23.79-4.51V100.08a64.64,64.64,0,0,0,12.45,4.34A52.79,52.79,0,0,0,357.57,106q8.32,0,12.28-3.16a10.32,10.32,0,0,0,4-8.5,10.65,10.65,0,0,0-3.63-8.14q-3.63-3.34-15-7.91-11.72-4.75-16.52-10.84a22.93,22.93,0,0,1-4.8-14.65q0-10.72,7.62-16.87t20.45-6.15a60.09,60.09,0,0,1,24.49,5.39l-4.45,11.43q-11.43-4.8-20.39-4.8-6.8,0-10.31,3a9.72,9.72,0,0,0-3.52,7.82,11,11,0,0,0,1.41,5.71,14.36,14.36,0,0,0,4.63,4.48,78.15,78.15,0,0,0,11.6,5.57q9.43,3.93,13.83,7.32a21.56,21.56,0,0,1,6.45,7.68A23.09,23.09,0,0,1,387.68,93.41Z"/><path d="M431.1,117.84q-15.12,0-23.64-8.82t-8.53-24.29q0-15.88,7.91-25t21.74-9.08q12.83,0,20.27,7.79t7.44,21.45v7.44H413.11q.29,9.43,5.1,14.5t13.54,5.07a50,50,0,0,0,10.69-1.08,56.05,56.05,0,0,0,10.63-3.6v11.19a42.31,42.31,0,0,1-10.2,3.4A62.6,62.6,0,0,1,431.1,117.84Zm-2.52-56.72a13.84,13.84,0,0,0-10.52,4.16q-4,4.16-4.72,12.13h29.41q-.12-8-3.87-12.16T428.58,61.12Z"/><path d="M504.81,50.69a33.18,33.18,0,0,1,6.86.59l-1.35,12.83a26,26,0,0,0-6.09-.7q-8.26,0-13.39,5.39t-5.13,14v33.87H471.94V51.86h10.78l1.82,11.43h.7a25.67,25.67,0,0,1,8.41-9.2A20,20,0,0,1,504.81,50.69Z"/><path d="M522.86,34.69a7.62,7.62,0,0,1,2-5.68,7.88,7.88,0,0,1,5.77-2,7.71,7.71,0,0,1,5.65,2,7.62,7.62,0,0,1,2,5.68,7.48,7.48,0,0,1-2,5.54,7.64,7.64,0,0,1-5.65,2,7.81,7.81,0,0,1-5.77-2A7.48,7.48,0,0,1,522.86,34.69Zm14.59,82H523.68V51.86h13.77Z"/><path d="M585.44,117.84q-15.12,0-23.64-8.82t-8.53-24.29q0-15.88,7.91-25t21.74-9.08q12.83,0,20.27,7.79t7.44,21.45v7.44H567.45q.29,9.43,5.1,14.5t13.54,5.07a50,50,0,0,0,10.69-1.08,56.05,56.05,0,0,0,10.63-3.6v11.19a42.31,42.31,0,0,1-10.2,3.4A62.6,62.6,0,0,1,585.44,117.84Zm-2.52-56.72a13.84,13.84,0,0,0-10.52,4.16q-4,4.16-4.72,12.13H597.1q-.12-8-3.87-12.16T582.92,61.12Z"/><path d="M669.81,98.21q0,9.49-6.91,14.56t-19.8,5.07q-13,0-20.8-3.93V102q11.43,5.27,21.27,5.27,12.71,0,12.71-7.68a6.08,6.08,0,0,0-1.41-4.1,16.66,16.66,0,0,0-4.63-3.4,79.66,79.66,0,0,0-9-4q-11.19-4.34-15.15-8.67t-4-11.25a14.77,14.77,0,0,1,6.71-12.92q6.71-4.6,18.25-4.6a51.7,51.7,0,0,1,21.62,4.63l-4.45,10.37q-10.49-4.34-17.64-4.34-10.9,0-10.9,6.21a6.25,6.25,0,0,0,2.84,5.16q2.84,2.11,12.39,5.8a56.67,56.67,0,0,1,11.66,5.68,17,17,0,0,1,5.39,5.95A17.21,17.21,0,0,1,669.81,98.21Z"/><path d="M774.05,56.9q0,13.42-8.79,20.57t-25,7.15h-8.91v32.05h-14V31H742q16.05,0,24.05,6.56T774.05,56.9ZM731.34,72.84h7.44q10.78,0,15.82-3.75t5-11.72q0-7.38-4.51-11t-14.06-3.63h-9.73Z"/><path d="M822.57,50.69a33.18,33.18,0,0,1,6.86.59l-1.35,12.83a26,26,0,0,0-6.09-.7q-8.26,0-13.39,5.39t-5.13,14v33.87H789.7V51.86h10.78l1.82,11.43h.7a25.67,25.67,0,0,1,8.41-9.2A20,20,0,0,1,822.57,50.69Z"/><path d="M898.92,84.15q0,15.88-8.14,24.79t-22.68,8.91a31.07,31.07,0,0,1-16.05-4.1A27.07,27.07,0,0,1,841.32,102a40.11,40.11,0,0,1-3.75-17.81q0-15.76,8.09-24.61t22.79-8.85q14.06,0,22.27,9.05T898.92,84.15Zm-47.17,0q0,22.44,16.58,22.44,16.4,0,16.41-22.44,0-22.21-16.52-22.21-8.67,0-12.57,5.74T851.75,84.15Z"/><path d="M969.46,51.86v7.56l-11.07,2.05a17.91,17.91,0,0,1,2.52,5,19.88,19.88,0,0,1,1,6.33q0,10-6.91,15.76t-19,5.74a30.86,30.86,0,0,1-5.62-.47q-4.45,2.75-4.45,6.45a3.58,3.58,0,0,0,2.08,3.34q2.08,1.11,7.65,1.11H946.9q10.72,0,16.29,4.57t5.57,13.18a19.17,19.17,0,0,1-9.08,17q-9.08,6-26.25,6-13.24,0-20.21-4.69a15.15,15.15,0,0,1-7-13.36,14.21,14.21,0,0,1,3.78-10,20.25,20.25,0,0,1,10.58-5.65,10.34,10.34,0,0,1-4.54-3.78,9.53,9.53,0,0,1-1.79-5.48,9.43,9.43,0,0,1,2.05-6.15,23.66,23.66,0,0,1,6.09-5,18,18,0,0,1-8.17-7.06,20.77,20.77,0,0,1-3.13-11.46q0-10.55,6.65-16.35t19-5.8a46.24,46.24,0,0,1,5.77.38,36.55,36.55,0,0,1,4.54.79Zm-50.92,74.88a7.57,7.57,0,0,0,4,6.86q4,2.4,11.28,2.4,11.25,0,16.76-3.22t5.51-8.55q0-4.22-3-6t-11.22-1.79H931.43q-5.92,0-9.4,2.78A9.12,9.12,0,0,0,918.54,126.74Zm5.92-53.91q0,6.09,3.13,9.38t9,3.28q12,0,12-12.77,0-6.33-3-9.76t-9-3.43q-6,0-9.05,3.4T924.46,72.84Z"/><path d="M1014.34,50.69a33.18,33.18,0,0,1,6.86.59l-1.35,12.83a26,26,0,0,0-6.09-.7q-8.26,0-13.39,5.39t-5.13,14v33.87H981.47V51.86h10.78l1.82,11.43h.7a25.67,25.67,0,0,1,8.41-9.2A20,20,0,0,1,1014.34,50.69Z"/><path d="M1073.76,116.67l-2.75-9h-.47q-4.69,5.92-9.43,8.06a29.85,29.85,0,0,1-12.19,2.14q-9.55,0-14.91-5.16t-5.36-14.59q0-10,7.44-15.12t22.68-5.57l11.19-.35V73.6q0-6.21-2.9-9.29t-9-3.08a31.11,31.11,0,0,0-9.55,1.46,72.23,72.23,0,0,0-8.79,3.46l-4.45-9.84a48,48,0,0,1,11.54-4.19,53.14,53.14,0,0,1,11.84-1.44q12.36,0,18.66,5.39T1083.6,73v43.65Zm-20.51-9.37q7.5,0,12-4.19t4.54-11.75V85.73l-8.32.35q-9.73.35-14.15,3.25t-4.42,8.88a8.66,8.66,0,0,0,2.58,6.71Q1048.09,107.29,1053.25,107.29Z"/><path d="M1157.43,116.67H1143.6v-40q0-7.44-2.81-11.1T1132,61.94q-8,0-11.69,5.19t-3.72,17.26v32.29h-13.77V51.86h10.78l1.93,8.5h.7a18,18,0,0,1,7.82-7.15,25.23,25.23,0,0,1,11.28-2.52q14.94,0,19.8,10.2h.94a19.75,19.75,0,0,1,8.09-7.5,25.67,25.67,0,0,1,12-2.7q11.6,0,16.9,5.86t5.3,17.87v42.25h-13.77v-40q0-7.44-2.84-11.1t-8.82-3.66q-8,0-11.75,5t-3.72,15.38Z"/></svg>
......@@ -85,6 +85,12 @@
_.each(enrollableCourseRuns, (function(courseRun) {
// eslint-disable-next-line no-param-reassign
courseRun.start_date = this.formatDate(courseRun.start);
// eslint-disable-next-line no-param-reassign
courseRun.end_date = this.formatDate(courseRun.end);
// This is used to render the date when selecting a course run to enroll in
// eslint-disable-next-line no-param-reassign
courseRun.dateString = this.formatDateString(courseRun);
}).bind(this));
return enrollableCourseRuns;
......@@ -115,12 +121,65 @@
return DateUtils.localize(context);
},
getCertificatePriceString: function(run) {
var verifiedSeat, currency;
if ('seats' in run && run.seats.length) {
// eslint-disable-next-line consistent-return
verifiedSeat = _.filter(run.seats, function(seat) {
if (['verified', 'professional', 'credit'].indexOf(seat.type) >= 0) {
return seat;
}
})[0];
currency = verifiedSeat.currency;
if (currency === 'USD') {
return '$' + verifiedSeat.price;
} else {
return verifiedSeat.price + ' ' + currency;
}
}
return null;
},
formatDateString: function(run) {
var pacingType = run.pacing_type,
dateString = '',
start = run.start_date || this.get('start_date'),
end = run.end_date || this.get('end_date'),
now = new Date(),
startDate = new Date(start),
endDate = new Date(end);
if (pacingType === 'self_paced') {
dateString = 'Self-paced';
if (start && startDate > now) {
dateString += ' - Starts ' + start;
} else if (end && endDate > now) {
dateString += ' - Ends ' + end;
} else if (end && endDate < now) {
dateString += ' - Ended ' + end;
}
} else if (pacingType === 'instructor_paced') {
if (start && end) {
dateString = start + ' - ' + end;
} else if (start) {
dateString = 'Starts ' + start;
} else if (end) {
dateString = 'Ends ' + end;
}
}
return dateString;
},
valueIsDefined: function(val) {
return !([undefined, 'None', null].indexOf(val) >= 0);
},
setActiveCourseRun: function(courseRun, userPreferences) {
var startDateString,
courseImageUrl;
if (courseRun) {
if (courseRun.advertised_start !== undefined && courseRun.advertised_start !== 'None') {
if (this.valueIsDefined(courseRun.advertised_start)) {
startDateString = courseRun.advertised_start;
} else {
startDateString = this.formatDate(courseRun.start, userPreferences);
......@@ -132,6 +191,7 @@
courseImageUrl = courseRun.course_image_url;
}
this.set({
certificate_url: courseRun.certificate_url,
course_image_url: courseImageUrl || '',
......@@ -148,8 +208,12 @@
mode_slug: courseRun.type,
start_date: startDateString,
upcoming_course_runs: this.getUpcomingCourseRuns(),
upgrade_url: courseRun.upgrade_url
upgrade_url: courseRun.upgrade_url,
price: this.getCertificatePriceString(courseRun)
});
// This is used to render the date for completed and in progress courses
this.set({dateString: this.formatDateString(courseRun)});
}
},
......
(function(define) {
'use strict';
define(['backbone',
'jquery',
'underscore',
'gettext',
'edx-ui-toolkit/js/utils/html-utils',
'text!../../../templates/learner_dashboard/certificate_status_2017.underscore',
'text!../../../templates/learner_dashboard/certificate_icon.underscore'
],
function(
Backbone,
$,
_,
gettext,
HtmlUtils,
certificateStatusTpl,
certificateIconTpl
) {
return Backbone.View.extend({
statusTpl: HtmlUtils.template(certificateStatusTpl),
iconTpl: HtmlUtils.template(certificateIconTpl),
initialize: function(options) {
this.$el = options.$el;
this.render();
},
render: function() {
var data = this.model.toJSON();
data = $.extend(data, {certificateSvg: this.iconTpl()});
HtmlUtils.setHtml(this.$el, this.statusTpl(data));
}
});
}
);
}).call(this, define || RequireJS.define);
(function(define) {
'use strict';
define(['backbone',
'jquery',
'underscore',
'gettext',
'edx-ui-toolkit/js/utils/html-utils',
'js/learner_dashboard/models/course_enroll_model',
'js/learner_dashboard/views/upgrade_message_view_2017',
'js/learner_dashboard/views/certificate_status_view_2017',
'js/learner_dashboard/views/course_enroll_view_2017',
'text!../../../templates/learner_dashboard/course_card_2017.underscore'
],
function(
Backbone,
$,
_,
gettext,
HtmlUtils,
EnrollModel,
UpgradeMessageView,
CertificateStatusView,
CourseEnrollView,
pageTpl
) {
return Backbone.View.extend({
className: 'program-course-card',
tpl: HtmlUtils.template(pageTpl),
initialize: function(options) {
this.enrollModel = new EnrollModel();
if (options.context) {
this.urlModel = new Backbone.Model(options.context.urls);
this.enrollModel.urlRoot = this.urlModel.get('commerce_api_url');
}
this.context = options.context || {};
this.render();
this.listenTo(this.model, 'change', this.render);
},
render: function() {
var data = $.extend(this.model.toJSON(), {
enrolled: this.context.enrolled || ''
});
HtmlUtils.setHtml(this.$el, this.tpl(data));
this.postRender();
},
postRender: function() {
var $upgradeMessage = this.$('.upgrade-message'),
$certStatus = this.$('.certificate-status');
this.enrollView = new CourseEnrollView({
$parentEl: this.$('.course-actions'),
model: this.model,
urlModel: this.urlModel,
enrollModel: this.enrollModel
});
if (this.model.get('upgrade_url')) {
this.upgradeMessage = new UpgradeMessageView({
$el: $upgradeMessage,
model: this.model
});
$certStatus.remove();
} else if (this.model.get('certificate_url')) {
this.certificateStatus = new CertificateStatusView({
$el: $certStatus,
model: this.model
});
$upgradeMessage.remove();
} else {
// Styles are applied to these elements which will be visible if they're empty.
$upgradeMessage.remove();
$certStatus.remove();
}
}
});
}
);
}).call(this, define || RequireJS.define);
(function(define) {
'use strict';
define(['backbone',
'jquery',
'underscore',
'gettext',
'edx-ui-toolkit/js/utils/html-utils',
'text!../../../templates/learner_dashboard/course_enroll_2017.underscore'
],
function(
Backbone,
$,
_,
gettext,
HtmlUtils,
pageTpl
) {
return Backbone.View.extend({
className: 'course-enroll-view',
tpl: HtmlUtils.template(pageTpl),
events: {
'click .enroll-button': 'handleEnroll'
},
initialize: function(options) {
this.$parentEl = options.$parentEl;
this.enrollModel = options.enrollModel;
this.urlModel = options.urlModel;
this.render();
},
render: function() {
var filledTemplate;
if (this.$parentEl && this.enrollModel) {
filledTemplate = this.tpl(this.model.toJSON());
HtmlUtils.setHtml(this.$el, filledTemplate);
HtmlUtils.setHtml(this.$parentEl, HtmlUtils.HTML(this.$el));
}
this.postRender();
},
postRender: function() {
if (this.urlModel) {
this.trackSelectionUrl = this.urlModel.get('track_selection_url');
}
},
handleEnroll: function() {
// Enrollment click event handled here
var courseRunKey = $('.run-select').val();
this.model.updateCourseRun(courseRunKey);
if (!this.model.get('is_enrolled')) {
// Create the enrollment.
this.enrollModel.save({
course_id: courseRunKey
}, {
success: _.bind(this.enrollSuccess, this),
error: _.bind(this.enrollError, this)
});
}
},
enrollSuccess: function() {
var courseRunKey = this.model.get('course_run_key');
window.analytics.track('edx.bi.user.program-details.enrollment');
if (this.trackSelectionUrl) {
// Go to track selection page
this.redirect(this.trackSelectionUrl + courseRunKey);
} else {
this.model.set({
is_enrolled: true
});
}
},
enrollError: function(model, response) {
if (response.status === 403 && response.responseJSON.user_message_url) {
/**
* Check if we've been blocked from the course
* because of country access rules.
* If so, redirect to a page explaining to the user
* why they were blocked.
*/
this.redirect(response.responseJSON.user_message_url);
} else if (this.trackSelectionUrl) {
/**
* Otherwise, go to the track selection page as usual.
* This can occur, for example, when a course does not
* have a free enrollment mode, so we can't auto-enroll.
*/
this.redirect(this.trackSelectionUrl + this.model.get('course_run_key'));
}
},
redirect: function(url) {
window.location.href = url;
}
});
}
);
}).call(this, define || RequireJS.define);
(function(define) {
'use strict';
define(['backbone',
'jquery',
'underscore',
'gettext',
'edx-ui-toolkit/js/utils/html-utils',
'js/learner_dashboard/collections/course_card_collection',
'js/learner_dashboard/views/program_header_view',
'js/learner_dashboard/views/collection_list_view',
'js/learner_dashboard/views/course_card_view',
'js/learner_dashboard/views/program_details_sidebar_view',
'text!../../../templates/learner_dashboard/program_details_view.underscore'
],
'jquery',
'underscore',
'gettext',
'edx-ui-toolkit/js/utils/html-utils',
'js/learner_dashboard/collections/course_card_collection',
'js/learner_dashboard/views/program_header_view_2017',
'js/learner_dashboard/views/collection_list_view',
'js/learner_dashboard/views/course_card_view_2017',
'js/learner_dashboard/views/program_details_sidebar_view',
'text!../../../templates/learner_dashboard/program_details_view_2017.underscore'
],
function(
Backbone,
$,
......@@ -34,15 +33,36 @@
initialize: function(options) {
this.options = options;
this.programModel = new Backbone.Model(this.options.programData);
this.courseCardCollection = new CourseCardCollection(
this.programModel.get('courses'),
this.courseData = new Backbone.Model(this.options.courseData);
this.completedCourseCollection = new CourseCardCollection(
this.courseData.get('completed') || [],
this.options.userPreferences
);
this.inProgressCourseCollection = new CourseCardCollection(
this.courseData.get('in_progress') || [],
this.options.userPreferences
);
);
this.remainingCourseCollection = new CourseCardCollection(
this.courseData.get('not_started') || [],
this.options.userPreferences
);
this.render();
},
render: function() {
HtmlUtils.setHtml(this.$el, this.tpl());
var completedCount = this.completedCourseCollection.length,
inProgressCount = this.inProgressCourseCollection.length,
remainingCount = this.remainingCourseCollection.length,
totalCount = completedCount + inProgressCount + remainingCount,
data = {
totalCount: totalCount,
inProgressCount: inProgressCount,
remainingCount: remainingCount,
completedCount: completedCount
};
data = $.extend(data, this.options.programData);
HtmlUtils.setHtml(this.$el, this.tpl(data));
this.postRender();
},
......@@ -50,16 +70,34 @@
this.headerView = new HeaderView({
model: new Backbone.Model(this.options)
});
new CollectionListView({
el: '.js-course-list',
childView: CourseCardView,
collection: this.courseCardCollection,
context: this.options,
titleContext: {
el: 'h2',
title: 'Course List'
}
}).render();
if (this.remainingCourseCollection.length > 0) {
new CollectionListView({
el: '.js-course-list-remaining',
childView: CourseCardView,
collection: this.remainingCourseCollection,
context: this.options
}).render();
}
if (this.completedCourseCollection.length > 0) {
new CollectionListView({
el: '.js-course-list-completed',
childView: CourseCardView,
collection: this.completedCourseCollection,
context: this.options
}).render();
}
if (this.inProgressCourseCollection.length > 0) {
// This is last because the context is modified below
new CollectionListView({
el: '.js-course-list-in-progress',
childView: CourseCardView,
collection: this.inProgressCourseCollection,
context: $.extend(this.options, {enrolled: gettext('Enrolled')})
}).render();
}
new SidebarView({
el: '.sidebar',
......
(function(define) {
'use strict';
define(['backbone',
'jquery',
'edx-ui-toolkit/js/utils/html-utils',
'text!../../../templates/learner_dashboard/program_header_view_2017.underscore',
'text!/static/images/programs/micromasters-program-details.svg',
'text!/static/images/programs/xseries-program-details.svg',
'text!/static/images/programs/professional-certificate-program-details.svg'
],
function(Backbone, $, HtmlUtils, pageTpl, MicroMastersLogo,
XSeriesLogo, ProfessionalCertificateLogo) {
return Backbone.View.extend({
breakpoints: {
min: {
medium: '768px',
large: '1180px'
}
},
el: '.js-program-header',
tpl: HtmlUtils.template(pageTpl),
initialize: function() {
this.render();
},
getLogo: function() {
var logo = false,
type = this.model.get('programData').type;
if (type === 'MicroMasters') {
logo = MicroMastersLogo;
} else if (type === 'XSeries') {
logo = XSeriesLogo;
} else if (type === 'Professional Certificate') {
logo = ProfessionalCertificateLogo;
}
return logo;
},
render: function() {
var data = $.extend(this.model.toJSON(), {
breakpoints: this.breakpoints,
logo: this.getLogo()
});
if (this.model.get('programData')) {
HtmlUtils.setHtml(this.$el, this.tpl(data));
}
}
});
}
);
}).call(this, define || RequireJS.define);
(function(define) {
'use strict';
define(['backbone',
'jquery',
'underscore',
'gettext',
'edx-ui-toolkit/js/utils/html-utils',
'text!../../../templates/learner_dashboard/upgrade_message_2017.underscore'
],
function(
Backbone,
$,
_,
gettext,
HtmlUtils,
upgradeMessageTpl
) {
return Backbone.View.extend({
messageTpl: HtmlUtils.template(upgradeMessageTpl),
initialize: function(options) {
this.$el = options.$el;
this.render();
},
render: function() {
var data = this.model.toJSON();
HtmlUtils.setHtml(this.$el, this.messageTpl(data));
}
});
}
);
}).call(this, define || RequireJS.define);
......@@ -744,6 +744,7 @@
'js/spec/learner_dashboard/program_details_header_spec.js',
'js/spec/learner_dashboard/course_card_view_spec.js',
'js/spec/learner_dashboard/course_enroll_view_spec.js',
'js/spec/learner_dashboard/course_enroll_view_spec_2017.js',
'js/spec/markdown_editor_spec.js',
'js/spec/dateutil_factory_spec.js',
'js/spec/navigation_spec.js',
......
......@@ -60,6 +60,10 @@
margin-bottom: $baseline/4;
font-size: font-size(small);
visibility: hidden;
.visible {
visibility: visible;
}
}
.no-action-message {
......
......@@ -224,6 +224,13 @@ $success-color: rgb(0, 155, 0) !default;
// #COLORS- EDX-SPECIFIC
// ----------------------------
// logo colors
$micromasters-color: #005585;
$xseries-color: #424242;
$professional-certificate-color: #9a1f60;
$zebra-stripe-color: rgb(249, 250, 252);
$divider-color: rgb(226,231,236);
// old color variables
// DEPRECATED: Do not continue to use these colors, instead use pattern libary and base colors above.
$dark-gray1: rgb(74,74,74) !default;
......@@ -326,6 +333,7 @@ $credit-color-base: rgb(244,195,0) !default; // accessible with black text
$staff-color: $uxpl-pink-base !default;
// ----------------------------
// #TYPOGRAPHY
// ----------------------------
......
<article class="course" role="region" aria-label="<%- content.display_name %>">
<a href="/courses/<%- course %>/about">
<section class="course-info" aria-hidden="true">
<h2 class="course-name">
<span class="course-organization"><%- org %></span>
<span class="course-code"><%- content.number %></span>
<span class="course-title"><%- content.display_name %></span>
</h2>
<div class="course-date" aria-hidden="true">
<%- interpolate(
gettext("Starts: %(start_date)s"),
{ start_date: start }, true
) %>
</div>
</section>
<div class="sr">
<ul>
<li><%- org %></li>
<li><%- content.number %></li>
<li><%- gettext("Starts") %><time itemprop="startDate" datetime="<%- start %>"><%- start %></time></li>
</ul>
</div>
</a>
</article>
<p class="certificate-status col-12 md-col-8">
<span class="card-msg"><%- gettext('Certificate Status:') %></span>
<span class="fa fa-check-circle" aria-hidden="true"></span>
<span class="certificate-status-msg"><%- gettext('Certificate Purchased') %></span>
</p>
<div class="section">
<div class="course-meta-container col-12 md-col-8 sm-col-12">
<div class="course-details">
<h5 class="course-title">
<% if ( marketing_url || course_url ) { %>
<a href="<%- marketing_url || course_url %>" class="course-title-link">
<%- title %>
</a>
<% } else { %>
<%- title %>
<% } %>
</h5>
<div class="course-text">
<% if (enrolled) { %>
<span class='enrolled'><%- enrolled %>: </span>
<% } %>
<% if (dateString) { %>
<span class="run-period"><%- dateString %></span>
<% } %>
</div>
</div>
<div class="course-actions col-12 md-col-4 sm-col-12"></div>
<div class="certificate-status"></div>
</div>
</div>
<div class="section action-msg-view"></div>
<div class="section upgrade-message"></div>
<% if (!is_enrolled) { %>
<% if (enrollable_course_runs.length > 0) { %>
<% if (enrollable_course_runs.length > 1) { %>
<div class="run-select-container">
<label class="select-choice" for="select-<%- course_key %>-run">
<%- gettext('Choose a course run:') %>
</label>
<select id="select-<%- course_key %>-run" class="run-select field-input input-select" autocomplete="off">
<% _.each (enrollable_course_runs, function(courseRun) { %>
<option
value="<%- courseRun.key %>"
<% if (key === courseRun.key) { %>
selected="selected"
<% }%>
>
<%- courseRun.dateString %>
</option>
<% }); %>
</select>
</div>
<% } %>
<div class="enroll-button">
<button type="button" class="btn-brand btn cta-primary">
<%- gettext('Enroll Now') %>
</button>
</div>
<% } else if (upcoming_course_runs.length > 0) {%>
<div class="no-action-message">
<%- gettext('Coming Soon') %>
</div>
<div class="enrollment-opens">
<%- gettext('Enrollment Opens on') %>
<span class="enrollment-open-date">
<%- upcoming_course_runs[0].enrollment_open_date %>
</span>
</div>
<% } else { %>
<div class="no-action-message">
<%- gettext('Not Currently Available') %>
</div>
<% } %>
<% } %>
......@@ -27,5 +27,5 @@ ProgramDetailsFactory2017({
<%block name="bodyclass">program-details</%block>
<main id="main" aria-label="Content" tabindex="-1">
<div class="js-program-details-wrapper"></div>
<div class="js-program-details-wrapper program-details-wrapper"></div>
</main>
<header class="js-program-header program-header full-width-banner"></header>
<div class="program-details-content">
<div class="js-program-progress-view"></div>
<div class="program-heading">
<% if (inProgressCount === totalCount) { %>
<h3 class="program-heading-title"><%- gettext('Congratulations!') %></h3>
<div class="program-heading-message">
<div><%- interpolate(gettext(
'You have successfully completed all the requirements for the %(title)s %(type)s.'),
{ title: title, type: type }, true) %>
</div>
</div>
<% } else { %>
<h3 class="program-heading-title"><%- gettext('Your Program Journey') %></h3>
<div class="program-heading-message">
<div>
<%- interpolate(gettext(
'Track and plan your progress through the %(count)s courses in this program.'),
{ count: totalCount }, true) %>
</div>
<div><%- gettext('To complete the program, you must earn a verified certificate for each course.') %></div>
</div>
<% } %>
</div>
<div class="course-list-headings">
<% if (inProgressCount) { %>
<div class="in-progress-group">
<h4 class="course-list-heading">
<span class="status"><%- gettext('COURSES IN PROGRESS') %></span>
<span class="count"><%- inProgressCount %></span>
</h4>
<div class="divider"></div>
<div class="course-list js-course-list-in-progress row"></div>
</div>
<% } %>
<% if (remainingCount) { %>
<div class="remaining-group">
<h4 class="course-list-heading">
<span class="status"><%- gettext('REMAINING COURSES') %></span>
<span class="count"><%- remainingCount %></span>
</h4>
<div class="divider"></div>
<div class="course-list js-course-list-remaining row"></div>
</div>
<% } %>
<div class="completed-group">
<h4 class="course-list-heading">
<span class="status"><%- gettext('COMPLETED COURSES') %></span>
<span class="count"><%- completedCount %></span>
</h4>
<div class="divider"></div>
<% if (completedCount) { %>
<div class="course-list js-course-list-completed row"></div>
<% } else { %>
<div class="motivating-section">
<p class='motivating-heading'><%- gettext("As you complete courses, you will see them listed here.") %></p>
<p class='motivating-message'><%- gettext('Complete courses on your schedule to ensure you stand out in your field!') %></p>
</div>
<% } %>
</div>
</div>
<aside class="js-course-sidebar"></aside>
</div>
<div class="program-details-header">
<div class="meta-info grid-container">
<% if (logo) { %>
<span aria-label="<%- gettext(programData.type) %>" class="<%- programData.type.toLowerCase() %> program-details-icon"><%= logo %></span>
<% } %>
<h2 class="hd-1 program-title"><%- programData.title %></h2>
</div>
<div class='authoring-organizations'>
<h2 class="heading">Institutions</h2>
<% if (programData.authoring_organizations.length) { %>
<div class="orgs">
<% _.each(programData.authoring_organizations, function(org) { %>
<img src="<%- org.certificate_logo_image_url || org.logo_image_url %>" class="org-logo" alt="<%- StringUtils.interpolate(
gettext('{organization}\'s logo'),
{organization: org.name}
) %>">
<% }) %>
</div>
<% } %>
</div>
</div>
<div class="message certificate-status col-12 md-col-8">
<span class="card-msg"><%- gettext('Certificate Status:') %></span>
<span><%- gettext('Needs verified certificate ') %></span>
<span class="price"> <%- price %></span>
</div>
<div class="action col-12 md-col-4">
<button href="<%- upgrade_url %>" type="button" class="btn-brand btn cta-primary upgrade-button">
<%- gettext('Buy Certificate') %>
</button>
</div>
......@@ -4,6 +4,7 @@ from collections import defaultdict
import datetime
from urlparse import urljoin
from dateutil.parser import parse
from django.conf import settings
from django.core.cache import cache
from django.core.urlresolvers import reverse
......@@ -337,7 +338,6 @@ class ProgramDataExtender(object):
required_mode = CourseMode.mode_for_course(self.course_run_key, required_mode_slug)
ecommerce = EcommerceService()
sku = getattr(required_mode, 'sku', None)
if ecommerce.is_enabled(self.user) and sku:
run_mode['upgrade_url'] = ecommerce.checkout_page_url(required_mode.sku)
else:
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment