@saasquatch/squatch-js 2.3.1-4 → 2.3.1-5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (20) hide show
  1. package/demo/generate.tsx +7 -0
  2. package/demo/templates/MintGA.ts +1 -1
  3. package/demo/templates/MintGAContainer.ts +1 -1
  4. package/demo/templates/MintGAContainerDisplayBlock.ts +45 -0
  5. package/demo/templates/QuirksMintGA.ts +1 -1
  6. package/demo/templates/QuirksMintGAContainer.ts +45 -0
  7. package/demo/templates/QuirksMintGAContainerDisplayBlock.ts +45 -0
  8. package/demo/templates/QuirksVanillaGA.ts +1 -1
  9. package/demo/templates/VanillaGA.ts +1 -1
  10. package/demo/templates/classic.ts +1 -1
  11. package/demo/toolbar.tsx +88 -35
  12. package/dist/squatch.WidgetApi.js +1395 -0
  13. package/dist/squatch.WidgetApi.min.js +8 -0
  14. package/dist/squatch.esm.js +1 -2
  15. package/dist/squatch.esm.js.map +1 -1
  16. package/dist/squatch.js +1 -2
  17. package/dist/squatch.js.map +1 -1
  18. package/dist/squatch.min.js +2 -2
  19. package/dist/stats.html +1 -1
  20. package/package.json +2 -2
package/demo/templates/classic.ts CHANGED
@@ -1,4 +1,4 @@
1
- export default {template:`<!doctype html>\n<!--[if lt IE 9]><html class=\"lt-ie9 ie\"><![endif]-->\n<!--[if IE 9]><html class=\"ie\"><![endif]-->\n<!--[if gt IE 9]><html lang=\"en\"><![endif]-->\n <head>\n <base target=\"_self\">\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n <title>Referral SaaSquatch Dollar Credit Theme</title>\n <meta name=\"description\" content=\"\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n\n <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/css?family=Lato:300,400,700\">\n <link rel=\"stylesheet\" href=\"https://d35vcmgdka52pk.cloudfront.net/theme/test_aojsrf4r06zi0/assets/DYUdQ6s9/css/widget.css?v=3\">\n\n \n\n<script>\n window.squatch = window.squatch || {};\n\n window.squatch.variables = {\n shareNotification: {\n success: 'Copied!',\n failure: 'Press Ctrl+C to copy'\n },\n lang: '',\n relativeTime: {\n future: '',\n past: '',\n s: '',\n ss: '',\n m: '',\n mm: '',\n h: '',\n hh: '',\n d: '',\n dd: '',\n M: '',\n MM: '',\n y: '',\n yy: '',\n }\n };\n\n window.squatch.user = {\n code : '',\n sharelink: 'http://short.staging.referralsaasquatch.com/m5lQ71',\n email : {\n share : {\n subject: 'Get+%2410+from+LSV2+Testing',\n body: 'Sign%20up%20for%20a%20LSV2%20Testing%20account%20and%20we%20both%20get%20%2410.%20Use%20this%20link%20http%3A%2F%2Fshort.staging.referralsaasquatch.com%2FmolQ71',\n mailToLink: 'mailto:?subject=Get%20%2410%20from%20LSV2%20Testing&body=Sign%20up%20for%20a%20LSV2%20Testing%20account%20and%20we%20both%20get%20%2410.%20Use%20this%20link%20http%3A%2F%2Fshort.staging.referralsaasquatch.com%2FmolQ71',\n },\n reminder: {\n subject: 'How%20do%20you%20like%20LSV2%20Testing%20so%20far%3F',\n body: 'Hey%2C%0A%20%0AI%20saw%20that%20you%20signed%20up%20for%20LSV2%20Testing.%20What%20do%20you%20think%20of%20it%20so%20far%3F%0A%20%0ABy%20the%20way%2C%20if%20you%5C%27ve%20lost%20the%20link%20to%20LSV2%20Testing%2C%20here%20it%20is%20again%20-%20http%3A%2F%2Fshort.staging.referralsaasquatch.com%2FmolQ71',\n mailToLink: 'mailto:?subject=How%20do%20you%20like%20LSV2%20Testing%20so%20far%3F&body=Hey%2C%0A%20%0AI%20saw%20that%20you%20signed%20up%20for%20LSV2%20Testing.%20What%20do%20you%20think%20of%20it%20so%20far%3F%0A%20%0ABy%20the%20way%2C%20if%20you%5C%27ve%20lost%20the%20link%20to%20LSV2%20Testing%2C%20here%20it%20is%20again%20-%20http%3A%2F%2Fshort.staging.referralsaasquatch.com%2FmolQ71',\n },\n type: 'UNKNOWN'\n },\n facebook: {\n title: 'Get+%2410',\n summary: 'Sign+up+for+a+LSV2+Testing+account+and+we+both+get+%2410.+Use+this+link+http%3A%2F%2Fshort.staging.referralsaasquatch.com%2Fm9lQ71',\n link: 'http://short.staging.referralsaasquatch.com/m9lQ71',\n\n shareImage: null,\n\n appId: '157382547792399',\n redirectUrl: 'http://app.referralsaasquatch.com/widget/close'\n },\n twitter: {\n message: 'Sign+up+for+a+LSV2+Testing+account+and+we+both+get+%2410.+Use+this+link+http%3A%2F%2Fshort.staging.referralsaasquatch.com%2FmMlQ71'\n },\n sms: {\n body: 'Sign%20up%20for%20a%20LSV2%20Testing%20account%20and%20we%20both%20get%20%2410.%20Use%20this%20link%20http%3A%2F%2Fshort.staging.referralsaasquatch.com%2FmalQ71'\n },\n whatsapp: {\n body: 'Sign%20up%20for%20a%20LSV2%20Testing%20account%20and%20we%20both%20get%20%2410.%20Use%20this%20link%20http%3A%2F%2Fshort.staging.referralsaasquatch.com%2FmFlQ71'\n },\n linkedin: {\n title: 'Get+%2410+from+LSV2+Testing',\n summary: 'Sign+up+for+a+LSV2+Testing+account+and+we+both+get+%2410.+Use+this+link+http%3A%2F%2Fshort.staging.referralsaasquatch.com%2Fm7lQ71',\n link: 'http://short.staging.referralsaasquatch.com/m7lQ71',\n \n shareImage: null,\n \n appId: '157382547792399',\n redirectUrl: 'http://app.referralsaasquatch.com/widget/close'\n },\n fallbackImg: 'https://www.gravatar.com/avatar/0?d=blank'\n };\n\n window.squatch.analytics = {\n attributes: {\n tenant : 'test_aojsrf4r06zi0',\n userId : '5b980d34e4b0cabee07f2cb0',\n accountId: 'AZJZSVG0LS1LB19R'\n }\n };\n\n window.squatch.mode = {\n widgetMode : 'POPUP',\n POPUP_MODE : 'POPUP',\n EMBED_MODE : 'EMBED',\n DEMO_MODE : 'DEMO',\n DEMO_EMBED_MODE: 'DEMO_EMBED',\n NOCONTENT_MODE : 'NOCONTENT'\n };\n\n</script>\n\n \n <script src=\"https://d35vcmgdka52pk.cloudfront.net/theme/test_aojsrf4r06zi0/assets/DYUdQ6s9/libs/mobile-detect.min.js?v=3\"></script>\n <script src=\"https://d35vcmgdka52pk.cloudfront.net/theme/test_aojsrf4r06zi0/assets/DYUdQ6s9/javascript/base.js?v=3\"></script>\n <script src=\"https://d35vcmgdka52pk.cloudfront.net/theme/test_aojsrf4r06zi0/assets/DYUdQ6s9/javascript/events.js?v=3\"></script>\n\n <!--[if lt IE 9]>\n <script src=\"https://d35vcmgdka52pk.cloudfront.net/theme/test_aojsrf4r06zi0/assets/DYUdQ6s9/libs/bind-polyfill.js?v=3\"></script>\n <script src=\"https://d35vcmgdka52pk.cloudfront.net/theme/test_aojsrf4r06zi0/assets/DYUdQ6s9/libs/html5shiv-printshiv.min.js?v=3\"></script>\n <![endif]-->\n\n <!--[if lte IE 9]>\n <script src=\"https://d35vcmgdka52pk.cloudfront.net/theme/test_aojsrf4r06zi0/assets/DYUdQ6s9/libs/matchMedia.js?v=3\"></script>\n <script src=\"https://d35vcmgdka52pk.cloudfront.net/theme/test_aojsrf4r06zi0/assets/DYUdQ6s9/libs/matchMedia.addListener.js?v=3\"></script>\n <![endif]-->\n\n <style>\n .squatch-container .squatch-title {\n color: #4486E1;\n }\n body .squatch-container {\n font-family: \"Helvetica Neue\",Helvetica,Arial,sans-serif;\n }\n </style>\n </head>\n\n <body>\n <main class=\"squatch-container squatch-container-popup\">\n <div class=\"squatch-body\">\n <h1 class=\"squatch-title\">\n <p>Give $10 and Get $10!</p>\n\n</h1>\n\n\n <button class=\"close squatch-header-close\" data-close-panel=\"#squatch-panel\">Close</button>\n\n <div class=\"squatch-lead\">\n <p>Give a friend $10 and receive $10 for yourself when they pay their first bill.</p>\n\n</div>\n\n <div class=\"squatch-cta\">\n <p>Share the link below or use the code <strong>CHESTERSCOTT</strong></p>\n\n</div>\n\n <div class=\"squatch-share\">\n <div class=\"form-group\">\n <div class=\"input-group\">\n <input class=\"form-control\" id=\"squatch-share-link\" value=\"http://short.staging.referralsaasquatch.com/m5lQ71\" readonly=\"readonly\">\n\n <span class=\"label label-default fade\" id=\"squatch-share-notification\">Copied!</span>\n\n <span class=\"input-group-btn\">\n <button class=\"btn btn-primary icon-btn copy\" data-clipboard-target=\"#squatch-share-link\" data-clipboard-notification=\"#squatch-share-notification\">\n <i class=\"icon icon-link\"></i>\n <span class=\"hidden-sm\">Copy</span>\n </button>\n </span>\n </div>\n </div>\n\n <div class=\"clearfix\">\n <div class=\"share-btn-container\">\n <a class=\"btn btn-email squatch-share-btn emailShare mobile-and-desktop\"\n target=\"_blank\">\n <i class=\"icon icon-mail\"></i>\n Email\n </a>\n\n <a class=\"btn btn-twitter squatch-share-btn twShare hidden\"\n target=\"_blank\">\n <i class=\"icon icon-twitter\"></i>\n Tweet\n </a>\n\n <a class=\"btn btn-twitter squatch-share-btn twMobile hidden\"\n target=\"_blank\">\n <i class=\"icon icon-twitter\"></i>\n Tweet\n </a>\n\n <a class=\"btn btn-sms squatch-share-btn smsShare mobile-only\"\n target=\"_blank\">\n <i class=\"icon icon-chat\"></i>\n SMS\n </a>\n\n <a class=\"btn btn-messenger squatch-share-btn messengerShare desktop-only\"\n target=\"_blank\">\n <i class=\"icon icon-messenger\"></i>\n Messenger\n </a>\n\n <a class=\"btn btn-messenger squatch-share-btn messengerMobile desktop-only\"\n target=\"_blank\">\n <i class=\"icon icon-messenger\"></i>\n Messenger\n </a>\n\n <a class=\"btn btn-facebook squatch-share-btn fbShare mobile-and-desktop\"\n target=\"_blank\">\n <i class=\"icon icon-facebook\"></i>\n Share\n </a>\n\n <a class=\"btn btn-facebook squatch-share-btn fbMobile mobile-and-desktop\"\n target=\"_blank\">\n <i class=\"icon icon-facebook\"></i>\n Share\n </a>\n\n <a class=\"btn btn-whatsapp squatch-share-btn whatsappShare mobile-only\"\n target=\"_blank\">\n <i class=\"icon icon-whatsapp\"></i>\n WhatsApp\n </a>\n \n <a class=\"btn btn-linkedin squatch-share-btn linkedinShare hidden\"\n target=\"_blank\">\n <i class=\"icon icon-linkedin\"></i>\n LinkedIn\n </a>\n\n <a class=\"btn btn-linkedin squatch-share-btn linkedinMobile hidden\"\n target=\"_blank\">\n <i class=\"icon icon-linkedin\"></i>\n LinkedIn\n </a>\n </div> \n </div>\n</div>\n\n </div>\n\n \n \n \n \n \n \n <div id=\"squatch-panel\">\n <h2 class=\"squatch-panel-title\">\n Rewards Dashboard\n</h2>\n\n<div class=\"squatch-stats\">\n <div class=\"squatch-stats-item\">\n <div class=\"squatch-stats-title\">9</div>\n\n <span class=\"squatch-stats-description\">Friends Referred</span>\n </div>\n\n <div class=\"squatch-stats-item\">\n <div class=\"squatch-stats-title text-green\">7</div>\n\n <span class=\"squatch-stats-description\">Rewards Earned</span>\n </div>\n\n <div class=\"squatch-stats-item\">\n <div class=\"squatch-stats-title\">9</div>\n\n <span class=\"squatch-stats-description\">Rewards Pending</span>\n </div>\n</div>\n\n <div class=\"squatch-referrals-title\">\n Referral Details\n</div>\n\n<div\n class=\"squatch-referrals\"\n id=\"squatch-referrals-scroll\"\n data-scroll-offset=\"0\"\n data-scroll-limit=\"9\">\n\n <table class=\"squatch-referrals-list\">\n \n\n \n \n <tr id=\"0\">\n \n\n \n <td>\n \n <img class=\"img-circle squatch-referrals-avatar\" src=\"https://secure.gravatar.com/avatar/417ef45bd70a0b392adb0e11b00e29ca?s&#x3D;40&amp;d&#x3D;mm&amp;r&#x3D;pg\">\n \n\n <div class=\"squatch-referrals-heading\">May</div>\n\n <div class=\"squatch-referrals-description\">\n <span class=\"hidden-sm\">\n \n \n Trial User\n \n \n </span>\n\n <span class=\"hidden-md\n \n text-yellow\n \n \">\n \n \n $10 Pending\n \n \n </span>\n </div>\n</td>\n\n<td class=\"hidden-sm\">\n <div class=\"squatch-referrals-heading\">\n \n \n Referred\n \n \n </div>\n\n <div class=\"squatch-referrals-description\" data-moment=\"true\">1536691726889</div>\n</td>\n<td>\n <i class=\"icon squatch-referrals-icon\n \n icon-attention text-yellow\n \n \"></i>\n\n <div class=\"squatch-referrals-heading hidden-sm\">\n \n Trial Signup\n \n </div>\n\n <div class=\"squatch-referrals-description hidden-sm\n \n text-yellow\n \n \">\n\n \n \n Credit Pending\n \n \n </div>\n</td>\n\n \n\n \n </tr>\n \n \n \n <tr id=\"1\">\n \n\n \n <td>\n \n <img class=\"img-circle squatch-referrals-avatar\" src=\"https://secure.gravatar.com/avatar/f3b4fd9f2f47bf93ae7fbdee29af4f42?s&#x3D;40&amp;d&#x3D;mm&amp;r&#x3D;pg\">\n \n\n <div class=\"squatch-referrals-heading\">Scott</div>\n\n <div class=\"squatch-referrals-description\">\n <span class=\"hidden-sm\">\n \n \n Trial User\n \n \n </span>\n\n <span class=\"hidden-md\n \n text-yellow\n \n \">\n \n \n $10 Pending\n \n \n </span>\n </div>\n</td>\n\n<td class=\"hidden-sm\">\n <div class=\"squatch-referrals-heading\">\n \n \n Referred\n \n \n </div>\n\n <div class=\"squatch-referrals-description\" data-moment=\"true\">1536693756260</div>\n</td>\n<td>\n <i class=\"icon squatch-referrals-icon\n \n icon-attention text-yellow\n \n \"></i>\n\n <div class=\"squatch-referrals-heading hidden-sm\">\n \n Trial Signup\n \n </div>\n\n <div class=\"squatch-referrals-description hidden-sm\n \n text-yellow\n \n \">\n\n \n \n Credit Pending\n \n \n </div>\n</td>\n\n \n\n \n </tr>\n \n \n \n <tr id=\"2\">\n \n\n \n <td>\n \n <img class=\"img-circle squatch-referrals-avatar\" src=\"https://secure.gravatar.com/avatar/7f95799a99751e54adb1c894df032842?s&#x3D;40&amp;d&#x3D;mm&amp;r&#x3D;pg\">\n \n\n <div class=\"squatch-referrals-heading\">Leo</div>\n\n <div class=\"squatch-referrals-description\">\n <span class=\"hidden-sm\">\n \n \n Trial User\n \n \n </span>\n\n <span class=\"hidden-md\n \n text-yellow\n \n \">\n \n \n $10 Pending\n \n \n </span>\n </div>\n</td>\n\n<td class=\"hidden-sm\">\n <div class=\"squatch-referrals-heading\">\n \n \n Referred\n \n \n </div>\n\n <div class=\"squatch-referrals-description\" data-moment=\"true\">1536698108598</div>\n</td>\n<td>\n <i class=\"icon squatch-referrals-icon\n \n icon-attention text-yellow\n \n \"></i>\n\n <div class=\"squatch-referrals-heading hidden-sm\">\n \n Trial Signup\n \n </div>\n\n <div class=\"squatch-referrals-description hidden-sm\n \n text-yellow\n \n \">\n\n \n \n Credit Pending\n \n \n </div>\n</td>\n\n \n\n \n </tr>\n \n \n \n <tr id=\"3\">\n \n\n \n <td>\n \n <img class=\"img-circle squatch-referrals-avatar\" src=\"https://secure.gravatar.com/avatar/d79d3e32c7eae3e2e6152741ce080cfb?s&#x3D;40&amp;d&#x3D;mm&amp;r&#x3D;pg\">\n \n\n <div class=\"squatch-referrals-heading\">Adeline</div>\n\n <div class=\"squatch-referrals-description\">\n <span class=\"hidden-sm\">\n \n \n Trial User\n \n \n </span>\n\n <span class=\"hidden-md\n \n text-yellow\n \n \">\n \n \n $10 Pending\n \n \n </span>\n </div>\n</td>\n\n<td class=\"hidden-sm\">\n <div class=\"squatch-referrals-heading\">\n \n \n Referred\n \n \n </div>\n\n <div class=\"squatch-referrals-description\" data-moment=\"true\">1536702292518</div>\n</td>\n<td>\n <i class=\"icon squatch-referrals-icon\n \n icon-attention text-yellow\n \n \"></i>\n\n <div class=\"squatch-referrals-heading hidden-sm\">\n \n Trial Signup\n \n </div>\n\n <div class=\"squatch-referrals-description hidden-sm\n \n text-yellow\n \n \">\n\n \n \n Credit Pending\n \n \n </div>\n</td>\n\n \n\n \n </tr>\n \n \n \n <tr id=\"4\">\n \n\n \n <td>\n \n <img class=\"img-circle squatch-referrals-avatar\" src=\"https://secure.gravatar.com/avatar/f35cec075facdc9220e5dbeb7be4430a?s&#x3D;40&amp;d&#x3D;mm&amp;r&#x3D;pg\">\n \n\n <div class=\"squatch-referrals-heading\">Virgie</div>\n\n <div class=\"squatch-referrals-description\">\n <span class=\"hidden-sm\">\n \n \n Trial User\n \n \n </span>\n\n <span class=\"hidden-md\n \n text-yellow\n \n \">\n \n \n $10 Pending\n \n \n </span>\n </div>\n</td>\n\n<td class=\"hidden-sm\">\n <div class=\"squatch-referrals-heading\">\n \n \n Referred\n \n \n </div>\n\n <div class=\"squatch-referrals-description\" data-moment=\"true\">1536859803744</div>\n</td>\n<td>\n <i class=\"icon squatch-referrals-icon\n \n icon-attention text-yellow\n \n \"></i>\n\n <div class=\"squatch-referrals-heading hidden-sm\">\n \n Trial Signup\n \n </div>\n\n <div class=\"squatch-referrals-description hidden-sm\n \n text-yellow\n \n \">\n\n \n \n Credit Pending\n \n \n </div>\n</td>\n\n \n\n \n </tr>\n \n \n \n <tr id=\"5\">\n \n\n \n <td>\n \n <img class=\"img-circle squatch-referrals-avatar\" src=\"https://secure.gravatar.com/avatar/f2d53a928dd2dcd18f11559f4b9acd49?s&#x3D;40&amp;d&#x3D;mm&amp;r&#x3D;pg\">\n \n\n <div class=\"squatch-referrals-heading\">Frederick</div>\n\n <div class=\"squatch-referrals-description\">\n <span class=\"hidden-sm\">\n \n \n Trial User\n \n \n </span>\n\n <span class=\"hidden-md\n \n text-yellow\n \n \">\n \n \n $10 Pending\n \n \n </span>\n </div>\n</td>\n\n<td class=\"hidden-sm\">\n <div class=\"squatch-referrals-heading\">\n \n \n Referred\n \n \n </div>\n\n <div class=\"squatch-referrals-description\" data-moment=\"true\">1536861433920</div>\n</td>\n<td>\n <i class=\"icon squatch-referrals-icon\n \n icon-attention text-yellow\n \n \"></i>\n\n <div class=\"squatch-referrals-heading hidden-sm\">\n \n Trial Signup\n \n </div>\n\n <div class=\"squatch-referrals-description hidden-sm\n \n text-yellow\n \n \">\n\n \n \n Credit Pending\n \n \n </div>\n</td>\n\n \n\n \n </tr>\n \n \n \n <tr id=\"6\">\n \n\n \n <td>\n \n <img class=\"img-circle squatch-referrals-avatar\" src=\"https://secure.gravatar.com/avatar/400af6e6095df76ca2b98c21e36cc883?s&#x3D;40&amp;d&#x3D;mm&amp;r&#x3D;pg\">\n \n\n <div class=\"squatch-referrals-heading\">Ralph</div>\n\n <div class=\"squatch-referrals-description\">\n <span class=\"hidden-sm\">\n \n \n Trial User\n \n \n </span>\n\n <span class=\"hidden-md\n \n text-yellow\n \n \">\n \n \n $10 Pending\n \n \n </span>\n </div>\n</td>\n\n<td class=\"hidden-sm\">\n <div class=\"squatch-referrals-heading\">\n \n \n Referred\n \n \n </div>\n\n <div class=\"squatch-referrals-description\" data-moment=\"true\">1536861648645</div>\n</td>\n<td>\n <i class=\"icon squatch-referrals-icon\n \n icon-attention text-yellow\n \n \"></i>\n\n <div class=\"squatch-referrals-heading hidden-sm\">\n \n Trial Signup\n \n </div>\n\n <div class=\"squatch-referrals-description hidden-sm\n \n text-yellow\n \n \">\n\n \n \n Credit Pending\n \n \n </div>\n</td>\n\n \n\n \n </tr>\n \n \n \n <tr id=\"7\">\n \n\n \n <td>\n \n <img class=\"img-circle squatch-referrals-avatar\" src=\"https://secure.gravatar.com/avatar/0487a092d8e7dcefc1f89f122b5eea2c?s&#x3D;40&amp;d&#x3D;mm&amp;r&#x3D;pg\">\n \n\n <div class=\"squatch-referrals-heading\">Francis</div>\n\n <div class=\"squatch-referrals-description\">\n <span class=\"hidden-sm\">\n \n \n Trial User\n \n \n </span>\n\n <span class=\"hidden-md\n \n text-yellow\n \n \">\n \n \n $10 Pending\n \n \n </span>\n </div>\n</td>\n\n<td class=\"hidden-sm\">\n <div class=\"squatch-referrals-heading\">\n \n \n Referred\n \n \n </div>\n\n <div class=\"squatch-referrals-description\" data-moment=\"true\">1536861727554</div>\n</td>\n<td>\n <i class=\"icon squatch-referrals-icon\n \n icon-attention text-yellow\n \n \"></i>\n\n <div class=\"squatch-referrals-heading hidden-sm\">\n \n Trial Signup\n \n </div>\n\n <div class=\"squatch-referrals-description hidden-sm\n \n text-yellow\n \n \">\n\n \n \n Credit Pending\n \n \n </div>\n</td>\n\n \n\n \n </tr>\n \n \n \n <tr id=\"8\">\n \n\n \n <td>\n \n <img class=\"img-circle squatch-referrals-avatar\" src=\"https://www.gravatar.com/avatar\">\n \n\n <div class=\"squatch-referrals-heading\">Second</div>\n\n <div class=\"squatch-referrals-description\">\n <span class=\"hidden-sm\">\n \n \n Trial User\n \n \n </span>\n\n <span class=\"hidden-md\n \n text-yellow\n \n \">\n \n \n $10 Pending\n \n \n </span>\n </div>\n</td>\n\n<td class=\"hidden-sm\">\n <div class=\"squatch-referrals-heading\">\n \n \n Referred\n \n \n </div>\n\n <div class=\"squatch-referrals-description\" data-moment=\"true\">1536861187652</div>\n</td>\n<td>\n <i class=\"icon squatch-referrals-icon\n \n icon-attention text-yellow\n \n \"></i>\n\n <div class=\"squatch-referrals-heading hidden-sm\">\n \n Trial Signup\n \n </div>\n\n <div class=\"squatch-referrals-description hidden-sm\n \n text-yellow\n \n \">\n\n \n \n Credit Pending\n \n \n </div>\n</td>\n\n \n\n \n </tr>\n \n \n\n \n\n \n </table>\n</div>\n\n<div class=\"squatch-referrals-actions\">\n <button class=\"btn btn-default disabled\" data-scroll-element=\"#squatch-referrals-scroll\" data-scroll-increment=\"-3\">Previous</button>\n\n <button class=\"btn btn-default\" data-close-panel=\"#squatch-panel\" data-scroll-reset=\"#squatch-referrals-scroll\">Hide Details</button>\n\n <button class=\"btn btn-default disabled\" data-scroll-element=\"#squatch-referrals-scroll\" data-scroll-increment=\"3\">View More</button>\n</div>\n\n <div class=\"squatch-attribution\">\n <a href=\"https://get.referralsaasquatch.com/powered-by/?co&#x3D;LSV2%20Testing\" target=\"_blank\">Powered By Saasquatch</a>\n</div>\n\n</div>\n\n<div class=\"squatch-actions\" data-referrals=\"9\"\n \n \n data-referredBy=\"0\"\n \n \n>\n <button data-open-panel=\"#squatch-panel\" class=\"btn btn-default\n \n \">\n \n Show Details\n \n </button>\n\n <div class=\"squatch-attribution\">\n <a href=\"https://get.referralsaasquatch.com/powered-by/?co&#x3D;LSV2%20Testing\" target=\"_blank\">Powered By Saasquatch</a>\n</div>\n\n</div>\n\n \n \n \n \n \n \n </main>\n\n <div id=\"cta\">\n <!doctype html>\n<head>\n <base target=\"_self\">\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n <title>Referral SaaSquatch Dollar Credit Theme</title>\n <meta name=\"description\" content=\"\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n\n <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/css?family=Lato:300,400,700\">\n <link rel=\"stylesheet\" href=\"https://d35vcmgdka52pk.cloudfront.net/theme/test_aojsrf4r06zi0/assets/DYUdQ6s9/css/cta-widget.css?v=3\">\n <script src=\"https://d35vcmgdka52pk.cloudfront.net/theme/test_aojsrf4r06zi0/assets/DYUdQ6s9/javascript/base.js?v=3\"></script>\n\n <style>\n body .cta-container {\n font-family: \"Helvetica Neue\",Helvetica,Arial,sans-serif;\n background-color: #4486E1;\n }\n </style>\n\n</head>\n<body>\n <main class=\"cta-container bottom\" style=\"width: 230px;\">\n <div class=\"wrap\">\n <p>Refer Friends For Rewards</p>\n\n <img class=\"icon\" src=\"https://d35vcmgdka52pk.cloudfront.net/theme/test_aojsrf4r06zi0/assets/DYUdQ6s9/images/cta-icon.png?v=3\">\n </div>\n </main>\n\n <script src=\"https://d35vcmgdka52pk.cloudfront.net/theme/test_aojsrf4r06zi0/assets/DYUdQ6s9/libs/ready.min.js?v=3\"></script>\n <script src=\"https://d35vcmgdka52pk.cloudfront.net/theme/test_aojsrf4r06zi0/assets/DYUdQ6s9/javascript/cta-widget.js?v=3\"></script>\n</body>\n</html>\n\n </div>\n\n <script src=\"https://d35vcmgdka52pk.cloudfront.net/theme/test_aojsrf4r06zi0/assets/DYUdQ6s9/libs/ready.min.js?v=3\"></script>\n <script src=\"https://d35vcmgdka52pk.cloudfront.net/theme/test_aojsrf4r06zi0/assets/DYUdQ6s9/libs/clipboard.min.js?v=3\"></script>\n <script src=\"https://d35vcmgdka52pk.cloudfront.net/theme/test_aojsrf4r06zi0/assets/DYUdQ6s9/libs/moment.min.js?v=3\"></script>\n <script src=\"https://d35vcmgdka52pk.cloudfront.net/theme/test_aojsrf4r06zi0/assets/DYUdQ6s9/javascript/widget.js?v=3\"></script>\n </body>\n</html>\n`,
1
+ export default {template:`<!doctype html><!--[if lt IE 9]><html class=\"lt-ie9 ie\"><![endif]--><!--[if IE 9]><html class=\"ie\"><![endif]--><!--[if gt IE 9]><html lang=\"en\"><![endif]--> <head> <base target=\"_self\"> <meta charset=\"utf-8\"> <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\"> <title>Referral SaaSquatch Dollar Credit Theme</title> <meta name=\"description\" content=\"\"> <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\"> <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/css?family=Lato:300,400,700\"> <link rel=\"stylesheet\" href=\"https://d35vcmgdka52pk.cloudfront.net/theme/test_aojsrf4r06zi0/assets/DYUdQ6s9/css/widget.css?v=3\"> <script> window.squatch = window.squatch || {}; window.squatch.variables = { shareNotification: { success: 'Copied!', failure: 'Press Ctrl+C to copy' }, lang: '', relativeTime: { future: '', past: '', s: '', ss: '', m: '', mm: '', h: '', hh: '', d: '', dd: '', M: '', MM: '', y: '', yy: '', } }; window.squatch.user = { code : '', sharelink: 'http://short.staging.referralsaasquatch.com/m5lQ71', email : { share : { subject: 'Get+%2410+from+LSV2+Testing', body: 'Sign%20up%20for%20a%20LSV2%20Testing%20account%20and%20we%20both%20get%20%2410.%20Use%20this%20link%20http%3A%2F%2Fshort.staging.referralsaasquatch.com%2FmolQ71', mailToLink: 'mailto:?subject=Get%20%2410%20from%20LSV2%20Testing&body=Sign%20up%20for%20a%20LSV2%20Testing%20account%20and%20we%20both%20get%20%2410.%20Use%20this%20link%20http%3A%2F%2Fshort.staging.referralsaasquatch.com%2FmolQ71', }, reminder: { subject: 'How%20do%20you%20like%20LSV2%20Testing%20so%20far%3F', body: 'Hey%2C%0A%20%0AI%20saw%20that%20you%20signed%20up%20for%20LSV2%20Testing.%20What%20do%20you%20think%20of%20it%20so%20far%3F%0A%20%0ABy%20the%20way%2C%20if%20you%5C%27ve%20lost%20the%20link%20to%20LSV2%20Testing%2C%20here%20it%20is%20again%20-%20http%3A%2F%2Fshort.staging.referralsaasquatch.com%2FmolQ71', mailToLink: 'mailto:?subject=How%20do%20you%20like%20LSV2%20Testing%20so%20far%3F&body=Hey%2C%0A%20%0AI%20saw%20that%20you%20signed%20up%20for%20LSV2%20Testing.%20What%20do%20you%20think%20of%20it%20so%20far%3F%0A%20%0ABy%20the%20way%2C%20if%20you%5C%27ve%20lost%20the%20link%20to%20LSV2%20Testing%2C%20here%20it%20is%20again%20-%20http%3A%2F%2Fshort.staging.referralsaasquatch.com%2FmolQ71', }, type: 'UNKNOWN' }, facebook: { title: 'Get+%2410', summary: 'Sign+up+for+a+LSV2+Testing+account+and+we+both+get+%2410.+Use+this+link+http%3A%2F%2Fshort.staging.referralsaasquatch.com%2Fm9lQ71', link: 'http://short.staging.referralsaasquatch.com/m9lQ71', shareImage: null, appId: '157382547792399', redirectUrl: 'http://app.referralsaasquatch.com/widget/close' }, twitter: { message: 'Sign+up+for+a+LSV2+Testing+account+and+we+both+get+%2410.+Use+this+link+http%3A%2F%2Fshort.staging.referralsaasquatch.com%2FmMlQ71' }, sms: { body: 'Sign%20up%20for%20a%20LSV2%20Testing%20account%20and%20we%20both%20get%20%2410.%20Use%20this%20link%20http%3A%2F%2Fshort.staging.referralsaasquatch.com%2FmalQ71' }, whatsapp: { body: 'Sign%20up%20for%20a%20LSV2%20Testing%20account%20and%20we%20both%20get%20%2410.%20Use%20this%20link%20http%3A%2F%2Fshort.staging.referralsaasquatch.com%2FmFlQ71' }, linkedin: { title: 'Get+%2410+from+LSV2+Testing', summary: 'Sign+up+for+a+LSV2+Testing+account+and+we+both+get+%2410.+Use+this+link+http%3A%2F%2Fshort.staging.referralsaasquatch.com%2Fm7lQ71', link: 'http://short.staging.referralsaasquatch.com/m7lQ71', shareImage: null, appId: '157382547792399', redirectUrl: 'http://app.referralsaasquatch.com/widget/close' }, fallbackImg: 'https://www.gravatar.com/avatar/0?d=blank' }; window.squatch.analytics = { attributes: { tenant : 'test_aojsrf4r06zi0', userId : '5b980d34e4b0cabee07f2cb0', accountId: 'AZJZSVG0LS1LB19R' } }; window.squatch.mode = { widgetMode : 'POPUP', POPUP_MODE : 'POPUP', EMBED_MODE : 'EMBED', DEMO_MODE : 'DEMO', DEMO_EMBED_MODE: 'DEMO_EMBED', NOCONTENT_MODE : 'NOCONTENT' };</script> <script src=\"https://d35vcmgdka52pk.cloudfront.net/theme/test_aojsrf4r06zi0/assets/DYUdQ6s9/libs/mobile-detect.min.js?v=3\"></script> <script src=\"https://d35vcmgdka52pk.cloudfront.net/theme/test_aojsrf4r06zi0/assets/DYUdQ6s9/javascript/base.js?v=3\"></script> <script src=\"https://d35vcmgdka52pk.cloudfront.net/theme/test_aojsrf4r06zi0/assets/DYUdQ6s9/javascript/events.js?v=3\"></script> <!--[if lt IE 9]> <script src=\"https://d35vcmgdka52pk.cloudfront.net/theme/test_aojsrf4r06zi0/assets/DYUdQ6s9/libs/bind-polyfill.js?v=3\"></script> <script src=\"https://d35vcmgdka52pk.cloudfront.net/theme/test_aojsrf4r06zi0/assets/DYUdQ6s9/libs/html5shiv-printshiv.min.js?v=3\"></script> <![endif]--> <!--[if lte IE 9]> <script src=\"https://d35vcmgdka52pk.cloudfront.net/theme/test_aojsrf4r06zi0/assets/DYUdQ6s9/libs/matchMedia.js?v=3\"></script> <script src=\"https://d35vcmgdka52pk.cloudfront.net/theme/test_aojsrf4r06zi0/assets/DYUdQ6s9/libs/matchMedia.addListener.js?v=3\"></script> <![endif]--> <style> .squatch-container .squatch-title { color: #4486E1; } body .squatch-container { font-family: \"Helvetica Neue\",Helvetica,Arial,sans-serif; } </style> </head> <body> <main class=\"squatch-container squatch-container-popup\"> <div class=\"squatch-body\"> <h1 class=\"squatch-title\"> <p>Give $10 and Get $10!</p></h1> <button class=\"close squatch-header-close\" data-close-panel=\"#squatch-panel\">Close</button> <div class=\"squatch-lead\"> <p>Give a friend $10 and receive $10 for yourself when they pay their first bill.</p></div> <div class=\"squatch-cta\"> <p>Share the link below or use the code <strong>CHESTERSCOTT</strong></p></div> <div class=\"squatch-share\"> <div class=\"form-group\"> <div class=\"input-group\"> <input class=\"form-control\" id=\"squatch-share-link\" value=\"http://short.staging.referralsaasquatch.com/m5lQ71\" readonly=\"readonly\"> <span class=\"label label-default fade\" id=\"squatch-share-notification\">Copied!</span> <span class=\"input-group-btn\"> <button class=\"btn btn-primary icon-btn copy\" data-clipboard-target=\"#squatch-share-link\" data-clipboard-notification=\"#squatch-share-notification\"> <i class=\"icon icon-link\"></i> <span class=\"hidden-sm\">Copy</span> </button> </span> </div> </div> <div class=\"clearfix\"> <div class=\"share-btn-container\"> <a class=\"btn btn-email squatch-share-btn emailShare mobile-and-desktop\" target=\"_blank\"> <i class=\"icon icon-mail\"></i> Email </a> <a class=\"btn btn-twitter squatch-share-btn twShare hidden\" target=\"_blank\"> <i class=\"icon icon-twitter\"></i> Tweet </a> <a class=\"btn btn-twitter squatch-share-btn twMobile hidden\" target=\"_blank\"> <i class=\"icon icon-twitter\"></i> Tweet </a> <a class=\"btn btn-sms squatch-share-btn smsShare mobile-only\" target=\"_blank\"> <i class=\"icon icon-chat\"></i> SMS </a> <a class=\"btn btn-messenger squatch-share-btn messengerShare desktop-only\" target=\"_blank\"> <i class=\"icon icon-messenger\"></i> Messenger </a> <a class=\"btn btn-messenger squatch-share-btn messengerMobile desktop-only\" target=\"_blank\"> <i class=\"icon icon-messenger\"></i> Messenger </a> <a class=\"btn btn-facebook squatch-share-btn fbShare mobile-and-desktop\" target=\"_blank\"> <i class=\"icon icon-facebook\"></i> Share </a> <a class=\"btn btn-facebook squatch-share-btn fbMobile mobile-and-desktop\" target=\"_blank\"> <i class=\"icon icon-facebook\"></i> Share </a> <a class=\"btn btn-whatsapp squatch-share-btn whatsappShare mobile-only\" target=\"_blank\"> <i class=\"icon icon-whatsapp\"></i> WhatsApp </a> <a class=\"btn btn-linkedin squatch-share-btn linkedinShare hidden\" target=\"_blank\"> <i class=\"icon icon-linkedin\"></i> LinkedIn </a> <a class=\"btn btn-linkedin squatch-share-btn linkedinMobile hidden\" target=\"_blank\"> <i class=\"icon icon-linkedin\"></i> LinkedIn </a> </div> </div></div> </div> <div id=\"squatch-panel\"> <h2 class=\"squatch-panel-title\"> Rewards Dashboard</h2><div class=\"squatch-stats\"> <div class=\"squatch-stats-item\"> <div class=\"squatch-stats-title\">9</div> <span class=\"squatch-stats-description\">Friends Referred</span> </div> <div class=\"squatch-stats-item\"> <div class=\"squatch-stats-title text-green\">7</div> <span class=\"squatch-stats-description\">Rewards Earned</span> </div> <div class=\"squatch-stats-item\"> <div class=\"squatch-stats-title\">9</div> <span class=\"squatch-stats-description\">Rewards Pending</span> </div></div> <div class=\"squatch-referrals-title\"> Referral Details</div><div class=\"squatch-referrals\" id=\"squatch-referrals-scroll\" data-scroll-offset=\"0\" data-scroll-limit=\"9\"> <table class=\"squatch-referrals-list\"> <tr id=\"0\"> <td> <img class=\"img-circle squatch-referrals-avatar\" src=\"https://secure.gravatar.com/avatar/417ef45bd70a0b392adb0e11b00e29ca?s&#x3D;40&amp;d&#x3D;mm&amp;r&#x3D;pg\"> <div class=\"squatch-referrals-heading\">May</div> <div class=\"squatch-referrals-description\"> <span class=\"hidden-sm\"> Trial User </span> <span class=\"hidden-md text-yellow \"> $10 Pending </span> </div></td><td class=\"hidden-sm\"> <div class=\"squatch-referrals-heading\"> Referred </div> <div class=\"squatch-referrals-description\" data-moment=\"true\">1536691726889</div></td><td> <i class=\"icon squatch-referrals-icon icon-attention text-yellow \"></i> <div class=\"squatch-referrals-heading hidden-sm\"> Trial Signup </div> <div class=\"squatch-referrals-description hidden-sm text-yellow \"> Credit Pending </div></td> </tr> <tr id=\"1\"> <td> <img class=\"img-circle squatch-referrals-avatar\" src=\"https://secure.gravatar.com/avatar/f3b4fd9f2f47bf93ae7fbdee29af4f42?s&#x3D;40&amp;d&#x3D;mm&amp;r&#x3D;pg\"> <div class=\"squatch-referrals-heading\">Scott</div> <div class=\"squatch-referrals-description\"> <span class=\"hidden-sm\"> Trial User </span> <span class=\"hidden-md text-yellow \"> $10 Pending </span> </div></td><td class=\"hidden-sm\"> <div class=\"squatch-referrals-heading\"> Referred </div> <div class=\"squatch-referrals-description\" data-moment=\"true\">1536693756260</div></td><td> <i class=\"icon squatch-referrals-icon icon-attention text-yellow \"></i> <div class=\"squatch-referrals-heading hidden-sm\"> Trial Signup </div> <div class=\"squatch-referrals-description hidden-sm text-yellow \"> Credit Pending </div></td> </tr> <tr id=\"2\"> <td> <img class=\"img-circle squatch-referrals-avatar\" src=\"https://secure.gravatar.com/avatar/7f95799a99751e54adb1c894df032842?s&#x3D;40&amp;d&#x3D;mm&amp;r&#x3D;pg\"> <div class=\"squatch-referrals-heading\">Leo</div> <div class=\"squatch-referrals-description\"> <span class=\"hidden-sm\"> Trial User </span> <span class=\"hidden-md text-yellow \"> $10 Pending </span> </div></td><td class=\"hidden-sm\"> <div class=\"squatch-referrals-heading\"> Referred </div> <div class=\"squatch-referrals-description\" data-moment=\"true\">1536698108598</div></td><td> <i class=\"icon squatch-referrals-icon icon-attention text-yellow \"></i> <div class=\"squatch-referrals-heading hidden-sm\"> Trial Signup </div> <div class=\"squatch-referrals-description hidden-sm text-yellow \"> Credit Pending </div></td> </tr> <tr id=\"3\"> <td> <img class=\"img-circle squatch-referrals-avatar\" src=\"https://secure.gravatar.com/avatar/d79d3e32c7eae3e2e6152741ce080cfb?s&#x3D;40&amp;d&#x3D;mm&amp;r&#x3D;pg\"> <div class=\"squatch-referrals-heading\">Adeline</div> <div class=\"squatch-referrals-description\"> <span class=\"hidden-sm\"> Trial User </span> <span class=\"hidden-md text-yellow \"> $10 Pending </span> </div></td><td class=\"hidden-sm\"> <div class=\"squatch-referrals-heading\"> Referred </div> <div class=\"squatch-referrals-description\" data-moment=\"true\">1536702292518</div></td><td> <i class=\"icon squatch-referrals-icon icon-attention text-yellow \"></i> <div class=\"squatch-referrals-heading hidden-sm\"> Trial Signup </div> <div class=\"squatch-referrals-description hidden-sm text-yellow \"> Credit Pending </div></td> </tr> <tr id=\"4\"> <td> <img class=\"img-circle squatch-referrals-avatar\" src=\"https://secure.gravatar.com/avatar/f35cec075facdc9220e5dbeb7be4430a?s&#x3D;40&amp;d&#x3D;mm&amp;r&#x3D;pg\"> <div class=\"squatch-referrals-heading\">Virgie</div> <div class=\"squatch-referrals-description\"> <span class=\"hidden-sm\"> Trial User </span> <span class=\"hidden-md text-yellow \"> $10 Pending </span> </div></td><td class=\"hidden-sm\"> <div class=\"squatch-referrals-heading\"> Referred </div> <div class=\"squatch-referrals-description\" data-moment=\"true\">1536859803744</div></td><td> <i class=\"icon squatch-referrals-icon icon-attention text-yellow \"></i> <div class=\"squatch-referrals-heading hidden-sm\"> Trial Signup </div> <div class=\"squatch-referrals-description hidden-sm text-yellow \"> Credit Pending </div></td> </tr> <tr id=\"5\"> <td> <img class=\"img-circle squatch-referrals-avatar\" src=\"https://secure.gravatar.com/avatar/f2d53a928dd2dcd18f11559f4b9acd49?s&#x3D;40&amp;d&#x3D;mm&amp;r&#x3D;pg\"> <div class=\"squatch-referrals-heading\">Frederick</div> <div class=\"squatch-referrals-description\"> <span class=\"hidden-sm\"> Trial User </span> <span class=\"hidden-md text-yellow \"> $10 Pending </span> </div></td><td class=\"hidden-sm\"> <div class=\"squatch-referrals-heading\"> Referred </div> <div class=\"squatch-referrals-description\" data-moment=\"true\">1536861433920</div></td><td> <i class=\"icon squatch-referrals-icon icon-attention text-yellow \"></i> <div class=\"squatch-referrals-heading hidden-sm\"> Trial Signup </div> <div class=\"squatch-referrals-description hidden-sm text-yellow \"> Credit Pending </div></td> </tr> <tr id=\"6\"> <td> <img class=\"img-circle squatch-referrals-avatar\" src=\"https://secure.gravatar.com/avatar/400af6e6095df76ca2b98c21e36cc883?s&#x3D;40&amp;d&#x3D;mm&amp;r&#x3D;pg\"> <div class=\"squatch-referrals-heading\">Ralph</div> <div class=\"squatch-referrals-description\"> <span class=\"hidden-sm\"> Trial User </span> <span class=\"hidden-md text-yellow \"> $10 Pending </span> </div></td><td class=\"hidden-sm\"> <div class=\"squatch-referrals-heading\"> Referred </div> <div class=\"squatch-referrals-description\" data-moment=\"true\">1536861648645</div></td><td> <i class=\"icon squatch-referrals-icon icon-attention text-yellow \"></i> <div class=\"squatch-referrals-heading hidden-sm\"> Trial Signup </div> <div class=\"squatch-referrals-description hidden-sm text-yellow \"> Credit Pending </div></td> </tr> <tr id=\"7\"> <td> <img class=\"img-circle squatch-referrals-avatar\" src=\"https://secure.gravatar.com/avatar/0487a092d8e7dcefc1f89f122b5eea2c?s&#x3D;40&amp;d&#x3D;mm&amp;r&#x3D;pg\"> <div class=\"squatch-referrals-heading\">Francis</div> <div class=\"squatch-referrals-description\"> <span class=\"hidden-sm\"> Trial User </span> <span class=\"hidden-md text-yellow \"> $10 Pending </span> </div></td><td class=\"hidden-sm\"> <div class=\"squatch-referrals-heading\"> Referred </div> <div class=\"squatch-referrals-description\" data-moment=\"true\">1536861727554</div></td><td> <i class=\"icon squatch-referrals-icon icon-attention text-yellow \"></i> <div class=\"squatch-referrals-heading hidden-sm\"> Trial Signup </div> <div class=\"squatch-referrals-description hidden-sm text-yellow \"> Credit Pending </div></td> </tr> <tr id=\"8\"> <td> <img class=\"img-circle squatch-referrals-avatar\" src=\"https://www.gravatar.com/avatar\"> <div class=\"squatch-referrals-heading\">Second</div> <div class=\"squatch-referrals-description\"> <span class=\"hidden-sm\"> Trial User </span> <span class=\"hidden-md text-yellow \"> $10 Pending </span> </div></td><td class=\"hidden-sm\"> <div class=\"squatch-referrals-heading\"> Referred </div> <div class=\"squatch-referrals-description\" data-moment=\"true\">1536861187652</div></td><td> <i class=\"icon squatch-referrals-icon icon-attention text-yellow \"></i> <div class=\"squatch-referrals-heading hidden-sm\"> Trial Signup </div> <div class=\"squatch-referrals-description hidden-sm text-yellow \"> Credit Pending </div></td> </tr> </table></div><div class=\"squatch-referrals-actions\"> <button class=\"btn btn-default disabled\" data-scroll-element=\"#squatch-referrals-scroll\" data-scroll-increment=\"-3\">Previous</button> <button class=\"btn btn-default\" data-close-panel=\"#squatch-panel\" data-scroll-reset=\"#squatch-referrals-scroll\">Hide Details</button> <button class=\"btn btn-default disabled\" data-scroll-element=\"#squatch-referrals-scroll\" data-scroll-increment=\"3\">View More</button></div> <div class=\"squatch-attribution\"> <a href=\"https://get.referralsaasquatch.com/powered-by/?co&#x3D;LSV2%20Testing\" target=\"_blank\">Powered By Saasquatch</a></div></div><div class=\"squatch-actions\" data-referrals=\"9\" data-referredBy=\"0\" > <button data-open-panel=\"#squatch-panel\" class=\"btn btn-default \"> Show Details </button> <div class=\"squatch-attribution\"> <a href=\"https://get.referralsaasquatch.com/powered-by/?co&#x3D;LSV2%20Testing\" target=\"_blank\">Powered By Saasquatch</a></div></div> </main> <div id=\"cta\"> <!doctype html><head> <base target=\"_self\"> <meta charset=\"utf-8\"> <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\"> <title>Referral SaaSquatch Dollar Credit Theme</title> <meta name=\"description\" content=\"\"> <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\"> <link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/css?family=Lato:300,400,700\"> <link rel=\"stylesheet\" href=\"https://d35vcmgdka52pk.cloudfront.net/theme/test_aojsrf4r06zi0/assets/DYUdQ6s9/css/cta-widget.css?v=3\"> <script src=\"https://d35vcmgdka52pk.cloudfront.net/theme/test_aojsrf4r06zi0/assets/DYUdQ6s9/javascript/base.js?v=3\"></script> <style> body .cta-container { font-family: \"Helvetica Neue\",Helvetica,Arial,sans-serif; background-color: #4486E1; } </style></head><body> <main class=\"cta-container bottom\" style=\"width: 230px;\"> <div class=\"wrap\"> <p>Refer Friends For Rewards</p> <img class=\"icon\" src=\"https://d35vcmgdka52pk.cloudfront.net/theme/test_aojsrf4r06zi0/assets/DYUdQ6s9/images/cta-icon.png?v=3\"> </div> </main> <script src=\"https://d35vcmgdka52pk.cloudfront.net/theme/test_aojsrf4r06zi0/assets/DYUdQ6s9/libs/ready.min.js?v=3\"></script> <script src=\"https://d35vcmgdka52pk.cloudfront.net/theme/test_aojsrf4r06zi0/assets/DYUdQ6s9/javascript/cta-widget.js?v=3\"></script></body></html> </div> <script src=\"https://d35vcmgdka52pk.cloudfront.net/theme/test_aojsrf4r06zi0/assets/DYUdQ6s9/libs/ready.min.js?v=3\"></script> <script src=\"https://d35vcmgdka52pk.cloudfront.net/theme/test_aojsrf4r06zi0/assets/DYUdQ6s9/libs/clipboard.min.js?v=3\"></script> <script src=\"https://d35vcmgdka52pk.cloudfront.net/theme/test_aojsrf4r06zi0/assets/DYUdQ6s9/libs/moment.min.js?v=3\"></script> <script src=\"https://d35vcmgdka52pk.cloudfront.net/theme/test_aojsrf4r06zi0/assets/DYUdQ6s9/javascript/widget.js?v=3\"></script> </body></html>`,
2
2
  user:{
3
3
  "id": "5b980d34e4b0cabee07f2cb0",
4
4
  "accountId": "AZJZSVG0LS1LB19R",
package/demo/toolbar.tsx CHANGED
@@ -1,5 +1,6 @@
1
- import React, { Component, version } from "react";
1
+ import React, { Component, useState, version } from "react";
2
2
  import { render } from "react-dom";
3
+ import squatch from "../dist/squatch";
3
4
 
4
5
  import {
5
6
  popup,
@@ -17,13 +18,6 @@ import { getVersions } from "./versions";
17
18
  import { delay } from "./util";
18
19
  import { widgets, worker } from "./generate";
19
20
  import { rest } from "msw";
20
- import classic from "./templates/classic";
21
- import MintGA from "./templates/MintGA";
22
- import VanillaGA from "./templates/VanillaGA";
23
-
24
- console.log("me old sandbox", window["sandbox"]);
25
-
26
- console.log("my worker", { worker });
27
21
 
28
22
  // 2. Define request handlers and response resolvers.
29
23
 
@@ -33,7 +27,7 @@ const widgetTypes = [
33
27
  "CONVERSION_WIDGET",
34
28
  "p/tuesday-test/w/referrerWidget",
35
29
  ];
36
- const staticVersions = ["HEAD", "latest", "alpha", "next"];
30
+ const staticVersions = ["HEAD", "latest", "alpha", "next", "local"];
37
31
 
38
32
  /**
39
33
  * Use the addUrlProps higher-order component to hook-in react-url-query.
@@ -111,6 +105,7 @@ class App extends Component {
111
105
  <UserList />
112
106
  <VersionList {...this.state} />
113
107
  <MockedWidgets />
108
+ <CustomMockedWidget />
114
109
  </div>
115
110
  <hr />
116
111
 
@@ -274,6 +269,7 @@ function UserList(props) {
274
269
  }
275
270
  function VersionList(props) {
276
271
  const { versions } = props;
272
+
277
273
  return (
278
274
  <details
279
275
  title={"Version: " + window["sandbox"].version || "Head"}
@@ -290,44 +286,69 @@ function VersionList(props) {
290
286
  script:
291
287
  v.toLocaleLowerCase() == "head"
292
288
  ? script
289
+ : v == "local"
290
+ ? `./squatchjs.min.js`
293
291
  : `https://unpkg.com/@saasquatch/squatch-js@${v}`,
294
292
  })}
295
293
  >
296
- {v}
294
+ <button>{v}</button>
297
295
  </a>
298
296
  ))}
299
297
  </details>
300
298
  );
301
299
  }
302
300
 
301
+ async function getMockWidget(widget) {
302
+ window["mockWidget"] = widget;
303
+ window["sandbox"].initObj = {
304
+ ...window["sandbox"].initObj,
305
+ engagementMedium: "EMBED",
306
+ };
307
+
308
+ worker.use(
309
+ rest.put(
310
+ "https://staging.referralsaasquatch.com/api/*",
311
+ (req, res, ctx) => {
312
+ return res(
313
+ ctx.delay(500),
314
+ ctx.status(202, "Mocked status"),
315
+ ctx.json(widgets[window["mockWidget"]])
316
+ );
317
+ }
318
+ )
319
+ );
320
+ document.getElementById("squatchembed").innerHTML = "";
321
+ window["squatch"].widgets().upsertUser(window["sandbox"].initObj);
322
+ // window.location.href = `/?widgetType=${widget}`;
323
+ }
324
+
325
+ async function getCustomWidget() {
326
+ window["sandbox"].initObj = {
327
+ ...window["sandbox"].initObj,
328
+ engagementMedium: "EMBED",
329
+ };
330
+
331
+ const value = document.getElementById("custom-widget")?.value;
332
+ worker.use(
333
+ rest.put(
334
+ "https://staging.referralsaasquatch.com/api/*",
335
+ (req, res, ctx) => {
336
+ return res(
337
+ ctx.delay(500),
338
+ ctx.status(202, "Mocked status"),
339
+ ctx.json({ jsOptions: {}, user: {}, template: value })
340
+ );
341
+ }
342
+ )
343
+ );
344
+ document.getElementById("squatchembed").innerHTML = "";
345
+ window["squatch"].widgets().upsertUser(window["sandbox"].initObj);
346
+ // window.location.href = `/?widgetType=${widget}`;
347
+ }
348
+
303
349
  function MockedWidgets(props) {
304
350
  const { versions } = props;
305
351
 
306
- async function getMockWidget(widget) {
307
- console.log("fetch");
308
- // window["squatch"].render()
309
- window["mockWidget"] = widget;
310
- window["sandbox"].initObj = {
311
- ...window["sandbox"].initObj,
312
- engagementMedium: "EMBED",
313
- };
314
-
315
- worker.use(
316
- rest.put(
317
- "https://staging.referralsaasquatch.com/api/*",
318
- (req, res, ctx) => {
319
- return res(
320
- ctx.delay(500),
321
- ctx.status(202, "Mocked status"),
322
- ctx.json(widgets[window["mockWidget"]])
323
- );
324
- }
325
- )
326
- );
327
- document.getElementById("squatchembed").innerHTML = "";
328
- window["squatch"].widgets().upsertUser(window["sandbox"].initObj);
329
- // window.location.href = `/?widgetType=${widget}`;
330
- }
331
352
  return (
332
353
  <details
333
354
  title={"Version: " + window["sandbox"].version || "Head"}
@@ -347,12 +368,44 @@ function MockedWidgets(props) {
347
368
  <button onClick={() => getMockWidget("MintGAContainer")}>
348
369
  Mint - With Container
349
370
  </button>
371
+ <button onClick={() => getMockWidget("QuirksMintGAContainer")}>
372
+ Quirks mode - Mint - With Container
373
+ </button>
374
+ <button onClick={() => getMockWidget("MintGAContainerDisplayBlock")}>
375
+ Mint - With Container + Display Block
376
+ </button>
377
+ <button onClick={() => getMockWidget("QuirksMintGAContainerDisplayBlock")}>
378
+ Quirks mode - Mint - With Container + Display Block
379
+ </button>
350
380
  <button onClick={() => getMockWidget("VanillaGANoContainer")}>
351
381
  Vanilla - No Container
352
382
  </button>
353
383
  </details>
354
384
  );
355
385
  }
386
+
387
+ function CustomMockedWidget(props) {
388
+ const { versions } = props;
389
+
390
+ return (
391
+ <details
392
+ title={"Version: " + window["sandbox"].version || "Head"}
393
+ key={0}
394
+ id={`dropdown-basic-1`}
395
+ >
396
+ <summary>Custom Mocked Widget</summary>
397
+ <textarea
398
+ id="custom-widget"
399
+ rows={15}
400
+ cols={70}
401
+ style={{ maxWidth: "100%" }}
402
+ ></textarea>
403
+ <div>
404
+ <button onClick={() => getCustomWidget()}>Load Widget</button>
405
+ </div>
406
+ </details>
407
+ );
408
+ }
356
409
  const root = document.getElementById("app");
357
410
 
358
411
  render(<App />, root);