diff --git a/app/assets/images/pages/play/modal/subscribe-background-blank.png b/app/assets/images/pages/play/modal/subscribe-background-blank.png new file mode 100644 index 000000000..8c13a3534 Binary files /dev/null and b/app/assets/images/pages/play/modal/subscribe-background-blank.png differ diff --git a/app/assets/images/pages/play/modal/subscribe-gems.png b/app/assets/images/pages/play/modal/subscribe-gems.png new file mode 100644 index 000000000..9f22df75c Binary files /dev/null and b/app/assets/images/pages/play/modal/subscribe-gems.png differ diff --git a/app/models/User.coffee b/app/models/User.coffee index 1a4ab7454..09157abd1 100644 --- a/app/models/User.coffee +++ b/app/models/User.coffee @@ -127,6 +127,7 @@ module.exports = class User extends CocoModel @fastVictoryModalGroup getGemPromptGroup: -> + # A/B Testing whether extra prompt when low gems leads to more gem purchases return @gemPromptGroup if @gemPromptGroup group = me.get('testGroupNumber') % 8 @gemPromptGroup = switch group @@ -136,6 +137,19 @@ module.exports = class User extends CocoModel application.tracker.identify gemPromptGroup: @gemPromptGroup unless me.isAdmin() @gemPromptGroup + getSubscribeCopyGroup: -> + # A/B Testing alternate subscribe modal copy + return @subscribeCopyGroup if @subscribeCopyGroup + group = me.get('testGroupNumber') % 6 + @subscribeCopyGroup = switch group + when 0, 1, 2 then 'original' + when 3, 4, 5 then 'new' + if /^en/.test(@get('preferredLanguage')) and not me.isAdmin() + application.tracker.identify subscribeCopyGroup: @subscribeCopyGroup + else + @subscribeCopyGroup = 'original' + @subscribeCopyGroup + isPremium: -> return false unless stripe = @get('stripe') return true if stripe.subscriptionID diff --git a/app/styles/play/modal/subscribe-modal.sass b/app/styles/play/modal/subscribe-modal.sass index 6d7a87f6e..8b3b24dbd 100644 --- a/app/styles/play/modal/subscribe-modal.sass +++ b/app/styles/play/modal/subscribe-modal.sass @@ -18,6 +18,11 @@ top: -61px left: 0px + #subscribe-gems + position: absolute + top: 155px + right: 65px + //- Header h1 @@ -80,6 +85,22 @@ text-decoration: underline cursor: pointer + #selling-points-BTest + position: absolute + left: 65px + top: 150px + width: 500px + font-weight: normal + line-height: 18px + color: black + font-family: $headings-font-family + font-size: 18px + + .point + overflow: none + text-align: left + margin: 20px + .popover z-index: 1050 diff --git a/app/templates/play/modal/subscribe-modal.jade b/app/templates/play/modal/subscribe-modal.jade index ecf13ba2d..ad308192c 100644 --- a/app/templates/play/modal/subscribe-modal.jade +++ b/app/templates/play/modal/subscribe-modal.jade @@ -7,24 +7,39 @@ #retrying-alert.alert.alert-danger(data-i18n="buy_gems.retrying") else - img(src="/images/pages/play/modal/subscribe-background.png")#subscribe-background - + if BTest + img(src="/images/pages/play/modal/subscribe-background-blank.png")#subscribe-background + img(src="/images/pages/play/modal/subscribe-gems.png")#subscribe-gems + else + img(src="/images/pages/play/modal/subscribe-background.png")#subscribe-background + h1(data-i18n="subscribe.subscribe_title") Subscribe div#close-modal span.glyphicon.glyphicon-remove - #selling-points - #point-levels.point - .blurb(data-i18n="subscribe.levels") - #point-heroes.point - .blurb(data-i18n="subscribe.heroes") - #point-gems.point - .blurb(data-i18n="subscribe.gems") - #point-items.point - .blurb(data-i18n="subscribe.items") + if BTest + #selling-points-BTest + #point-levels.point + .blurb(style="font-style:italic") "Great product ... I have been looking for a good tool to teach my kids programming." + #point-heroes.point + .blurb Join the CodeCombat subscription and get even more learn-to-code goodness! + #point-gems.point + .blurb For $#{price}/mo, you'll get access to bonus levels and 3500 extra gems per month! Players who complete bonus levels learn more programming and advance further in the game. + #point-items.point + .blurb There's no risk: 100% money back guarantee. + else + #selling-points + #point-levels.point + .blurb(data-i18n="subscribe.levels") + #point-heroes.point + .blurb(data-i18n="subscribe.heroes") + #point-gems.point + .blurb(data-i18n="subscribe.gems") + #point-items.point + .blurb(data-i18n="subscribe.items") - #parents-info(data-i18n="subscribe.parents") + #parents-info(data-i18n="subscribe.parents") button.btn.btn-lg.btn-illustrated.purchase-button(data-i18n="subscribe.subscribe_button") diff --git a/app/views/play/modal/SubscribeModal.coffee b/app/views/play/modal/SubscribeModal.coffee index 157e49dda..1f7a21980 100644 --- a/app/views/play/modal/SubscribeModal.coffee +++ b/app/views/play/modal/SubscribeModal.coffee @@ -28,6 +28,8 @@ module.exports = class SubscribeModal extends ModalView c = super() c.state = @state c.stateMessage = @stateMessage + c.price = @product.amount / 100 + c.BTest = me.getSubscribeCopyGroup() is 'new' return c afterRender: -> @@ -61,6 +63,7 @@ module.exports = class SubscribeModal extends ModalView # SALE LOGIC # overwrite amount with sale price # maybe also put in another description with details about how long it lasts, etc + # NOTE: Do not change this price without updating the context.price in getRenderData # options = { # description: 'Subscription. Half price for three months!' # amount: 499