Skip to content

Commit

Permalink
themes round 2 (OriginProtocol#658)
Browse files Browse the repository at this point in the history
* checkpoint

* prettify

* remove dup icon

* Lint

* action buttons

* checkpoint

* ybm theme changes

* prettify

* Final bits of changes

Co-authored-by: Nick Poulden <[email protected]>
  • Loading branch information
shahthepro and nick authored Oct 22, 2020
1 parent e3a7e6f commit 18df36c
Show file tree
Hide file tree
Showing 45 changed files with 817 additions and 355 deletions.
1 change: 1 addition & 0 deletions backend/logic/themes.js
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ const getAllThemesData = () => {
...metaData
}
})
.filter((data) => !data.disabled)
}

/**
Expand Down
19 changes: 18 additions & 1 deletion backend/routes/shops.js
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,8 @@ const {
authSellerAndShop,
authUser,
authRole,
authSuperUser
authSuperUser,
authShop
} = require('./_auth')
const { createSeller } = require('../utils/sellers')
const { getConfig } = require('../utils/encryptedConfig')
Expand All @@ -34,6 +35,7 @@ const { readProductsFile } = require('../utils/products')
const printfulSyncProcessor = require('../queues/printfulSyncProcessor')
const { updateShopConfig } = require('../logic/shop/config')
const { createShop } = require('../logic/shop/create')
const sellerContactEmail = require('../utils/emails/sellerContact')

const log = getLogger('routes.shops')

Expand Down Expand Up @@ -1018,4 +1020,19 @@ module.exports = function (router) {
topProducts
})
})

router.post('/email-seller', authShop, async (req, res) => {
const network = await Network.findOne({ where: { active: true } })
const seller = await Seller.findOne({
where: { id: req.shop.sellerId }
})

await sellerContactEmail({
network,
seller,
data: req.body
})

res.status(200).send({})
})
}
69 changes: 69 additions & 0 deletions backend/utils/emails/sellerContact.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,69 @@
const mjml2html = require('mjml')

const { getNetworkTransport } = require('./_getTransport')
const { getLogger } = require('../logger')

const head = require('./templates/_head')
const sellerContact = require('./templates/sellerContact')
const sellerContactTxt = require('./templates/sellerContactTxt')

const log = getLogger('utils.emailer')

async function sellerContactEmail({ network, seller, data, skip }) {
const { transporter, from } = await getNetworkTransport(network)
if (!transporter) {
log.info(`Emailer not configured. Skipping sending email.`)
return
}

if (process.env.NODE_ENV === 'test') {
log.info('Test environment. Email will be generated but not sent.')
skip = true
}

const { name, email } = seller

const { subject, content, firstName, lastName, userEmail } = data

const vars = {
head,
sellerName: seller.name,
fullName: `${firstName || ''} ${lastName || ''}`,
userEmail,
subject: subject.replace(/<\/?[a-z0-9-:]+>/gi, ''),
content: content.replace(/<\/?[a-z0-9-:]+>/gi, ''),
fromEmail: from
}

const htmlOutput = mjml2html(sellerContact(vars), { minify: true })
const txtOutput = sellerContactTxt(vars)

const message = {
from,
to: `${name} <${email}>`,
subject: 'Reset your password',
replyTo: userEmail,
html: htmlOutput,
text: txtOutput
}

if (skip) return message

return new Promise((resolve) => {
transporter.sendMail(message, (err, msg) => {
if (err) {
log.error('Error sending forgot password email', err)
return resolve()
} else {
log.info(
`Forgot password email sent, from ${message.from} to ${message.to}`
)
log.debug(msg.envelope)
}

resolve(message)
})
})
}

module.exports = sellerContactEmail
21 changes: 21 additions & 0 deletions backend/utils/emails/templates/sellerContact.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
module.exports = (vars) => `
<mjml>
${vars.head}
<mj-body>
<mj-section>
<mj-column>
<mj-text mj-class="large">Hi, ${vars.sellerName}</mj-text>
<mj-text mj-class="light">
${vars.fullName} (${vars.userEmail}) has sent you the following message from your shop:
</mj-text>
<mj-text mj-class="light">
Subject: ${vars.subject}
</mj-text>
<mj-text mj-class="light">
Message Content: ${vars.content}
</mj-text>
</mj-column>
</mj-section>
</mj-body>
</mjml>
`
10 changes: 10 additions & 0 deletions backend/utils/emails/templates/sellerContactTxt.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
module.exports = (vars) => `
Hi, ${vars.sellerName}.
${vars.fullName} (${vars.userEmail}) has sent you the following message from your shop:
Subject: ${vars.subject}
Message Content:
${vars.content}
`
2 changes: 1 addition & 1 deletion shop/buildThemeDev.sh
Original file line number Diff line number Diff line change
Expand Up @@ -6,4 +6,4 @@ export THEME=$1
mkdir -p "../backend/themes/$1"
cp "./src/themes/$1/screenshot.png" "../backend/themes/$1/"
cp "./src/themes/$1/theme.json" "../backend/themes/$1/"
./node_modules/.bin/webpack --watch --loglevel notice --output-path="../backend/themes/$1"
./node_modules/.bin/webpack --config ./webpack.config.js --watch --output-path="../backend/themes/$1"
9 changes: 9 additions & 0 deletions shop/public/images/themes-icon.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion shop/src/components/Toaster.js
Original file line number Diff line number Diff line change
Expand Up @@ -107,7 +107,7 @@ require('react-styl')(`
padding: 0.25rem 0.75rem
border-radius: 5px
font-size: 14px
box-shadow: 0 0 10px 10px #fff
box-shadow: 0 0 3px 3px #fff
&.error
background-color: #ffe8e8
border-color: #d50000
Expand Down
9 changes: 9 additions & 0 deletions shop/src/components/icons/Admin.js
Original file line number Diff line number Diff line change
Expand Up @@ -324,3 +324,12 @@ export const Users = () => (
/>
</svg>
)

export const Themes = () => (
<svg className="icon icon-themes" width="14" height="15" viewBox="0 0 14 15">
<path
d="M28 342.45c.312 0 .579-.108.801-.324.222-.216.333-.486.333-.81 0-.132-.027-.27-.081-.414-.054-.144-.123-.264-.207-.36-.192-.216-.288-.462-.288-.738 0-.312.111-.576.333-.792.222-.216.489-.324.801-.324h1.296c.684 0 1.314-.165 1.89-.495.576-.33 1.032-.783 1.368-1.359.336-.576.504-1.2.504-1.872 0-1.092-.306-2.1-.918-3.024-.6-.912-1.41-1.632-2.43-2.16-1.044-.552-2.178-.828-3.402-.828-1.224 0-2.358.306-3.402.918-1.02.6-1.83 1.41-2.43 2.43-.612 1.044-.918 2.178-.918 3.402 0 1.224.306 2.358.918 3.402.6 1.02 1.41 1.83 2.43 2.43 1.044.612 2.178.918 3.402.918zm1.872-9.738c-.324 0-.594-.111-.81-.333-.216-.222-.324-.489-.324-.801 0-.312.111-.576.333-.792.222-.216.489-.324.801-.324.312 0 .576.105.792.315.216.21.324.477.324.801 0 .324-.108.594-.324.81-.216.216-.48.324-.792.324zm-3.726 0c-.324 0-.594-.111-.81-.333-.216-.222-.324-.489-.324-.801 0-.312.111-.576.333-.792.222-.216.489-.324.801-.324.312 0 .576.105.792.315.216.21.324.477.324.801 0 .324-.108.594-.324.81-.216.216-.48.324-.792.324zm5.976 2.988c-.324 0-.594-.111-.81-.333-.216-.222-.324-.489-.324-.801 0-.312.111-.576.333-.792.222-.216.489-.324.801-.324.312 0 .576.105.792.315.216.21.324.477.324.801 0 .324-.108.594-.324.81-.216.216-.48.324-.792.324zm-8.226 0c-.324 0-.594-.111-.81-.333-.216-.222-.324-.489-.324-.801 0-.312.111-.576.333-.792.222-.216.489-.324.801-.324.312 0 .576.105.792.315.216.21.324.477.324.801 0 .324-.108.594-.324.81-.216.216-.48.324-.792.324z"
transform="translate(-21 -401) translate(0 73)"
/>
</svg>
)
2 changes: 1 addition & 1 deletion shop/src/pages/admin/_Menu.js
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,7 @@ const AdminMenu = () => {
<>
<li className={`themes ${active('/admin/themes')}`}>
<Link to="/admin/themes">
<Icons.Settings />
<Icons.Themes />
<fbt desc="Themes">Themes</fbt>
</Link>
</li>
Expand Down
3 changes: 3 additions & 0 deletions shop/src/pages/admin/themes/Customize.js
Original file line number Diff line number Diff line change
Expand Up @@ -106,6 +106,9 @@ require('react-styl')(`
height: 100%
min-width: 990px
display: block
max-width: 1300px
width: 100%
margin: 0 auto
&.mobile-view iframe
width: 340px
min-width: 340px
Expand Down
20 changes: 18 additions & 2 deletions shop/src/pages/admin/themes/List.js
Original file line number Diff line number Diff line change
Expand Up @@ -44,8 +44,14 @@ const ThemeSettings = () => {

return (
<div>
<h3 className="admin-title with-border">
<h3 className="admin-title with-border d-flex align-items-center justify-content-between">
<fbt desc="Themes">Themes</fbt>

{!activeThemeId ? null : (
<button className="btn btn-primary" onClick={() => switchToTheme('')}>
<fbt desc="admin.themes.useDefaultTheme">Use Default Theme</fbt>
</button>
)}
</h3>
<div className="row">
<div className="shop-settings col-md-8 col-lg-9">
Expand All @@ -65,7 +71,14 @@ const ThemeSettings = () => {
<img
src={`${config.backend}/theme/${theme.id}/screenshot.png`}
/>
<div className="theme-label">{theme.name}</div>
<div className="theme-label">
{isSelected ? (
<>
<fbt desc="Active">Active</fbt>:{' '}
</>
) : null}
{theme.name}
</div>
<div className="actions">
{isSelected ? (
<Link
Expand Down Expand Up @@ -126,11 +139,14 @@ require('react-styl')(`
&.active
box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1)
border: solid 2px #000000
background: #000
color: #fff
img
height: 250px
width: 100%
object-fit: cover
object-position: top
.theme-label
text-align: center
Expand Down
Loading

0 comments on commit 18df36c

Please sign in to comment.