@tamara-solution/checkout
Version:
Script will be embedded in merchant's site to checkout. The merchant's don't need to redirect to tamara's site.
23 lines (18 loc) • 8.23 kB
JavaScript
import { createElement } from '@/helpers/document-html'
function getPlaceholderElement(lang) {
const enLogo =
'<svg width="64" height="66" xmlns="http://www.w3.org/2000/svg"><path fill="#6dc8bf" d="M8.048 60.578a.802.802 0 0 0-.794.795c0 1.68-1.281 3.036-2.833 3.036-1.57 0-2.833-1.355-2.833-3.036V55.86h5.07a.802.802 0 0 0 .795-.795.802.802 0 0 0-.794-.795H1.588v-4.194a.802.802 0 0 0-.794-.795.802.802 0 0 0-.794.795v11.297C0 63.92 1.985 66 4.421 66s4.421-2.079 4.421-4.627a.802.802 0 0 0-.794-.795zm46.827-5.296c.27-.344.234-.85-.109-1.12a4.201 4.201 0 0 0-2.724-.977c-2.436 0-4.421 2.079-4.421 4.627v7.32c0 .434.36.796.794.796a.802.802 0 0 0 .794-.796v-7.32c0-1.68 1.28-3.036 2.833-3.036.631 0 1.227.217 1.714.614a.78.78 0 0 0 1.119-.108zM32.03 53.185c-1.498 0-2.833.795-3.627 1.988-.794-1.193-2.13-1.988-3.627-1.988-2.436 0-4.421 2.079-4.421 4.627v7.32c0 .434.36.796.794.796a.802.802 0 0 0 .794-.796v-7.32c0-1.68 1.281-3.036 2.833-3.036 1.552 0 2.833 1.355 2.833 3.036v7.32c0 .434.361.796.794.796a.802.802 0 0 0 .794-.796v-7.32c0-1.68 1.281-3.036 2.833-3.036 1.57 0 2.833 1.355 2.833 3.036v7.32c0 .434.361.796.794.796a.802.802 0 0 0 .794-.796v-7.32c0-2.548-1.985-4.627-4.42-4.627zm-17.576 0c-.992 0-1.949.343-2.725.976a.784.784 0 0 0-.108 1.12.78.78 0 0 0 1.119.11 2.663 2.663 0 0 1 1.714-.615c.09 0 .18 0 .27.018.037 0 .055 0 .091.018a.64.64 0 0 1 .18.036c.037 0 .073.018.09.018.055.018.11.036.163.036.036.018.072.018.09.036.055.018.109.036.145.055.036.018.054.018.09.036.054.018.108.054.144.072a.136.136 0 0 0 .073.036c.054.036.126.072.18.109.018.018.036.018.036.036.072.054.145.108.199.162l.054.055c.054.036.09.09.144.126.018.018.036.054.072.072.036.037.072.09.109.127.018.036.036.054.072.09s.072.09.09.127c.018.036.036.054.054.09.036.054.054.09.09.145.018.036.036.054.055.09.035.054.054.127.072.181.018.018.018.054.036.072.036.09.072.181.09.253 0 .018 0 .036.018.055.018.054.036.126.054.18h-2.96a4.231 4.231 0 0 0-4.222 4.23c0 2.548 1.985 4.627 4.421 4.627 1.137 0 2.111-.38 2.833-.777a.798.798 0 0 0 .794.777.802.802 0 0 0 .794-.795v-7.375c0-2.53-1.985-4.609-4.42-4.609zm-2.833 8.188a2.64 2.64 0 0 1 2.635-2.639h3.031v4.573c-.45.361-1.515 1.102-2.833 1.102-1.57 0-2.833-1.355-2.833-3.036zm30.189-8.188c-.992 0-1.949.343-2.725.976a.784.784 0 0 0-.108 1.12.78.78 0 0 0 1.119.11 2.664 2.664 0 0 1 1.714-.615c.09 0 .18 0 .27.018.037 0 .055 0 .091.018a.64.64 0 0 1 .18.036c.037 0 .073.018.09.018.055.018.109.036.163.036.036.018.072.018.09.036.054.018.109.036.145.055.036.018.054.018.09.036.054.018.108.054.144.072a.137.137 0 0 0 .072.036c.055.036.127.072.181.109.018.018.036.018.036.036.072.054.144.108.199.162l.054.055c.054.036.09.09.144.126.018.018.036.054.072.072.036.037.072.09.108.127.019.036.037.054.073.09s.072.09.09.127c.018.036.036.054.054.09.036.054.054.09.09.145.018.036.036.054.054.09.037.054.055.127.073.181.018.018.018.054.036.072.036.09.072.181.09.253 0 .018 0 .036.018.055.018.054.036.126.054.18h-2.96a4.231 4.231 0 0 0-4.222 4.23c0 2.548 1.985 4.627 4.421 4.627 1.137 0 2.111-.38 2.833-.777a.798.798 0 0 0 .794.777.802.802 0 0 0 .794-.795v-7.375c0-2.53-1.985-4.609-4.42-4.609zm-2.85 8.188a2.64 2.64 0 0 1 2.634-2.639h3.031v4.573c-.45.361-1.516 1.102-2.833 1.102-1.552 0-2.833-1.355-2.833-3.036zm20.084-8.188c-.993 0-1.95.343-2.725.976a.784.784 0 0 0-.108 1.12.78.78 0 0 0 1.118.11 2.663 2.663 0 0 1 1.715-.615c.09 0 .18 0 .27.018.036 0 .054 0 .09.018a.64.64 0 0 1 .18.036c.037 0 .073.018.091.018.054.018.108.036.163.036.036.018.072.018.09.036.054.018.108.036.144.055.036.018.054.018.09.036.055.018.109.054.145.072a.137.137 0 0 0 .072.036c.054.036.126.072.18.109.018.018.036.018.036.036.073.054.145.108.199.162l.054.055c.054.036.09.09.144.126.019.018.037.054.073.072.036.037.072.09.108.127a.316.316 0 0 0 .072.09.55.55 0 0 1 .09.127c.018.036.036.054.054.09.036.054.055.09.09.145.019.036.037.054.055.09a.542.542 0 0 1 .072.181c.018.018.018.054.036.072.036.09.054.163.09.253 0 .018.018.036.018.055a.64.64 0 0 1 .036.18h-2.959a4.231 4.231 0 0 0-4.222 4.23c0 2.548 1.984 4.627 4.42 4.627 1.137 0 2.112-.38 2.834-.777.018.433.36.777.794.777a.802.802 0 0 0 .794-.795v-7.375c.018-2.53-1.967-4.609-4.403-4.609zm-2.833 8.188a2.64 2.64 0 0 1 2.634-2.639h3.032v4.573c-.452.361-1.516 1.102-2.833 1.102-1.57 0-2.833-1.355-2.833-3.036zm-4.169-40.172a2.725 2.725 0 0 0-2.725 2.73c0 9.724-7.886 17.622-17.594 17.622-9.708 0-17.594-7.898-17.594-17.622v-6.85h11.026a2.725 2.725 0 0 0 2.725-2.73c0-1.5-1.21-2.729-2.725-2.729H14.129V2.729a2.725 2.725 0 1 0-5.45 0v21.184c0 12.724 10.34 23.081 23.044 23.081s23.044-10.357 23.044-23.081a2.72 2.72 0 0 0-2.725-2.712z"/><path fill="#6dc8bf" d="M35.548 17.08c.704 0 1.408-.289 1.913-.795a2.753 2.753 0 0 0 .794-1.934c0-.705-.288-1.41-.794-1.934a3.81 3.81 0 0 0-.415-.343 3.875 3.875 0 0 0-.469-.253 2.731 2.731 0 0 0-.505-.163 2.64 2.64 0 0 0-1.065 0c-.18.036-.343.09-.505.163a2.318 2.318 0 0 0-.47.253 2.753 2.753 0 0 0-.415 4.211 2.744 2.744 0 0 0 1.931.796zm10.377 0c.703 0 1.407-.289 1.93-.795a2.753 2.753 0 0 0 .794-1.934 2.74 2.74 0 0 0-.794-1.916 3.724 3.724 0 0 0-.415-.343 3.88 3.88 0 0 0-.469-.253 2.738 2.738 0 0 0-.505-.163 2.64 2.64 0 0 0-1.065 0c-.18.036-.343.09-.505.163-.162.072-.325.144-.47.253a2.743 2.743 0 0 0-1.209 2.26c0 .722.29 1.427.795 1.933a2.733 2.733 0 0 0 1.913.795z"/></svg>'
const arLogo =
'<svg width="47" height="67" xmlns="http://www.w3.org/2000/svg"><path fill="#6dc8bf" d="M43.596 21.201a2.725 2.725 0 0 0-2.725 2.73c0 9.724-7.886 17.622-17.594 17.622-9.708 0-17.594-7.898-17.594-17.622v-6.85h11.025a2.725 2.725 0 0 0 2.725-2.73c0-1.5-1.209-2.729-2.725-2.729H5.683V2.729a2.725 2.725 0 1 0-5.45 0v21.184c0 12.724 10.34 23.081 23.044 23.081 12.703 0 23.043-10.357 23.043-23.081a2.72 2.72 0 0 0-2.724-2.712z"/><path fill="#6dc8bf" d="M27.102 17.08c.704 0 1.408-.289 1.913-.795a2.753 2.753 0 0 0 .794-1.934c0-.705-.289-1.41-.794-1.934a3.8 3.8 0 0 0-.415-.343 3.875 3.875 0 0 0-.47-.253 2.73 2.73 0 0 0-.505-.163 2.64 2.64 0 0 0-1.064 0c-.18.036-.343.09-.506.163a2.337 2.337 0 0 0-.469.253 2.753 2.753 0 0 0-.415 4.211c.506.506 1.21.796 1.931.796zm10.376 0c.704 0 1.408-.289 1.931-.795a2.753 2.753 0 0 0 .794-1.934c0-.705-.289-1.41-.794-1.916a3.724 3.724 0 0 0-.415-.343 3.873 3.873 0 0 0-.47-.253 2.738 2.738 0 0 0-.504-.163 2.64 2.64 0 0 0-1.065 0c-.18.036-.343.09-.505.163a2.318 2.318 0 0 0-.47.253 2.743 2.743 0 0 0-1.209 2.26c0 .722.29 1.427.794 1.933a2.733 2.733 0 0 0 1.913.795zM.782 50.109a.8.8 0 0 0-.782.803v13.349a.8.8 0 0 0 .782.803c.426 0 .781-.365.781-.803V50.912c0-.438-.355-.803-.781-.803zm43.791 4.017c-.426 0-.782.366-.782.804v7.395c0 1.699-1.261 3.068-2.789 3.068-1.545 0-2.789-1.37-2.789-3.068v-3.524c0-2.575-1.954-4.675-4.352-4.675-2.399 0-4.353 2.1-4.353 4.675v3.524c0 1.699-1.261 3.068-2.789 3.068h-9.416c-1.545 0-2.789-1.37-2.789-3.068V50.912c0-.438-.355-.803-.781-.803a.8.8 0 0 0-.782.803v11.413C12.95 64.9 14.905 67 17.303 67h9.416c1.474 0 2.79-.803 3.57-2.009.782 1.206 2.097 2.01 3.572 2.01 1.474 0 2.789-.804 3.57-2.01.782 1.206 2.097 2.01 3.571 2.01 2.398 0 4.353-2.1 4.353-4.676V54.93a.788.788 0 0 0-.782-.804zM33.861 65.393c-1.546 0-2.79-1.37-2.79-3.068v-3.524c0-1.698 1.262-3.068 2.79-3.068 1.545 0 2.789 1.37 2.789 3.068v3.524c0 1.699-1.262 3.068-2.79 3.068zM10.126 54.126c-.426 0-.781.365-.781.804v7.395c0 1.698-1.262 3.068-2.79 3.068a2.61 2.61 0 0 1-1.687-.62c-.338-.275-.835-.238-1.102.109-.266.347-.23.858.107 1.132A4.072 4.072 0 0 0 6.555 67c2.399 0 4.353-2.1 4.353-4.675V54.93c0-.439-.355-.804-.782-.804zm32.528-1.278c.56 0 1.013-.466 1.013-1.04 0-.576-.453-1.042-1.013-1.042-.559 0-1.012.466-1.012 1.041s.453 1.041 1.012 1.041zm-1.957-.648a1.051 1.051 0 0 0-.548-1.36 1.003 1.003 0 0 0-1.323.563c-.214.532.032 1.14.548 1.36a1.003 1.003 0 0 0 1.323-.563z"/></svg>'
const mapping = { ar_SA: arLogo, en_US: enLogo }
const logo = mapping[lang] || enLogo
const placeholderEle = createElement('div')
placeholderEle.setAttribute('id', 'tamara-placeholder-logo')
placeholderEle.setAttribute(
'style',
'width: 100%;height: 100%;display: flex;align-items: center;justify-content: center;background-color: #fff; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 2020;'
)
placeholderEle.innerHTML = logo
return placeholderEle
}
export default getPlaceholderElement